前端 - axios设置超时时间不生效是什么原因？

Question

设置超时时间是50毫秒，接口还能正常请求，超时时间不生效

axios({        method: 'get',        url: '',        params: {},        timeout: 50      }).then(res => {        console.log('res---', res)      }).catch(error => {        if (error.config.timeout == 50) {          Message.error('请求超时，请检查网络')        } else {          console.log(error)        }      })

全局设置axios.defaults.timeout = 50 也不生效

Answer 1

if (error.config.timeout == 50)
改为

if (error.code === 'ECONNABORTED' || error.message.includes('timeout'))

Answer 2

if (error.config.timeout == 50) {
Message.error('请求超时，请检查网络')
} else {
console.log(error)
}

这一部分写法有问题，error.config.timeout就等于你设置的timeout，所以catch里会一直进入if,提示请求超时，请检查网络。另外建议timeout写成60*1000的形式，这就是60s。

Answer 3

你可以尝试一下把timeout这样写

const service = axios.create({     ......,相关配置    // 超时时间 单位是ms，这里设置了3s的超时时间    timeout: 3 * 1000})

Answer 4

这个问题可能是由于多种原因造成的。以下是一些可能的原因和解决方案：

1. 超时时间单位不正确：确保你在设置超时时间时使用的单位是正确的。在JavaScript中，超时时间通常以毫秒为单位。所以，如果你设置了50毫秒的超时时间，实际上这个超时时间是非常短的，可能会导致设置无效。尝试将超时时间设置为一个更大的值，比如5000毫秒（5秒）。
2. 使用了代理或拦截器：如果你在项目中使用了代理或拦截器，可能会影响axios的超时设置。检查你的代理或拦截器配置，确保它们不会影响axios的请求。
3. 服务器响应时间过长：如果服务器响应时间超过了你在axios中设置的超时时间，那么axios将不会触发超时错误。你可以尝试在服务器端优化代码，以减少响应时间。
4. axios版本问题：检查你使用的axios版本，确保它是最新版本。旧版本的axios可能存在一些已知的bug，这些bug可能已经在新版本中得到修复。你可以通过以下命令更新axios：

npm install axios@latest

或者

yarn add axios@latest

5. 其他网络问题：检查你的网络连接，确保网络连接稳定，并且没有被防火墙或其他安全软件阻止。
6. 检查是否正确使用了超时设置：在axios请求中设置超时时间的正确方式是使用timeout属性，而不是timeoutInMs。你的代码示例中已经正确使用了timeout属性，所以应该没有问题。但是如果你在其他地方使用了timeoutInMs，可能会导致设置无效。

如果以上方法都不能解决问题，你可以尝试使用其他HTTP库（如fetch API或http模块）来测试你的请求，看看是否仍然存在超时设置不生效的问题。这可以帮助你确定问题是否与axios库本身有关，还是与你的项目配置有关。