美文网首页
axios拦截器,实现全局请求超时重发

axios拦截器,实现全局请求超时重发

作者: adtk | 来源:发表于2018-07-16 17:49 被阅读0次

    更新:直接将retry等属性直接放在config上,可能被axios过滤掉了,现在放在config.headers中

    // 请求拦截
    axios.interceptors.request.use(
        function(config) {
            // 在发送请求之前做些什么
            console.log(config.data);
            if (typeof config.data === "object") {
                config.data = qs.stringify(config.data); //转换数据,这里依赖qs模块,将json转param
            }
            return config;
        },
        function(error) {
            return Promise.reject(error);
        }
    );
    //   响应拦截
    axios.interceptors.response.use(
        function(response) {
            var randomColor = `rgba(${parseInt(Math.random() * 255)},${parseInt(
                Math.random() * 255
            )},${parseInt(Math.random() * 255)})`;
    
            console.log(
                "%c┍------------------------------------------------------------------┑",
                `color:${randomColor};`
            );
            console.log("| 请求地址:", response.config.url);
            console.log("| 请求参数:", qs.parse(response.config.data));
            console.log("| 返回数据:", response.data);
            console.log(
                "%c┕------------------------------------------------------------------┙",
                `color:${randomColor};`
            );
            return response.data;//这里只返回服务器给的数据到回调函数,
        },
        function(err) {
            var config = err.config;
            // retry和retryDelay 可以在传的参数里面携带
            if (config.headers&& !config.headers.retry) {
                config.headers.retry = 5;//设置默认重复次数
            }
            config.headers.__retryCount = config.headers.__retryCount || 0;
            if (config.headers.__retryCount >= config.headers.retry) {
                alert("网络错误");
                return Promise.reject(err);
            }
            config.headers.__retryCount += 1;
            var backoff = new Promise(function(resolve) {
                setTimeout(function() {
                    resolve();
                },2000);
            });
            return backoff.then(function() {
                return axios(config);
            });
        }
    );
    
    Vue.prototype.$http = axios;
    

    相关文章

      网友评论

          本文标题:axios拦截器,实现全局请求超时重发

          本文链接:https://www.haomeiwen.com/subject/wrgbpftx.html