解决axios:”timeout of 5000ms exceeded”超时的问题

下面是解决axios请求超时问题的完整攻略：

问题描述

在使用axios发送请求时，可能会遇到如下提示：Error: timeout of {time}ms exceeded，这个提示表示请求超时了，请求时间超过了设定的时间限制。这个问题的产生可以是路由问题，也可以是服务器响应时间过长，也有可能是代理服务器的问题。

解决方案

方案一：增加超时时间的限制

在axios发送请求时，可以通过配置timeout参数来设置请求超时的时间。一般情况下，我们可以将其设置为10秒或者更长的时间，例如：

axios({
  method: 'get',
  url: 'https://example.com',
  timeout: 10000  // 10秒
}).then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

注意：超时时间的单位是毫秒。

如果请求在指定的时间之内未完成，axios会抛出超时错误。

方案二：检查代理服务器

如果你遇到了这个问题，试试在axios的请求拦截器中设置超时时间：

axios.interceptors.request.use(function (config) {
  config.timeout = 10000; // 10秒
  return config;
}, function (error) {
  return Promise.reject(error);
});

还有可能是代理服务器故障导致的问题，这时我们需要检查代理服务器，或者禁用代理服务器。

方案三：使用try-catch捕获异常

使用try-catch语句可以捕获axios的异常。

try {
  const res = await axios({
    url: 'https://example.com',
    method: 'get'
  })
  console.log(res)
} catch (error) {
  console.log(error)
}

使用try-catch语句可以避免程序崩溃，也方便我们打印出错误信息。

示例说明

以下是两个示例说明：

示例一

在一个Vue项目中，我们需要通过axios向服务器发起一个get请求，但是每次都会提示“timeout of 5000ms exceeded”。这时，我们可以按照上述方案一，则可以通过设置请求超时的时间来解决这个问题。

// 设置timeout为15秒
axios({
  method: 'get',
  url: 'https://example.com',
  timeout: 15000
}).then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

示例二

在一个React项目中，我们需要向服务器获取一份大量数据，但是这个请求的响应时间较长，因此经常收到“timeout of 5000ms exceeded”的错误提示。这时，我们可以按照上述方案二，在axios的请求拦截器中设置超时时间。

axios.interceptors.request.use((config) => {
  config.timeout = 30000; // 设置timeout为30秒
  return config;
}, (error) => {
  return Promise.reject(error);
});

axios.get('https://example.com').then((response) => {
  console.log(response);
}).catch((error) => {
  console.log(error);
})

通过以上示例说明，我们可以很方便地解决axios请求超时的问题。