背景：

??axios不進(jìn)行封裝也可以使用，但對(duì)于接口返回的狀態(tài)要在每個(gè)請求里寫一遍，代碼重復(fù)量大，不利于維護(hù)。

開始：

??首先建一個(gè)request.js文件并在這個(gè)文件里引入axios和qs。
??用qs是為了將參數(shù)轉(zhuǎn)換成字符串傳給后端,因?yàn)閍xios默認(rèn)有兩種傳參形式，一種是Format-Data，另一種是Request Payload，Request Payload形式如果前后端都不做處理，則后端拿不到請求參數(shù)。這個(gè)問題前端和后端都可以解決（前端詳見：Vue axios發(fā)post請求后臺(tái)接收不到參數(shù)的三種解決方案；據(jù)說后端接收參數(shù)時(shí)加上@RequestBody就可以，后端我不太懂，不做擴(kuò)展了），只要有一方處理就好。
用之前當(dāng)然要先安裝一下：
npm install axios --save-dev
npm install qs --save-dev
安裝完成后在request.js里引用

//request.js
import axios from "axios"
import qs from "qs"

接下來就可以創(chuàng)建axios實(shí)例了：

const request = axios.create({
    baseURL: 'http://xxx.com',  // api的base_url
    timeout: 5000  // 請求超時(shí)時(shí)間
});

如果是vue-cli初始項(xiàng)目的話，baseURL的值可以是process.env.BASE_URL。

請求攔截處理：

        request .interceptors.request.use(function(config){
            //在請求發(fā)送之前做一些事
            config.header['Authorization'] = '' + token // 讓每個(gè)請求攜帶token-- ['X-TokenAuthorization']為自定義key 請根據(jù)實(shí)際情況自行修改

            //也可以給發(fā)請求時(shí)加一個(gè)loading的動(dòng)畫

            //當(dāng)寫java接口的童鞋不用@RequestBody接收參數(shù)時(shí)，傳參就要靠自己了
            config.method === 'POST' || 'PUT' || 'PATCH' ? config.data = qs.stringify({...config.data}) : config.params = {...config.params};
            
            return config;
        },function(error){
            //當(dāng)出現(xiàn)請求錯(cuò)誤是做一些事
            return Promise.reject(error);
        });

最后就是把封裝好的axios拋出去：

export default request 

簡單封裝就到這里了，更多配置參考axios文檔，下面來看下怎么用：

//api.js
import request from './request'
 
export const getData = data => {
    return request ({
        url: '/api/xxx',
        method: 'post',
        data
    })
};