axios，简单高效的请求取消方法

Android

2022-11-15 05:46:16

并发请求管理：使用 Axios 取消请求

在复杂的 Web 应用程序中，管理并发请求至关重要。有时，您需要取消某些请求，例如当用户在加载页面之前导航到另一个页面时。使用流行的 Axios 库，您可以轻松地实现这一点。

什么是取消请求？

取消请求是指在请求已发出但尚未收到响应时，主动终止请求的过程。这在以下情况下非常有用：

用户取消了操作（例如，单击“返回”按钮）。
页面导航到另一个页面，而正在进行的请求不再需要。
为了提高效率，您希望终止长时间运行的请求。

使用 Axios 取消请求

Axios 提供了一个简洁的 API，用于取消请求。以下是分步指南：

创建 Axios 实例：

const instance = axios.create({
  baseURL: 'https://example.com',
  timeout: 10000,
});

使用实例发出请求：

const response = await instance.get('/users');

取消请求：

instance.cancel();

取消操作将抛出一个 AxiosError 异常。您可以使用 try...catch 块来捕获异常，并采取相应措施：

try {
  const response = await instance.get('/users');
} catch (error) {
  if (error.isAxiosError && error.code === 'ECONNABORTED') {
    // 请求已被取消
  } else {
    // 其他错误
  }
}

为每个请求指定取消令牌：
Axios 还允许您为每个请求单独指定取消令牌。这提供了更精细的控制：

const source = axios.CancelToken.source();

const response = await instance.get('/users', {
  cancelToken: source.token,
});

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

代码示例

以下代码示例演示了如何在 React 应用程序中使用 Axios 取消请求：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://example.com',
  timeout: 10000,
});

const App = () => {
  const [response, setResponse] = useState(null);

  const cancelRequest = () => {
    if (instance.isCancel(error)) {
      console.log('Request canceled');
    } else {
      // 处理其他错误
    }
  };

  useEffect(() => {
    const source = axios.CancelToken.source();

    instance.get('/users', {
      cancelToken: source.token,
    })
    .then((res) => {
      setResponse(res.data);
    })
    .catch(cancelRequest);

    return () => {
      source.cancel('Request canceled');
    };
  }, []);

  return (
    <div>
      {response && <p>{response.name}</p>}
    </div>
  );
};