轻松搞定axios的全局错误处理与请求取消

2023-08-13 16:48:52

深入理解 Axios 全局错误处理和请求取消

引言

在现代网络开发中，处理错误和管理请求变得至关重要。Axios 是一个流行的 JavaScript 库，用于处理 HTTP 请求，它提供了强大的功能来处理这些任务。本文将深入探讨如何利用 Axios 的全局错误处理和请求取消机制来增强你的 Web 应用程序。

一、全局错误处理

1.1 使用拦截器实现

Axios 拦截器提供了拦截所有请求和响应的机制。你可以使用拦截器来处理请求的错误，无论这些错误是由于网络问题、服务器响应还是其他原因造成的。要实现全局错误处理，你可以创建一个响应拦截器，如下所示：

axios.interceptors.response.use(
  (response) => {
    // 正常响应，返回结果
    return response;
  },
  (error) => {
    // 错误处理逻辑
    if (error.response) {
      // 服务器响应错误
    } else if (error.request) {
      // 请求错误
    } else {
      // 其他错误
    }
    return Promise.reject(error);
  }
);

1.2 捕获所有错误

通过使用全局错误处理，你可以轻松捕获所有请求的错误，包括网络错误、服务器错误、超时错误等。这可以让你根据需要做出响应，例如显示错误消息、重试请求或记录错误。

二、请求取消

2.1 使用 cancelToken 取消请求

Axios 提供了 cancelToken，它允许你取消请求。这在某些情况下非常有用，例如当用户导航离开页面或你不再需要响应时。要取消请求，你可以创建并传递一个 cancelToken，如下所示：

const cancelToken = axios.CancelToken.source();

// 将 cancelToken 传递给请求
axios.get('https://example.com', {
  cancelToken: cancelToken.token
});

// 取消请求
cancelToken.cancel('操作已取消');

2.2 处理取消的请求

当请求被取消时，Axios 会抛出一个错误。你可以使用 try/catch 来捕获此错误并做出相应的处理，如下所示：

try {
  await axios.get('https://example.com', {
    cancelToken: cancelToken.token
  });
} catch (error) {
  if (axios.isCancel(error)) {
    // 请求已取消
  } else {
    // 其他错误
  }
}