axios 的超时设置

原创

mob649e816594b7 2023-07-27 00:56:24 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e816594b7的原创作品，请联系作者获取转载授权，否则将追究法律责任

axios 的超时设置

简介

在进行网络请求时，我们经常遇到需要等待服务器响应的情况。然而，有时服务器响应时间过长，这会导致用户体验下降并可能引发其他问题。为了解决这个问题，axios 提供了超时设置，允许我们在一定时间内等待服务器响应，如果超过设定的时间仍未收到响应，就会取消请求。

axios 是什么？

axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它具有简洁、易用、功能强大等特点，是许多开发者首选的网络请求工具。

超时设置

超时设置是通过 timeout 参数来实现的，它指定了等待服务器响应的最长时间（以毫秒为单位）。当超过这个时间后，axios 将自动取消请求。以下是一个示例：

axios.get('/api/data', {
  timeout: 5000 // 设置超时时间为 5 秒
})
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

在上面的代码中，我们通过在请求配置中设置 timeout: 5000 来指定超时时间为 5 秒。如果服务器在 5 秒内未返回响应，axios 将会取消请求，并触发 catch 方法中的错误处理逻辑。

超时处理

超时后的处理方式可以通过 axios.Cancel 类来自定义。我们可以在请求配置中设置 timeout 参数，并在 catch 方法中判断错误类型来执行相应的处理。以下是一个示例：

axios.get('/api/data', {
  timeout: 5000 // 设置超时时间为 5 秒
})
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求已取消:', error.message);
    } else {
      console.log('请求超时:', error.message);
    }
  });

在上面的代码中，我们使用 axios.isCancel() 方法来判断错误类型。如果错误类型为 axios.Cancel，则表示请求已被取消；否则，表示超时。

超时策略

除了全局设定超时时间外，axios 还提供了更细粒度的超时策略。我们可以在请求配置中设置 timeout 参数，也可以在拦截器中动态配置超时时间。以下是一个示例：

// 创建 axios 实例
const instance = axios.create();

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在请求发送之前，动态设置超时时间
  config.timeout = 5000; // 设置超时时间为 5 秒
  return config;
}, error => {
  return Promise.reject(error);
});

// 发送请求
instance.get('/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    console.log('请求超时:', error.message);
  });

在上面的代码中，我们通过创建 axios 实例和添加请求拦截器的方式来动态设置超时时间。在请求发送之前，拦截器会将 timeout 参数设置为 5 秒，然后发送请求。如果超过 5 秒未收到响应，将触发 catch 方法中的错误处理逻辑。