前端请求超时截断axios timeout设置未生效情况解决记录
更新时间：2024年07月05日 09:38:13 作者：bulucc
在项目中遇到了后台接口返回数据慢的时候往往需要设置请求失效时间,在项目中遇到设置timeout失效问题由此记录下来,这篇文章主要给大家介绍了前端请求超时截断axios timeout设置未生效情况解决的相关资料,需要的朋友可以参考下
问题描述
前端请求超时截断，axios timeout设置未生效情况记录
timeout设置方式：
表现（前端超过5min报错500，直接访问接口超过5min能够正常响应）：
问题原因
上面的配置设置时间为1000min，明显配置没有生效
解决方式
1、修改axios的默认配置，这里修改为10min
axios.defaults.timeout = 10 * 60 * 1000;
const res: any = await axios.post(smarturl, req_body, {
headers: {'Content-Type': 'application/json'},
});2、重写axios方法，这里修改为10min
const HTTP_AXIOS = axios.create();
HTTP_AXIOS ({
method: 'post',
url: smarturl,
data: req_body,
timeout: 10 * 60 * 1000,
}).then(reqres => {
if (reqres) {
//请求成功后返回的参数
console.log('res', reqres);
}
}).catch(error => {
if (error.config.timeout == 3000) {
message.error('请求超时，请检查网络')
} else {
console.log('timeout-error', error)
}
})生效效果：
默认配置不再是5min，超过5min请求未被截断
总结
到此这篇关于前端请求超时截断axios timeout设置未生效情况解决的文章就介绍到这了,更多相关axios timeout设置未生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了vue使用websocket概念及示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
弹窗是一个项目必备的复用利器，这篇文章主要介绍了vue弹窗组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
最近做了一个手机端系统，其中遇到了父页面需要携带参数跳转至子页面的问题，现已解决，下面分享一下实现过程，感兴趣的朋友一起看看吧2021-04-04
这篇文章主要为大家详细介绍了vue实现垂直无限滑动日历组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍的是Vue 组件组织结构及组件注册，为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的，文章学详细内容,需要的朋友可以参考一下2021-10-10
这篇文章主要给大家介绍了如何通过一篇文章学会Vue中间件管道的相关资料,什么是中间件管道？中间件管道是一堆不同的中间件并行运行,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue-router的使用方法及含参数的配置方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了使用Vue实现移动端左滑删除效果，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
vite是VUE3创建项目的工具,项目大了之后,性能明显优于webpack,下面这篇文章主要给大家介绍了关于vite构建vue3项目的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vee-validate表单校验的基本使用,需要的朋友可以参考下2018-06-06
最新评论