npm install axios -D

  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請(qǐng)求頭
      this.instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
      /**
      * 請(qǐng)求攔截器
      * 每次請(qǐng)求前，如果存在token則在請(qǐng)求頭中攜帶token
      */
      this.instance.interceptors.request.use(
        (config) => {
          // 登錄流程控制中，根據(jù)本地是否存在token判斷用戶的登錄情況
          // 但是即使token存在，也有可能token是過期的，所以在每次的請(qǐng)求頭中攜帶token
          // 后臺(tái)根據(jù)攜帶的token判斷用戶的登錄情況，并返回給我們對(duì)應(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(
        // 請(qǐng)求成功
        (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);
          }
        },
        // 請(qǐng)求失敗
        (error) => {
          const {response} = error;
          if (response) {
            // 請(qǐng)求已發(fā)出，但是不在2xx的范圍
            this.errorHandle(response);
            return Promise.reject(response.data);
          } else {
            // 處理斷網(wǎng)的情況
            // eg:請(qǐng)求超時(shí)或斷網(wǎng)時(shí)，更新state的network狀態(tài)
            // network狀態(tài)在app.vue中控制著一個(gè)全局的斷網(wǎng)提示組件的顯示隱藏
            // 關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)，會(huì)在斷網(wǎng)組件中說明
            message.warn('網(wǎng)絡(luò)連接異常,請(qǐng)稍后再試!');
          }
        });
    }
  
  
    /**
    * http握手錯(cuò)誤
    * @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('請(qǐng)求的資源不存在');
          break;
        default:
          message.warn('連接錯(cuò)誤');
      }
    }
  }

/**
 * @author keiferju
 * @time  2019-08-29 12:57
 * @title  http請(qǐng)求封裝
 * @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實(shí)例
    this.axios = new Interceptors().getInterceptors();
  }


  /**
   * get請(qǐng)求
   * @param params 參數(shù)
   * @param jwt  是否token校驗(yàn)
   * @param modulename  模塊
   * @param operation   接口
   * @param flag     標(biāo)記
   * @param verson    版本,默認(rèn)1.0.0
   * @param service   服務(wù),默認(rèn)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請(qǐng)求
   * @param params 參數(shù)
   * @param jwt  是否token校驗(yàn)
   * @param modulename  模塊
   * @param operation   接口
   * @param flag     標(biāo)記
   * @param verson    版本,默認(rèn)1.0.0
   * @param service   服務(wù),默認(rèn)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);
    }
  }


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

}

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

Vue.config.productionTip = false;

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

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

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

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