Axios二次封裝及使用

阿新 • • 發佈：2022-03-01

開發中把Axios進行二次封裝，可以更好的使用Axios的請求攔截器，以及響應攔截器去處理資料

實現程式碼如下新建/api/request.js：

/* 對axios進行二次封裝 */
import axios from "axios";
// 引入進度條 start 進度條開始  done進度條結束
import nprogress from "nprogress";
//引入 進度條樣式
import "nprogress/nprogress.css"

//1. 利用axios物件的方法create方法去建立一個axios例項
// request就是axios,只不過稍微配置一下
const request = axios.create({
    // 基礎路徑：發請求的時候，路徑中會帶有api
    baseURL:'/api',
    //代表請求超時的時間為5s
    timeout:5000,
})

// 配置請求攔截器,在請求發出去之前，攔截器可以監測到，可以在請求發出之前做一些事情
 request.interceptors.request.use((config)=>{
    //config 是一個配置物件，物件裡有一個屬性很重要，就是header請求頭
    nprogress.start();
    return config;
 })

 // 響應攔截器
 request.interceptors.response.use((res)=>{
    //響應成功的回撥函式，伺服器響應資料回來以後，可以做一些事情
    nprogress.done();
    return res.data;
 },(error)=>{
    //響應失敗的回撥函式
    return error.msg
 })

 export default request;

現在其實以及封裝完畢了，需要用的時候可以直接引入使用，但是都做到這一步了，乾脆在做個api統一管理 /api/index

//該模組對所有的api進行統一管理

import request from "./request";

// 三級聯動介面 get /api/product/getBaseCategoryList 無引數
export const reqCategoryList = ()=>{
    //傳送請求，axios返回的結果是Promiss物件
    return request({url:'/product/getBaseCategoryList',method:'get'})
}

使用方法，因為本專案使用了vuex狀態管理，所以在需要請求的時候，直接dispatch給action，不使用vuex可以直接呼叫介面函式即可

    mounted(){
      //通知vuex發請求，獲取資料，儲存與倉庫當中
      this.$store.dispatch('categoryList');
    },

在action中處理:

import {reqCategoryList} from "@/api";

//actions 處理actions,可以寫自己的業務，也可以處理非同步
const actions = {
    //通過api介面向伺服器傳送請求
    async categoryList(commit){
        let result = await reqCategoryList();//傳送請求
        //commit 向state提交資料，提交的資料就是獲取到的資料
        if(result.code == 200){
            this.commit('CATEGORYLIST',result.data)
        }
    }
};

解決請求跨域問題，使用代理伺服器

    //代理跨域  只有瀏覽器有跨域問題  伺服器之間沒有
    devServer: {
        proxy: {
            '/api':{
                target:'http://39.98.123.211',
                //這裡路徑不需要重寫，因為請求伺服器上的路徑就帶api
                //pathRewrite: { '^/api':''},
            }
        }
    }

文中程式碼進度條的實現，其實也算是請求攔截器、響應攔截器的使用了。同理動態載入動畫也可以通過這種方式實現