axios 之超时处理

在工作中,我们基本会遇到请求超时,需要重新发起请求或者进行相应的处理

但是axios之中,并没有超时回调给你,所以这就需要你根据error信息来进行判断
我们开始走流程把:
1、判断超时,网上很多都是一模一样的,完全没有自己的见解,这里我不推荐这种方式,所以,我希望你看了之后,自己去理解使用方法和思维,写出自己的东西。
需要了解报错后的信息后再度 编写文章

思路

1、设置一种状态,若超时,状态设置为true,则一直重新请求
2、设置次数,若超时次数大于设置次数,则不再重新发起请求
方案2 已有成熟方案,百度即可

	axios.defaults.sendSuscced = true  // 初始化报错后的请求状态
	axios.defaults.retryDelay = 10000; // 设置超时时间
	//很多人使用了axios的Interceptors来做处理,这里就来写一下
	//建立响应拦截器
	axios.interceptors.response.use(res => {
		//这里是正常流程走的,我们这里讲解的是超时处理,我就不多说了
	}, error => {
		根据传回来的错误信息`erroe`进行判断
		意为:`error.code`
	 	if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
			console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了,
			你可以在这里加入超时的处理方案')
			`这里我 的方案是,超时后再次请求,所以新建了一个promise`
			var newHttp= new Promise(function (resolve){
				resolve()
			})
			`newHttp实例执行完成后会再次执行`
			// 返回一个promise实例,同时重新发起请求,config请求配置,包扩请求头和请求参数
			return newHttp.then(function (){
				return axios(config)
			})
		}
		// 若不是超时,则返回未错误信息
		return Promise.reject(error)

	})
	
对于axios请求超时处理,可以通过以下几个步骤来实现: 1. 创建一个axios实例,并在实例设置请求超时时间timeout。可以使用axios的defaults属性来设置全局默认值。例如,可以将timeout设置为6000毫秒,即6秒:axios.defaults.timeout = 6000; 2. 当请求超时时,可以通过设置axios的retry属性来进行重新请求。retry属性表示请求失败后的重试次数。例如,可以将retry设置为3次:axios.defaults.retry = 3; 3. 为了避免频繁的重试请求,可以设置一个请求间隔retryDelay。retryDelay表示两次请求之间的时间间隔。例如,可以将retryDelay设置为1000毫秒,即1秒:axios.defaults.retryDelay = 1000; 通过以上步骤,就可以实现axios请求超时处理。当请求超时时,axios会自动进行重新请求,直到达到重试次数或请求成功为止。这样可以提高请求的稳定性和可靠性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [axios请求超时,设置重新请求的完美解决方法](https://blog.youkuaiyun.com/weixin_34228662/article/details/91377463)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue axios请求超时的正确处理方法](https://download.youkuaiyun.com/download/weixin_38709466/12761674)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [axios请求失败、请求超时重新发送请求](https://blog.youkuaiyun.com/weixin_47437528/article/details/128035261)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值