axios-retry 响应异常

最近项目中遇到 axios 异步请求异常中断, 错误码为 "ECONNABORTED"

奇怪的是排查前端代码并没有发现有主动调用 abort 取消请求的

由于为何网络请求失败的原因找不到, 但是重试请求就是成功的, 所以计划使用 axios-retry 在网络错误时重新请求

javascript 复制代码
import axiosRetry from 'axios-retry'
import axios from 'axios'

const service = axios.create({
	// .... 各种配置项
})

axiosRetry(service, {
	retries: 1,  // 重新请求次数, 这里由于只是为了解决特殊情况下的网络错误, 所以只重试一次即可
	// 重试条件
	retryCondition: error => {
    	return error.code === 'ECONNABORTED' // 仅这个错误下重试请求
	}
})

使用以上方案后, 解决了网络错误下接口失败的问题, 但是发现在重试请求成功后, js 代码里拿到的结果不对

经过排查, 发现 axios-retry 虽然能重新请求, 但是会基于实际请求次数多次调用 interceptors 拦截器的钩子

拦截器代码

javascript 复制代码
service.interceptors.response.use(
	response => {
		return response.data
	},
	error => {
		ElMessage({
			message: error.message,
			type: 'error',
			duration: 3000
		})
	}
)

拦截器钩子第二次执行时返回的实际上是 response.data.data, 这会导致外部调用者拿不到预期结果 但这是 axios 或 axios-retry 内部的问题, 我们无法解决, 所以只能在钩子里做判断, 如果当前请求已经进入过拦截器处理, 就直接退出

拦截器做调整

javascript 复制代码
service.interceptors.response.use(
	response => {
		// 如果之前进入过拦截器钩子, 那么 response 实际上就已经是 response.data, 直接 return
		if(!(response.request instanceof XMLHttpRequest)){
			return response
		}
		return response.data
	},
	// 错误处理加入防抖, 同样的 error 只执行一次回调
	throttleErrorCallback(error => {
		ElMessage({
			message: error.message,
			type: 'error',
			duration: 3000
		})
	})
)

// 错误处理防抖
function throttleErrorCallback(callback){
	const handledErrors = new WeakSet()
	return error => {
		if(handledErrors.has(error) {
			return Promise.reject(error)
		}
		handledErrors.add(error)
		return callback(error)
	}
}

如果有其他解决 axios-retry 带来的拦截器问题的方式, 欢迎交流

相关推荐
独立开阀者_FwtCoder10 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
独立开阀者_FwtCoder13 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder13 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
bug爱好者2 小时前
原生小程序如何实现跨页面传值
前端·javascript
bug爱好者2 小时前
原生微信小程序最实用的工具函数合集
前端·javascript