vue+ts如何實現對axios進行封裝

這篇文章給大家分享的是有關vue+ts如何實現對axios進行封裝的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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    版本,默認1.0.0
   * @param service   服務,默認services
   */
  public postData(params: object, jwt: boolean, modulename: string, operation: string,
          flag: string, verson = '1.0.0', service = 'services') {
    const url = service + '/' + verson + '/' + modulename + '/' + operation;
    const body = {
      data: params,
      tag: flag,
    };
    return new Promise((resolve, reject) => {
      this.axios.post(url, body, {
        headers: {isJwt: jwt},
      }).then((res) => {
        this.resultHandle(res, 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);
});

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

感謝各位的閱讀！關于“vue+ts如何實現對axios進行封裝”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！