vue+ts下对axios的封装

正文

虽然vue中axios的使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达到简化操作.而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态码的处理.那么我基于自己的需求简单分装了一下.(之前很少接触vue,主要用的ng和react,这次新项目想用vue来弄,熟悉一下vue的一些新特性和方法,有啥不对的,欢迎大家批评指正)

前提: 熟悉前端ts, node等等.

1. 安装axios

npm install axios

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);
});

最后:这是在ts下的封装,js的话更简单点,甚至应该会更简单点(会少一些步骤,网上教程应该很多).挂载http工具的方式平时也适合我们定义全局工具类或者服务.