我們所說的axios的封裝和api介面的統一管理，主要目的就是在幫助我們簡化程式碼和利於後期的更新維護。

一、axios的封裝

一般我會在專案的src目錄中，新建一個request資料夾，然後在裡面新建一個http.js和一個api.js檔案。http.js檔案用來封裝我們的axios，api.js用來統一管理我們的介面。

引入

環境的切換

我們的專案環境可能有開發環境、測試環境和生產環境。我們通過node的環境變數來配我們的預設的介面url字首。axios.defaults.baseURL可以設定axios的預設請求地址。

if(process.env.NODE_ENV=="development"){
axios.defaults.baseURL='http://120.53.31.103:84/'
}
if(process.env.NODE_ENV=="production"){
axios.defaults.baseURL="https://wap.365msmk.com/"
}

設定請求超時

通過axios.defaults.timeout設定預設的請求超時時間。例如超過了10s，就會告知使用者當前請求超時，請重新整理等

axios.defaults.timeout=10000;

請求攔截

我們在傳送請求前可以進行一個請求的攔截，為什麼要攔截呢，我們攔截請求是用來做什麼的呢？比如，有些請求是需要使用者登入之後才能訪問的，或者post請求的時候，我

axios.interceptors.request.use(
    config =>{
        //設定請求體
        return config;
    }
)

響應攔截

// 響應攔截器
axios.interceptors.response.use(
    response => {
        // 如果返回的狀態碼為200，說明介面請求成功，可以正常拿到資料
        // 否則的話丟擲錯誤
        if (response.status === 200) {
            
 
return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 伺服器狀態碼不是2開頭的的情況
    // 這裡可以跟你們的後臺開發人員協商好統一的錯誤狀態碼
    // 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等
    // 下面列舉幾個常見的操作，其他需求可自行擴充套件
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登入
                // 未登入則跳轉登入頁面，並攜帶當前頁面的路徑
                // 在登入成功後返回當前頁面，這一步需要在登入頁操作。
                case 401:
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;

                // 403 token過期
                // 登入過期對使用者進行提示
                // 清除本地token和清空vuex中token物件
                // 跳轉登入頁面
                case 403:
                      Toast({
                        message: '登入過期，請重新登入',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳轉登入頁面，並將要瀏覽的頁面fullPath傳過去，登入成功後跳轉需要訪問的頁面
                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;

                // 404請求不存在
                case 404:
                    Toast({
                        message: '網路請求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他錯誤，直接丟擲錯誤提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
});

響應攔截器很好理解，就是伺服器返回給我們的資料，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果後臺返回的狀態碼是200，則正常返回資料，否則的根據錯誤的狀態碼型別進行一些我們需要的錯誤，其實這裡主要就是進行了錯誤的統一處理和沒登入或登入過期後調整登入頁的一個操作。

封裝get方法和post方法

get方法：我們通過定義一個get函式，get函式有兩個引數，第一個引數表示我們要請求的url地址，第二個引數是我們要攜帶的請求引數。get函式返回一個promise物件，當axios其請求成功時resolve伺服器返回 值，請求失敗時reject錯誤值。最後通過export丟擲get函式。

exportfunctionget(url,params){
returnnewPromise((resolve,reject)=>{
axios.get(url,{params:params}).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}

post方法：

這裡有個小細節說下，axios.get()方法和axios.post()在提交資料時引數的書寫方式還是有區別的。區別就是，get的第二個引數是一個{}，然後這個物件的params屬性值是一個引數物件的。而post的第二個引數就是一個引數物件。兩者略微的區別要留意哦！

*在程式碼的封裝過程中每一步都不是必須的，根據自己的需要來封裝。

axios封裝就完了！！！

二、api的統一管理

上面說了，我們會新建一個api.js,然後在這個檔案中存放我們所有的api介面。

首先我們在api.js中引入我們封裝的get和post方法

import{get,post}from"../http/http"

現在我們有一個post請求，就可以這個樣子封裝：

    exportfunctionmainCourse(){
        returnpost('api/app/teacher/mainCourse')
        
        }

我們定義了一個mainCourse方法，而後呼叫了我們封裝的post方法。如果有引數，post方法的第一個引數是我們的介面地址，第二個引數是mainCourse的引數，即請求介面時攜帶的引數物件。最後通過export匯出mainCourse。

三、在頁面中使用

import {mainCourse} from '../../api/api'   //匯入api介面
export default {
  async mounted(){
    var mainC = await mainCourse()
    console.log(mainC);
  },