axios实现类似form传值的格式,以及实现拦截器功能,response拦截实现权限判断

import axios from 'axios'
import Qs from 'qs'

// 超时设置
const service = axios.create({
    transformRequest: [function (data) {
    data = Qs.stringify(data);
        return data;
    }],
    // 请求超时时间
    timeout: 5000   ,
});

//对,就是用qs对aixos进行全局设置,之后在首页引入这个封装好的aixos就好了,传给后台都是类似form的形式
2、这里补充一下,用拦截器给请求头加token
// http request 拦截器
// 每次请求都为http头增加Authorization字段,其内容为token
service.interceptors.request.use(
    config => {
        let cancel
        config.cancelToken = new CancelToken(function executor(c) {
            cancel = c;
        })
        var token = Cookies.get('token');
         config.headers.token = token
         if(token != undefined){
             Auth.setLoginStatus()
        }
        stopRepeatRequest(config.url, cancel)
        return config
    },
    err => {
        return Promise.reject(err);
    }
);
3、针对返回来的数据进行拦截,这里进行权限判断,没权限或者页面不对,就跳到404
// http response 拦截器
// 针对响应代码确认跳转到对应页面
service.interceptors.response.use(
    response => {
        for( let i = 0; i < requestList.length; i++){
            if(requestList[i] == response.config.url){
                // 注意,不能保证500ms必定执行,详情请了解JS的异步机制
                requestList.splice(i,1)
                //异步删除有问题
                // setTimeout(function(){
                //   requestList.splice(i,1)
                //   console.log(requestList,'执行删除了=================')
                // }, 100)

                break
            }
        }
        return Promise.resolve(response.data)
    },
    error => {
        if(axios.isCancel(error)){
            return Promise.reject("Ajax Abort: 该请求在axios拦截器中被中断")
        } else if (error.response) {
            switch (error.response.status) {
                case 401:
                    router.push('error/401');
                case 403:
                    router.push('error/403');
                default:
                    Message({
                        message: `服务器错误!错误代码:${error.response.status}`,
                        type: 'error'
                    })
            }
            return Promise.reject(error.response.data)
        }
    }
);

 

posted @ 2018-08-17 10:37  豆豆飞  阅读(344)  评论(0编辑  收藏  举报