Provisional headers are shown axios 超时处理

自从使用Vue2之后，就使用官方推荐的axios的插件来调用API，在使用过程中，如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。

具体原因
最近公司在做一个项目, 服务端数据接口用的是java输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。

按照搜索引擎给出来的解决方案，解决不了我的问题.

最近在研究AOP这个开发编程的概念，axios开发说明里边提到的栏截器(axios.Interceptors)应该是这种机制，降低代码耦合度，提高程序的可重用性，同时提高了开发的效率。

带坑的解决方案一
我的经验有限，觉得唯一能做的，就是axios请求超时之后做一个重新请求。通过研究 axios的使用说明，给它设置一个timeout = 6000

axios.defaults.timeout = 6000;
然后加一个栏截器.

复制代码
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});

这个栏截器作用是如果在请求超时之后，栏截器可以捕抓到信息，然后再进行下一步操作，也就是我想要用重新请求。

这里是相关的页面数据请求。

this.$axios.get(url, {params:{load:‘noload’}}).then(function (response) {
//dosomething();
}).catch(error => {
//超时之后在这里捕抓错误信息.
if (error.response) {
console.log(‘error.response’)
console.log(error.response);
} else if (error.request) {
console.log(error.request)
console.log(‘error.request’)
if(error.request.readyState == 4 && error.request.status == 0){
//我在这里重新请求
}
} else {
console.log(‘Error’, error.message);
}
console.log(error.config);
});

超时之后, 报出 Uncaught (in promise) Error: timeout of xxx ms exceeded的错误。

在 catch那里，它返回的是error.request错误，所以就在这里做 retry的功能, 经过测试是可以实现重新请求的功功能，虽然能够实现超时重新请求的功能，但很麻烦，需要每一个请API的页面里边要设置重新请求。

如果项目有几十个.vue 文件，如果每个页面都要去设置超时重新请求的功能，那我要疯掉的.

而且这个机制还有一个严重的bug，就是被请求的链接失效或其他原因造成无法正常访问的时候，这个机制失效了，它不会等待我设定的6秒，而且一直在刷，一秒种请求几十次，很容易就把服务器搞垮了，请看下图, 一眨眼的功能，它就请求了146次。

带坑的解决方案二
研究了axios的源代码，超时后, 会在拦截器那里 axios.interceptors.response 捕抓到错误信息, 且 error.code = “ECONNABORTED”，具体链接

https://github.com/axios/axios/blob/26b06391f831ef98606ec0ed406d2be1742e9850/lib/adapters/xhr.js#L95-L101

// Handle timeout
request.ontimeout = function handleTimeout() {reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED',request));// Clean up requestrequest = null;
};

所以，我的全局超时重新获取的解决方案这样的。

axios.interceptors.response.use(function(response){
…
}, function(error){
var originalRequest = error.config;
if(error.code == ‘ECONNABORTED’ && error.message.indexOf(‘timeout’)!=-1 && !originalRequest._retry){
originalRequest._retry = true
return axios.request(originalRequest);
}
});

这个方法，也可以实现得新请求，但有两个问题，1是它只重新请求1次，如果再超时的话，它就停止了，不会再请求。第2个问题是，我在每个有数据请求的页面那里，做了许多操作，比如 this.$axios.get(url).then之后操作。

完美的解决方法
以AOP编程方式，我需要的是一个超时重新请求的全局功能，要在axios.Interceptors下功夫，在github的axios的issue找了别人的一些解决方法，终于找到了一个完美解决方案，就是下面这个。

https://github.com/axios/axios/issues/164#issuecomment-327837467

//在main.js设置全局的请求次数，请求的间隙
axios.defaults.retry = 4;
axios.defaults.retryDelay = 1000;

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
var config = err.config;
// If config does not exist or the retry option is not set, reject
if(!config || !config.retry) return Promise.reject(err);

// Set the variable for keeping track of the retry count
config.__retryCount = config.__retryCount || 0;// Check if we've maxed out the total number of retries
if(config.__retryCount >= config.retry) {// Reject with the errorreturn Promise.reject(err);
}// Increase the retry count
config.__retryCount += 1;// Create new promise to handle exponential backoff
var backoff = new Promise(function(resolve) {setTimeout(function() {resolve();}, config.retryDelay || 1);
});// Return the promise in which recalls axios to retry the request
return backoff.then(function() {return axios(config);
});

});

参考：https://juejin.im/post/5abe0f94518825558a06bcd9

Provisional headers are shown axios 超时处理相关推荐

chrome 发送请求出现：Provisional headers are shown 提示
一般来说,如果看到provisional headers are shown这个提示,说明这个请求并没有发送出去. 具体原因有多种总结如下: 1.请求被某些扩展如 Adblock 拦截了,请求被浏览器 ...
谷歌 Provisional headers are shown 和360急速模式网络连接错误
目前项目中遇到了几次Provisional headers are shown的问题: 一次是在vue项目中, ,显示200正常,返回值在浏览器也可见,但是在axios中获取时,浏览器报错,无法获取返 ...
Provisional headers are shown解决方法
项目发布后,跨域接口出现报错:Provisional headers are shown,网上查询了很多资料和解决方案都行不通,包括,修改ng配置(增加跨域限制等配置).最后联想到前端(vue,axi ...
Provisional headers are shown 的可能原因和解决
问题:Provisional headers are shown 可能原因: 1.比如网络延迟,server端逻辑错误,最大的可能性server端操作消耗太多时间,导致client端长时间未收到响应. ...
微信小程序上传图片时provisional headers are shown显示我的错误解决方案
按微信官方图片示例上传图片的时候,出现了 provisional headers are shown的错误信息,同时查看返回的信息Connection:close为关闭状态,这就坑得了.找了好久没找到 ...
Provisional headers are shown in Chrome network tab
Created by Wang, Jerry on Oct 15, 2015 细心的同学应该留意到,新版开发者工具的 Network 面板中,某些请求头后面会跟着下面这行文字: 截图是访问 http: ...
微信小程序开发 Request Headers: Provisional headers are shown
在微信小程序开发的时候,写了两个API请求: 请求A: //请求Awx.request({url: 'https://wx.baidu.com/api/wx/getBallByDate',method ...
IIS 部署asp.net Provisional headers are shown 在VS2005返回值，部署不返回值
IIS 部署asp.net Provisional headers are shown 在VS2005调试返回值,部署到IIS不返回值首先当时为了跨域的问题,在上面后来把跨域的内容放在IIS去解决 ...
解决浏览器 Provisional headers are shown 无法向后台发送请求问题
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 我的情况和下面情况一样,有一个断点. 今天调试项目BUG,页面的一个按钮点击后页面无反应,去后台找对 ...
Provisional headers are shown问题
出现的问题有一种情况是所有的网页刷新不出来,正常连接了internet网页也无法刷新出来, 还有一种情况是,百度网页可以刷新出来,google网页刷新不出来, 去chrome控制台network显示 ...

Provisional headers are shown axios 超时处理

Provisional headers are shown axios 超时处理相关推荐

最新文章

热门文章