雖然vue中axios的使用已經十分方便,但是實際我們的日常操作中可能為了介面的規則一致,來建立一個統一管理的全域性方法達到簡化操作.而且在實際介面對接中,我們大多都需要對請求和響應進行攔截來進行token以及回撥狀態碼的處理.那麼我基於自己的需求簡單分裝了一下.(之前很少接觸vue,主要用的ng和react,這次新專案想用vue來弄,熟悉一下vue的一些新特性和方法,有啥不對的,歡迎大家批評指正)
前提: 熟悉前端ts,node等等.

1. 安裝axios

npm install axios -D

2. 攔截器及全域性方法編寫

一個http.ts檔案進行自己http邏輯的封裝,為了程式碼分離,我同時建立interceptors.ts檔案進行攔截器邏輯,放在一起也行.

interceptors.ts(攔截器,進行請求和響應攔截並進行部分邏輯處理)

  import axios from 'axios';
  import {message} from 'ant-design-vue'; // 這是我引入的antd的元件庫,為了方便彈出吐司
  
  export class Interceptors {
    public instance: any;
  
    constructor() {
      // 建立axios例項
      this.instance = axios.create({timeout: 1000 * 12});
      // 初始化攔截器
      this.initInterceptors();
    }
    
    // 為了讓http.ts中獲取初始化好的axios例項
    public getInterceptors() {
      return this.instance;
    }
  
  
    // 初始化攔截器
    public initInterceptors() {
      // 設定post請求頭
      this.instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
      /**
      * 請求攔截器
      * 每次請求前，如果存在token則在請求頭中攜帶token
      */
      this.instance.interceptors.request.use(
        (config) => {
          // 登入流程控制中，根據本地是否存在token判斷使用者的登入情況
          // 但是即使token存在，也有可能token是過期的，所以在每次的請求頭中攜帶token
          // 後臺根據攜帶的token判斷使用者的登入情況，並返回給我們對應的狀態碼
          if (config.headers.isJwt) {
            const token = localStorage.getItem('id_token');
            if (token) {
              config.headers.Authorization = 'Bearer ' + token;
            }
          }
          return config;
        },(error) => {
          console.log(error);
        },);
  
  
      // 響應攔截器
      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) {
            // 請求已發出，但是不在2xx的範圍
            this.errorHandle(response);
            return Promise.reject(response.data);
          } else {
            // 處理斷網的情況
            // eg:請求超時或斷網時，更新state的network狀態
            // network狀態在app.vue中控制著一個全域性的斷網提示元件的顯示隱藏
            // 關於斷網元件中的重新整理重新獲取資料，會在斷網元件中說明
            message.warn('網路連線異常,請稍後再試!');
          }
        });
    }
  
  
    /**
    * http握手錯誤
    * @param res 響應回撥,根據不同響應進行不同操作
    */
    private errorHandle(res: any) {
      // 狀態碼判斷
      switch (res.status) {
        case 401:
          break;
        case 403:
          break;
        case 404:
          message.warn('請求的資源不存在');
          break;
        default:
          message.warn('連線錯誤');
      }
    }
  }

http.ts(http封裝,自己根據實際情況處理)

/**
 * @author keiferju
 * @time  2019-08-29 12:57
 * @title  http請求封裝
 * @desc
 *
 */
import {Interceptors} from '@/service/interceptors';
import {message,Modal} from 'ant-design-vue';  // 彈吐司
import router from '../router';

export class HttpService {
  public axios: any;
  public modal: any;

  constructor() {
      // 獲取axios例項
    this.axios = new Interceptors().getInterceptors();
  }


  /**
   * get請求
   * @param params 引數
   * @param jwt  是否token校驗
   * @param modulename  模組
   * @param operation   介面
   * @param flag     標記
   * @param verson    版本,預設1.0.0
   * @param service   服務,預設services
   */
  public getData(params: object,jwt: boolean,modulename: string,operation: string,flag: string,verson = '1.0.0',service = 'services') {

    const url = service + '/' + verson + '/' + modulename + '/' + operation;
    const body = {
      parameter: {
        data: params,tag: flag,},};

    return new Promise((resolve,reject) => {
      this.axios.get(url,{
        params: body,headers: {isJwt: jwt},}).then((res) => {
        this.resultHandle(res,resolve);
      }).catch((err) => {
        reject(err.message);
      });
    });

  }


  /**
   * post請求
   * @param params 引數
   * @param jwt  是否token校驗
   * @param modulename  模組
   * @param operation   介面
   * @param flag     標記
   * @param verson    版本,預設services
   */
  public postData(params: object,service = 'services') {
    const url = service + '/' + verson + '/' + modulename + '/' + operation;
    const body = {
      data: params,};
    return new Promise((resolve,reject) => {
      this.axios.post(url,body,{
        headers: {isJwt: jwt},resolve);
      }).catch((err) => {
        reject(err.message);
      });
    });

  }


  /**
   *
   * @param res
   * @param resolve
   */
  public resultHandle(res: any,resolve) {
    if (res.status > 0) {
      resolve(res.data);
    } else {
      this.errorHandle(res);
    }
  }


  /**
   * 服務端狀態處理,例如中斷性異常,退出異常等等(與攔截器http握手狀態注意區分,一般都能分清楚吧)
   * @param res
   */
  public errorHandle(res: any) {
    message.warn(res.msg); // 統一談服務端提示,我們提示統一由服務端提供
    // 狀態碼判斷
    switch (res.status) {
      case -102: 
         break;
      case -152:
        break;
      default:
      // console.log(other);
    }
  }

}

3. 掛載

我們定義好攔截器,那麼就得把他掛載全域性,能讓我們方便使用.

main.ts

import Vue from 'vue';
import App from './App.vue';
import HighchartsVue from 'highcharts-vue';

Vue.config.productionTip = false;

Vue.prototype.$httpService = new HttpService(); // 掛載服務

new Vue({
  router,render: (h) => h(App),}).$mount('#app');

4. ts橋連(也不知道怎麼稱呼,自己從ng時就一直這麼稱呼)

行完上一步一定會發現報錯啊,$httpService是個啥,不存在啊,這是因為ts的特性導致.

main.ts的同級目錄建立一個xx.d.ts檔案.

  import {HttpService} from './service/http';
  
declare module 'vue/types/vue' {
  interface Vue {
    $httpService: HttpService;
  }
}

5. 使用

在其它元件中使用,直接用this呼叫,不用再去引用,但是小心在某個this指向變了的回撥中使用時找不到,至於怎麼怎麼解決應該都懂.

this.$httpService.postData({},true,'execute','xxx','tag').then((result) => {
       // doing      
},(error) => {
   console.log(error);
});

最後:這是在ts下的封裝,js的話更簡單點,甚至應該會更簡單點(會少一些步驟,網上教程應該很多).掛載http工具的方式平時也適合我們定義全域性工具類或者服務.

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。