网络请求管理中的axios请求手动取消与超时处理

2024-02-05 02:27:58

正文

在前端开发中，我们经常需要使用axios库来发送HTTP请求，获取或提交数据。在某些情况下，我们需要在请求发出后手动取消它，或者处理请求超时的情况。本文将详细介绍如何实现这些功能，以及相关的最佳实践建议。

一、手动取消axios请求

在某些情况下，我们可能需要在请求发出后手动取消它。例如，当用户在提交表单之前改变了主意，或者我们在页面上执行了其他操作，导致请求不再需要。这时，我们可以使用axios提供的cancelToken来取消请求。

// 创建一个取消令牌
const cancelToken = axios.CancelToken.source();

// 使用取消令牌发送请求
axios.get('https://example.com/api/v1/users', {
  cancelToken: cancelToken.token
})
  .then(response => {
    // 请求成功
  })
  .catch(error => {
    // 请求失败
    if (axios.isCancel(error)) {
      // 请求被取消
    }
  });

// 取消请求
cancelToken.cancel();

当我们调用cancelToken.cancel()方法时，请求就会被取消。如果请求已经发出，并且正在进行中，那么它会立即被中止。如果请求尚未发出，那么它根本不会被发送。

二、处理axios请求超时

在某些情况下，请求可能会超时。例如，当网络连接不稳定，或者服务器响应速度较慢时，就可能发生这种情况。为了处理请求超时，我们可以使用axios提供的timeout配置。

// 设置请求超时时间
axios.defaults.timeout = 10000; // 10秒

// 发送请求
axios.get('https://example.com/api/v1/users')
  .then(response => {
    // 请求成功
  })
  .catch(error => {
    // 请求失败
    if (error.code === 'ECONNABORTED') {
      // 请求超时
    }
  });