前端请求超时截断,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请求未被截断

<think>好的,用户想了解如何在前端使用Axios实现请求拦截器的教程、示例和用法。首先,我需要整理一下Axios的基本概念和拦截器的作用。Axios是一个基于Promise的HTTP客户端,广泛用于前端项目中。请求拦截器可以在发送请求之前对配置进行处理,比如添加统一的请求头、身份验证Token或者修改请求参数。 接下来,我需要参考用户提供的引用内容。引用[2]提到使用请求拦截器统一携带Token,并简要说明了拦截器的用途。引用[3]详细说明了请求拦截器和响应拦截器的定义和作用,可以从中提取关键步骤。引用[4]则提到Vue中推荐使用Axios,所以可能需要考虑在Vue项目中的配置方式。 然后,我需要确定回答的结构。根据用户的要求,回答需要结构清晰,逐步解决问题。可能需要分步骤讲解,包括安装Axios、创建实例、添加拦截器、示例代码以及处理错误等。同时,要确保所有数学表达式和代码块格式正确,但根据用户问题,这里可能主要涉及代码示例,所以需要特别注意代码的格式和注释。 用户可能需要具体的示例代码,所以应该提供完整的代码片段,比如如何创建Axios实例,如何使用拦截器添加Token,如何处理错误等。同时,要提到最佳实践,比如在Vue中的使用,以及如何结合响应拦截器统一处理错误。 还需要注意引用标识的正确添加。比如在提到添加请求头时,引用[1]中的步骤可能相关,但根据用户提供的引用内容,引用[2]、[3]、[4]更直接相关,所以需要正确标注。 最后,生成相关问题,可能涉及拦截器的其他应用场景、错误处理、与响应拦截器的配合使用,以及如何测试拦截器是否生效。这些问题需要与用户的问题紧密相关,并且能够引导进一步学习。</think>### Axios请求拦截器实现教程 #### 一、Axios拦截器核心原理 Axios拦截器通过Promise链式调用机制,在请求发出前和响应接收后插入处理逻辑。请求拦截器接收`config`对象,可修改请求参数、添加公共头信息或Token认证[^2][^3]。 #### 二、具体实现步骤 1. **安装Axios** ```bash npm install axios ``` 2. **创建Axios实例** ```javascript // src/utils/request.js import axios from 'axios' const service = axios.create({ baseURL: 'https://api.example.com', timeout: 5000 }) ``` 3. **添加请求拦截器** ```javascript service.interceptors.request.use( config => { // 注入Token(示例) const token = localStorage.getItem('ACCESS_TOKEN') if (token) { config.headers.Authorization = `Bearer ${token}` } // 统一添加时间戳 config.params = { ...config.params, _t: Date.now() } return config }, error => { return Promise.reject(error) } ) ``` 4. **响应拦截器配合使用** ```javascript service.interceptors.response.use( response => { // 统一处理响应数据 return response.data }, error => { // 处理401未授权错误 if (error.response.status === 401) { router.push('/login') } return Promise.reject(error) } ) ``` 5. **导出实例** ```javascript export default service ``` #### 三、实际使用示例 ```javascript import request from '@/utils/request' // 发送带拦截器的请求 request.get('/user/info') .then(data => console.log(data)) .catch(err => console.error('请求失败:', err)) ``` #### 四、最佳实践建议 1. **环境区分**:通过`process.env.NODE_ENV`动态设置baseURL 2. **安全处理**:在拦截器中过滤敏感参数 3. **性能优化**:添加请求取消功能 4. **类型提示**:为拦截器添加TypeScript类型定义
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值