Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求

更新時間：2022年06月24日 10:32:37 作者：3v3n1ng

這篇文章主要介紹了Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請求，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue3使用axios發(fā)起網(wǎng)絡(luò)請求

即使是小型項目也會涉及到請求后端API，除非你的網(wǎng)站展示的是一些不需要維護(hù)的靜態(tài)數(shù)據(jù)，第三篇文章我們來給Vue項目搞上axios。

1.何為Axios？

請看官方對Axios的描述，傳送門：官方文檔

Axios 是一個基于 promise 網(wǎng)絡(luò)請求庫，作用于node.js 和瀏覽器中。它是 isomorphic 的(即同一套代碼可以運行在瀏覽器和node.js中)。在服務(wù)端它使用原生 node.js http 模塊, 而在客戶端 (瀏覽端) 則使用 XMLHttpRequests。

2.如何安裝Axios

這部分我使用了幾個不同版本的node都沒有報錯，兼容性還是不錯的。

yarn add axios?

3.如何封裝網(wǎng)絡(luò)請求和全局實例化axios

官網(wǎng)的實例都是在單個文件中局部實例化axios，在項目上使用不多。

按照之前的文章操作成功后，還需要在你的項目src目錄下新建api文件夾

在這里插入圖片描述

4. api.js是什么？

這里面封裝了所有的API請求，可以指定是否有參數(shù)，指定請求的類型是GET、POST、DELETE還是PUT

import http from './http.js'
// 獲取驗證碼，這個函數(shù)指的是使用GET請求請求目標(biāo)服務(wù)器的
Captcha路由
export function getCaptcha() {
    return http.get("/captcha")
}  
// 驗證用戶名\密碼，這里指的是使用POST方法請求Login接口，并攜帶params對象作為參數(shù)。
export function verifyUserNameAPI(params) {
    return http.post("/login", params)
}

5.http.js是什么？

import request from '@/api/request'
const http = {
        get(url, params) {
            const config = {
                method: 'get',
                url: url
            } /*這里如果GET請求有參數(shù)，則攜帶上傳入的參數(shù)，在
            URL中以？的方式放在請求鏈接中*/
            if (params) config.params = params
            return request(config)
        },
        post(url, params) {
            const config = {
                method: 'post',
                url: url
            }/*同理也是傳入用戶需要發(fā)送到后臺的參數(shù)，這些參數(shù)
            放在報文中，載體表達(dá)標(biāo)準(zhǔn)是JSON*/
            if (params) config.data = params
            return request(config)
        },
    }
    
//暴露接口，允許Vue文件或其他js,ts文件使用http結(jié)構(gòu)體中的方法
export default http

6.request.js是什么？

這個是核心的JS文件，表明了后端的地址，接口超時時間，以及請求攔截器和響應(yīng)攔截器部分。

import axios from 'axios';
// 創(chuàng)建一個自定義的Axios對象
const Axios = axios.create({
    baseURL: 'http://127.0.0.1:1234',
    timeout: 3000,
    /*也可以不設(shè)置Content-Type，影響是在你發(fā)送請求時
    Vue會先發(fā)送OPTIONS包探測路由是否存在，需要后端也做設(shè)置響應(yīng)OPTIONS
    方法，否則會報跨域錯誤；我這里用的Beego2，路由里不響應(yīng)OPTIONS方法，
    所以我在這塊設(shè)置Content-Type*/
    headers: { 
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    /*這個配置很重要，允許axios攜帶用戶Cookie到后端，不設(shè)置這個的話
    Set-Cookie是無效的,除此之外,Chrome默認(rèn)開啟了SameSite檢查，如果
    后端不主動設(shè)置SameSite = none,Set-Cookie是無效的。詳情請文章末尾
    參考阮老師的SameSite講解*/
    withCredentials: true
});
Axios.interceptors.request.use(req => {
    // 請求攔截處理
    // console.log('這里是請求攔截器，我攔截了請求', req);
    return req; 
}, err => {
    console.log('在發(fā)送請求時發(fā)生錯誤，錯誤為', err);
    //這里不能直接放回err,需要按照官方說明返回一個Promise
    return Promise.reject(err);
})
Axios.interceptors.response.use(res => {
        // 響應(yīng)攔截處理
        // console.log('響應(yīng)攔截 ', res);
        return res.data;
    }, error => {
        const err = error.toString();
		//按照實際的響應(yīng)包進(jìn)行解析，通過關(guān)鍵字匹配的方式
        switch (true) {
            case err.indexOf('Network') !== -1:
                console.log('后端服務(wù)器無響應(yīng)或者URL錯誤', err);
                break;
            case err.indexOf('timeout') !== -1:
                console.log('請求后端服務(wù)器超時！', err);
                break;
        }
        return Promise.reject(error);
    })
//暴露Axios實例化對象，允許所有文件調(diào)用Axios
export default Axios;

7.如何在Vue文件中請求封裝好的API呢？

//導(dǎo)入聲明的API請求函數(shù)
import { getCaptcha } from "@/api/api";
import { useMessage } from "naive-ui";
export default {
  setup() {
    let captchaId = ref();
    onMounted(() => {
       //onMounted是Vue聲明周期的鉤子函數(shù)，由Vue提供，
       //請參考Vue聲明周期鉤子官方文檔
      getcaptchaAPI();
    });
    function getcaptchaAPI() {
      getCaptcha()
        .then((res) => {
          /*這里的res是響應(yīng)成功是返回的數(shù)據(jù)，res.data說明獲取報文
          中的data字段對應(yīng)的值,我在setup聲明使用的ref，所以賦值時
          需要使用captchaId.value的方式*/
          captchaId.value = res.data;
        })
        //在這里處理錯誤
        .catch((err) => console.log(err));
    }
   }
}

就到這里了，現(xiàn)在你的項目既能請求后端接口，又能進(jìn)行路由跳轉(zhuǎn)，具備了項目的基本條件，可以嘗試寫一個簡單地頁面了。

Vue3.0請求接口的例子

<script>
// getInTheaters 為封裝的接口請求
import { getInTheaters } from "@/api/movie";
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  provide,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
export default {
  components: {},
  setup() {
    const state = reactive({
      inTheaters: [],
    });
 
    // 編程式導(dǎo)航
    const router = useRouter();
    const store = useStore();
 
    onBeforeMount(() => {
      store.commit("setShowBack", false);
    });
 
    onBeforeUnmount(() => {
      store.commit("setShowBack", true);
    });
 
    const getInTheatersData = async () => {
      const res = await getInTheaters(
        "/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=3535827"
      );
      state.inTheaters = res.data.data.films;
 
      onMounted(() => {
        //執(zhí)行請求
        getInTheatersData();
      });
 
       //頁面跳轉(zhuǎn)
      const goToList = (type) => {
        router.push(`/list/${type}`);
      };
 
      // 傳遞數(shù)據(jù)給子組件
      provide("title", "電影");
 
      return { ...toRefs(state), goToList };
    };
  },
};
</script>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: