最近從0開始搭了一個vue-cli的專案， 雖然axios也可以直接拿來用，但是對介面比較零散，不太好進行維護，也會產生大量的重複程式碼，所以筆者對axios進行了統一介面處理，廢話不多說，直接上程式碼。   

首先，在vue-cli專案的src路徑下新建一個axios資料夾，在axios資料夾裡新建aps.js和request.js，api.js用於寫介面，對axios的封裝寫在request.js裡，專案機構如圖：

1. axios統一封裝

然後開始統一封裝axios， 首先引入axios、qs依賴，引入main.js主要是用於後面對介面進行統一處理，比如調介面的時候，顯示loading等。這個main.js根據你個人情況，可加可不加。

//request.js
import axios from "axios";
import qs from "qs";
import app from "../main.js";

然後建立一個axios例項，這個process.env.BASE_URL在config/dev.evn.js、prod.evn.js裡面進行配置：

/****** 建立axios例項 ******/
const service = axios.create({
    baseURL: process.env.BASE_URL,  // api的base_url
    timeout: 5000  // 請求超時時間
});

axios例項建立好之後，開始使用request攔截器對axios請求配置做統一處理，具體如下：

/****** request攔截器==>對請求引數做處理 ******/
service.interceptors.request.use(config => {
    app.$vux.loading.show({
        text: '資料載入中……'
    });

    config.method === 'post'
        ? config.data = qs.stringify({...config.data})
        : config.params = {...config.params};
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';

    return config;
}, error => {  //請求錯誤處理
    app.$vux.toast.show({
        type: 'warn',
        text: error
    });
    Promise.reject(error)
});
 

然後是對response做統一處理，程式碼如下：

/****** respone攔截器==>對響應做處理 ******/
service.interceptors.response.use(
    response => {  //成功請求到資料
        app.$vux.loading.hide();
        //這裡根據後端提供的資料進行對應的處理
        if (response.data.result === 'TRUE') {
            return response.data;
        } else {
            app.$vux.toast.show({  //常規錯誤處理
                type: 'warn',
                text: response.data.data.msg
            });
        }
    },
    error => {  //響應錯誤處理
        console.log('error');
        console.log(error);
        console.log(JSON.stringify(error));

        let text = JSON.parse(JSON.stringify(error)).response.status === 404
            ? '404'
            : '網路異常，請重試';
        app.$vux.toast.show({
            type: 'warn',
            text: text
        });

        return Promise.reject(error)
    }
);

最後，將我們的axios例項暴露出去，整個axios的封裝就寫完了。

export default service;

2. axios介面的呼叫方式

axios封裝好之後，呼叫就很簡單了。我們把介面統一寫在api.js檔案裡。（當然，如果你的業務非常複雜的話，建議把不同業務的api分開放到不同的檔案裡，這樣方便以後維護）。

注意：post請求引數放在data裡面，get請求引數放在params裡。

//api.js
import service from './request'

export const getPersonInfo = data => {
    return service({
        url: '/person_pay/getpersoninfo',
        method: 'post',
        data
    })
};

然後在具體的元件中進行呼叫。

//index.vue
import {getPersonInfo} from '../axios/api.js'
export default {
    created: async function () {
        const params = {
            card_no: '111'
        };
        let res = await getPersonInfo(params);
        console.log(res);
    }
}

第一次寫部落格，寫的不好，請大家多多指教！