對axios進行基礎配置

import axios from 'axios';  // 該處引入axios模組

// 構建axios例項
const instance = axios.create({
    baseURL: process.env.BASE_API,  // 該處url會根據開發環境進行變化（開發/釋出）
    timeout: 10000  // 設定請求超時連線時間
})

request攔截器（請求傳送後端之前）

因為每次傳送請求都會 判斷token,很麻煩，所以在請求攔截器中統一進行處理。

個人理解，request 攔截器並不像他的名字一樣，進行攔截，傳送不出去，而是對請求的資料進行處理，在傳送請求。

就如遊客訪問的時候，因為沒有 token 攔截器只會判斷 post 請求頭攜不帶 token，並不是請求沒有傳送出去。

當請求攔截出錯的時候，會在 error 中執行顯示。

instance.interceptors.request.use(
    config => {
        console.log(config);  // 該處可以將config打印出來看一下，該部分將傳送給後端（server端）
        config.headers.token = '該處可設定token內容';
        return config  // 對config處理完後返回，下一步將向後端傳送請求
 

    },
    error => {  // 當發生錯誤時，執行該部分程式碼
        console.log(error); //除錯用
        return Promise.reject(error)
    }
)

response攔截器（資料返回後，具體頁面載入之前）

這裡為響應攔截，資料返回頁面前的行為，為什麼要用這個響應攔截器呢？

這裡也是使用了統一處理，如登入過期、沒有登入要怎麼處理，統一在此進行處理，否則，每次請求都要另外進行一次判斷則顯得很麻煩。

響應攔截器 就是對返回的資料進行處理

instance.interceptors.response.use(
    response 
 
=> {  // 該處為後端返回整個內容
        const res = response.data;  // 該處可將後端資料取出，提前做一個處理
        if ('正常情況') {
            return response  // 該處將結果返回，下一步可用於前端頁面渲染用
        } else {
            alert('該處異常');
            return Promise.reject('error')
        }
    },
    error => {
        console.log(error),
        return Promise.reject(error)
    }
)

將axios例項匯出，方便其他頁面呼叫

export default instance

其他頁面呼叫上述例項傳送請求

import instance from '../xxx.js';  // 將例項匯入
const qs=require('qs');  // 用於處理前端傳送資料格式
const base = process.env.BASE_URL;  // 該處根據開發環境變化

export const login = params => {return instance.post(`${base}/login`, qs.stringify(params)).then(res => res.data)}  // 該處即可實現向後端傳送請求，並將資料返回給呼叫該介面的位置