axios请求失败、请求超时重新发送请求

一、 axios重新发送请求基础版（所有的请求错误，不论是请求超时还是接口请求出错都会进行重试）

以下是一个完整的文件，看懂了的话axios重试请求也就基本会了，不会的话直接复制到项目里，也可以直接调用使用。

1. 创建一个axios实例，并在实例中设置请求超时时间timeout、重试请求次数retry、请求间隔retryDelay。

2. 为实例设置相应拦截器，在请求返回错误的时候对错误做处理。

3. 如果请求次数已经达到设置好的请求次数，不再发送请求，返回最终的错误信息；

如果请求次数还没有达到设置好的请求次数，就在停留retryDelay（请求间隔）时间后，再次发起请求

import axios from 'axios';
//创建一个axios实例
const requests = axios.create({timeout: 5 * 1000, //请求超时时间（5秒后还未接收到数据，就需要再次发送请求）retry: 3, //设置全局重试请求次数（最多重试几次请求）retryDelay: 1000, //设置全局请求间隔
});//响应拦截器
requests.interceptors.response.use((res) => {return Promise.resolve(res.data);
}, (error) => {//console.log(error);//超时处理 error.config是一个对象，包含上方create中设置的三个参数var config = error.config;if (!config || !config.retry) return Promise.reject(error);// __retryCount用来记录当前是第几次发送请求config.__retryCount = config.__retryCount || 0;// 如果当前发送的请求大于等于设置好的请求次数时，不再发送请求，返回最终的错误信息if (config.__retryCount >= config.retry) {return Promise.reject(error);}// 记录请求次数+1config.__retryCount += 1;// 设置请求间隔 在发送下一次请求之前停留一段时间，时间为上方设置好的请求间隔时间var backoff = new Promise(function (resolve) {setTimeout(function () {resolve();}, config.retryDelay || 1);});// 再次发送请求return backoff.then(function () {return requests(config);});
})export default requests;

error.config：

请求次数：

可以看到控制台的error输出了4次，但是retry明明设置的是3，怎么会有4次输出呢？这是因为retry设置的是最多重试几次请求，它设置的是重试次数，而第一次输出是第一次发送请求返回输出，后三次才是重试请求的输出。

二、 axios重新发送请求升级版（能够识别出网络错误，但接口报错也会在达到请求次数后才返回）

在 if (config.__retryCount >= config.retry) {} 中增加对网络错误的识别，reject中的内容可以自定义，这里的reject中写了什么，发送异步请求后的错误捕捉catch中的error就是什么。

// 如果当前发送的请求大于等于设置好的请求次数时，不再发送请求，返回最终的错误信息if (config.__retryCount >= config.retry) {if (error.message === "Network Error") {//message为"Network Error"代表断网了return Promise.reject({type: "warning",msg: "网络连接已断开，请检查网络"});} else if (error.message === "timeout of 5000ms exceeded") {//网太慢了，5秒内没有接收到数据，这里的5000ms对应上方timeout设置的值return Promise.reject({type: "warning",msg: "请求超时，请检查网络"});} else {//除以上两种以外的所有错误，包括接口报错 400 500 之类的return Promise.reject({type: "error",msg: "出现错误，请稍后再试"});}}

error.message：

三、 axios重新发送请求高级版（非网络错误不重试请求，直接返回错误信息）

网络连接出错我们可以尝试多次请求，说不定哪一次网络就通了，但是如果是类似于接口的路径写错啦，404、500之类的错误，我们其实不需要多次请求，因为再多少次的请求他们的结果也不会改变。

所以这个时候我们就需要拦截这样的错误，直接返回错误信息，不再重新发送请求。

可以根据error.response.data是否有值来判断接口有没有返回响应，data结果为undefined的时候很明显就是发送了请求但是没接收到结果，可能是网络问题；data有值也就是有返回结果，我们可以根据返回结果来自定义处理内容。

在 if (!config || !config.retry) return Promise.reject(error); 的下方增加判断。

if (!config || !config.retry) return Promise.reject(error);//如果有响应内容，就直接返回错误信息，不再发送请求
if(error.response.data){return Promise.reject({type: "error", msg: error.response.data});
}

接口路径写错后的报错：（举个栗子，404接口找不到的error长这样）

四、总体代码

