雖然vue中axios的使用已經(jīng)十分方便,但是實(shí)際我們的日常操作中可能為了接口的規(guī)則一致,來創(chuàng)建一個(gè)統(tǒng)一管理的全局方法達(dá)到簡化操作.而且在實(shí)際接口對接中,我們大多都需要對請求和響應(yīng)進(jìn)行攔截來進(jìn)行token以及回調(diào)狀態(tài)碼的處理.那么我基于自己的需求簡單分裝了一下.(之前很少接觸vue,主要用的ng和react,這次新項(xiàng)目想用vue來弄,熟悉一下vue的一些新特性和方法,有啥不對的,歡迎大家批評指正)
前提: 熟悉前端ts, node等等.

1. 安裝axios

npm install axios -D

2. 攔截器及全局方法編寫

一個(gè)http.ts文件進(jìn)行自己http邏輯的封裝,為了代碼分離,我同時(shí)創(chuàng)建interceptors.ts文件進(jìn)行攔截器邏輯,放在一起也行.

interceptors.ts(攔截器,進(jìn)行請求和響應(yīng)攔截并進(jìn)行部分邏輯處理)

  import axios from 'axios';  import {message} from 'ant-design-vue'; // 這是我引入的antd的組件庫,為了方便彈出吐司    export class Interceptors {    public instance: any;      constructor() {      // 創(chuàng)建axios實(shí)例      this.instance = axios.create({timeout: 1000 * 12});      // 初始化攔截器      this.initInterceptors();    }        // 為了讓http.ts中獲取初始化好的axios實(shí)例    public getInterceptors() {      return this.instance;    }        // 初始化攔截器    public initInterceptors() {      // 設(shè)置post請求頭      this.instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';      /**      * 請求攔截器      * 每次請求前，如果存在token則在請求頭中攜帶token      */      this.instance.interceptors.request.use(        (config) => {          // 登錄流程控制中，根據(jù)本地是否存在token判斷用戶的登錄情況          // 但是即使token存在，也有可能token是過期的，所以在每次的請求頭中攜帶token          // 后臺根據(jù)攜帶的token判斷用戶的登錄情況，并返回給我們對應(yīng)的狀態(tài)碼          if (config.headers.isJwt) {            const token = localStorage.getItem('id_token');            if (token) {              config.headers.Authorization = 'Bearer ' + token;            }          }          return config;        },        (error) => {          console.log(error);        },      );          // 響應(yīng)攔截器      this.instance.interceptors.response.use(        // 請求成功        (res) => {          if (res.headers.authorization) {            localStorage.setItem('id_token', res.headers.authorization);          } else {            if (res.data && res.data.token) {              localStorage.setItem('id_token', res.data.token);            }          }            if (res.status === 200) {            return Promise.resolve(res.data);          } else {            this.errorHandle(res);            return Promise.reject(res.data);          }        },        // 請求失敗        (error) => {          const {response} = error;          if (response) {            // 請求已發(fā)出，但是不在2xx的范圍            this.errorHandle(response);            return Promise.reject(response.data);          } else {            // 處理斷網(wǎng)的情況            // eg:請求超時(shí)或斷網(wǎng)時(shí)，更新state的network狀態(tài)            // network狀態(tài)在app.vue中控制著一個(gè)全局的斷網(wǎng)提示組件的顯示隱藏            // 關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)，會在斷網(wǎng)組件中說明            message.warn('網(wǎng)絡(luò)連接異常,請稍后再試!');          }        });    }        /**    * http握手錯誤    * @param res 響應(yīng)回調(diào),根據(jù)不同響應(yīng)進(jìn)行不同操作    */    private errorHandle(res: any) {      // 狀態(tài)碼判斷      switch (res.status) {        case 401:          break;        case 403:          break;        case 404:          message.warn('請求的資源不存在');          break;        default:          message.warn('連接錯誤');      }    }  }