vue+ts下对axios的封装实现

虽然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('连接错误');      }    }  }