import axios from 'axios';
//创建一个axios实例
const requests = axios.create({timeout: 5 * 1000, //请求超时时间（5秒后还未接收到数据，就需要再次发送请求）retry: 3, //设置全局重试请求次数（最多重试几次请求）retryDelay: 1000, //设置全局请求间隔
});//响应拦截器
requests.interceptors.response.use((res) => {return Promise.resolve(res.data);
}, (error) => {//console.log(error);//超时处理 error.config是一个对象，包含上方create中设置的三个参数var config = error.config;if (!config || !config.retry) return Promise.reject(error);//如果有响应内容，就直接返回错误信息，不再发送请求if(error.response.data){return Promise.reject({type: "error", msg: error.response.data});}// __retryCount用来记录当前是第几次发送请求config.__retryCount = config.__retryCount || 0;// 如果当前发送的请求大于等于设置好的请求次数时，不再发送请求，返回最终的错误信息if (config.__retryCount >= config.retry) {if (error.message === "Network Error") {//message为"Network Error"代表断网了return Promise.reject({type: "warning",msg: "网络连接已断开，请检查网络"});} else if (error.message === "timeout of 5000ms exceeded") {//网太慢了，5秒内没有接收到数据，这里的5000ms对应上方timeout设置的值return Promise.reject({type: "warning",msg: "请求超时，请检查网络"});} else {//除以上两种以外的所有错误，包括接口报错 400 500 之类的return Promise.reject({type: "error",msg: "出现错误，请稍后再试"});}}// 记录请求次数+1config.__retryCount += 1;// 设置请求间隔 在发送下一次请求之前停留一段时间，时间为上方设置好的请求间隔时间var backoff = new Promise(function (resolve) {setTimeout(function () {resolve();}, config.retryDelay || 1);});// 再次发送请求return backoff.then(function () {return requests(config);});
})export default requests;

axios请求失败、请求超时重新发送请求相关推荐

python requests session post_requests.session()发送请求和使用requests直接发送请求的区别...
requests.session()发送请求和使用requests直接发送请求的区别一.Session 在requests里,session对象是一个非常常用的对象,这个对象代表一次用户会话:从客 ...
tp监控连接云路由服务器失败_TP ID提示发送请求失败怎么办？TP-Link ID发送请求失败现象的原因及解决方案...
有时候在创建.登录.注销TP-LINK ID,或者在找回TP-LINK ID的密码.在线升级.刷新精选应用等与云服务有关操作时,路由器或APP界面可能提示"TP-Link ID发送请求失败, ...
上传文件服务器拒绝你的请求,服务器拒绝了你发送请求 - 卡饭网
qq 服务器拒绝了您发送离线文件请求的解决方法 qq 服务器拒绝了您发送离线文件请求的解决方法 qq服务器拒绝了您发送离线文件的原因?在我们日常工作中,因工作需要会用上qq离线文件接收.发送.而前面小 ...
php 向服务器发放请求,PHP客户端向服务器端发送请求并向远程服务器发送服务器端请求...
我的方案如下: >单击按钮时,客户端将向服务器端发送请求 >一旦服务器端收到请求,它将向远程服务器发送另一个请求以获得结果 >一旦响应到来,服务器端应该回应客户端的响应. 客户 $. ...
php curl发送post请求失败,php 利用curl发送post请求
利用curl发送post请求完成数据,接口的访问,这里面的参数可以修正一下,就可以写成可以支持文件上传的一个post请求,但是我这里不做仔细的写了.等以后有时间了在考虑怎么分解这个方法: /** * ...
android发送微信请求失败,安卓微信浏览器POST请求发不出去。
post请求在微信内置浏览器里发不出去,在PC上.IOS微信内置浏览器.IOS的safari浏览器.安卓默认浏览器都可以成功发出. 测试地址:http://jx-test-agent.yaojiqip ...
python requests请求失败重试_Python Requests.post()请求失败时的retry设置
1. 问题描述通常,我们在做爬虫工作或远程接口调用的过程中,往往由于访问频率过快等原因遇到连接超时的报错问题,利用最近调用api.ai.qq.com某个接口举例如下: Traceback (most ...
ajax请求失败解决办法,Ajax跨越请求失败,解决
跨越请求 1.1什么是跨域(两个不同系统之间的访问.调用) (1)域名不同,即两个不同的应用. (2)域名相同,但是端口不同,即同一个应用中的不同子系统. 1.2 Ajax跨域请求的缺陷 (1)创建t ...
ajax请求失败后重连和promiseIfy
记得在找实习时,被问到一个问题.前端发送请求失败后如何重新发送请求. 以 ajax 为例: let num = 0;function ajaxReconnection() {$.ajax({url: ...

axios请求失败、请求超时重新发送请求

axios请求失败、请求超时重新发送请求相关推荐

最新文章

热门文章