Axios再封装

• Axios再封装

注解：type：请求类型，url：对应的API，data：请求参数，heaStr：API版本（如v2,v3）

    import axios from 'axios'
    Vue.prototype.$http= service;
    //Vue函数添加一个原型属性$axios 指向axios,这样vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法
    var CancelToken = axios.CancelToken;
    Vue.$httpRequestList=[];
    Vue.prototype.$axios = (type, url, data,heaStr) => {
    if(url!='/api/ding/login'&& url!='/api/integral/types'){
    var Accept='';
    switch(heaStr){
       case 'v2':
         Accept='application/vnd.test.v2+json'
         break;
       case 'v3':
         Accept='application/vnd.test.v3+json'
         break;
       case 'v4':
         Accept='application/vnd.test.v4+json'
         break;
    }
    if(getToken()){
        return new Promise((resolve, reject) => {   //封装ajax
            var aa = {
                method: type,
                url: url,
                headers:{
                  'Accept':Accept
                },
                cancelToken: new CancelToken(c => {  //强行中断请求要用到的
                    Vue.$httpRequestList.push(c);
                })
            }
            var json = (type == 'get') ? Object.assign(aa, { params: data }) :             Object.assign(aa, { data: data });
            var ajax = Vue.prototype.$http(json).then(res => {
                resolve(res);
            }).catch(error => {   //中断请求和请求出错的处理
                    if (error == "interrupt") {
                        console.log('已中断请求');
                        return;
                    } else {
                        reject(error);
                    }
                })
            return ajax;
        })
    }else{return Promise.reject('无token')}
    }else{
    return new Promise((resolve, reject) => {   //封装ajax
        var aa = {
            method: type,
            url: url,
            cancelToken: new CancelToken(c => {  //强行中断请求要用到的
                Vue.$httpRequestList.push(c);
            })
        }
        var json = (type == 'get') ? Object.assign(aa, { params: data }) : Object.assign(aa, {data: data });
        var ajax = Vue.prototype.$http(json).then(res => {
            resolve(res);
        }).catch(error => {   //中断请求和请求出错的处理
                if (error.message == "interrupt") {
                    console.log('已中断请求');
                    return;
                } else {
                    reject(error);
                }
            })
                return ajax;
            })
        }
    };

    router.beforeEach((to, from, next) => {   //路由切换检测是否强行中断，
        NProgress.start();
        if(Vue.$httpRequestList.length>0){        //强行中断时才向下执行
            Vue.$httpRequestList.forEach(item=>{
                item('interrupt');//给个标志，中断请求
            })  
        }
        next();    
    });

请求终断：当快速切换页面，如果上一页面请求还没响应，跳转到下一个页面，上一页面的请求终止。

         cancelToken: new CancelToken(c => {  //强行中断请求要用到的
             Vue.$httpRequestList.push(c);
         })

         router.beforeEach((to, from, next) => {   //路由切换检测是否强行中断，
            NProgress.start();
            if(Vue.$httpRequestList.length>0){        //强行中断时才向下执行
                Vue.$httpRequestList.forEach(item=>{
                    item('interrupt');//给个标志，中断请求
                })  
            }
            next();    
        });

实现思路：对axios进行再次封装，统一方式调用，传参。终止请求