简单易懂，Axios 如何取消请求的两种方法，Axios 如何取消请求的两种方法的详解

摘要：Axios是一种流行的HTTP客户端库，用于发起请求和处理响应。要取消Axios请求，可以使用两种常见方法。可以使用取消令牌（CancelToken）来取消请求。通过创建一个CancelToken实例并在请求中传递该令牌，可以随后使用令牌的取消方法来中止请求。对于基于Promise的请求，可以使用Promise的API来取消请求，通过调用Promise的reject方法并传递一个适当的错误消息来取消请求。这些方法提供了灵活的机制来管理Axios请求并能够在必要时取消它们。

前端开发中网络请求的取消操作

在网络请求频繁的前端开发中，有时我们需要在发送请求后取消它，特别是在用户快速切换页面或执行其他操作时，本文将向你介绍如何使用 Axios 取消这些请求。

基本概念

在 Axios 中，取消请求的核心思路是创建一个“取消令牌”（cancel token），并将其与特定请求关联，当需要取消请求时，使用这个令牌通知 Axios 停止发送该请求。

取消请求的写法

使用 Cancel Token

Axios 提供了CancelToken 类来创建取消令牌，这个令牌是一个包含cancel 方法的对象，以下是取消请求的步骤：

你需要引入相关的库和模块：

import axios from 'axios';

创建取消令牌：

const source = axios.CancelToken.source();

发送请求并关联取消令牌：

axios.get('/api/data', {
  cancelToken: source.token
}).then(response => {
  // 处理响应数据
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消', error.message);
  } else {
    // 处理其他错误情况
  }
});

当需要取消请求时，调用cancel 方法：

source.cancel('请求取消的原因');

2. 使用请求配置直接提供 cancelToken 属性

除了使用 CancelToken 类创建令牌外，你也可以直接在请求配置中提供cancelToken 属性来关联取消令牌，这种方式与使用 CancelToken 类相似，需要注意的是，一旦使用了取消令牌，就需要重新创建新的令牌来关联新的请求，否则，旧的令牌无法用于新的请求，确保在组件卸载时取消所有未完成的请求以避免内存泄漏问题，取消令牌只能用于尚未完成的请求，无法取消已经完成的请求，因此在实际应用中要注意区分不同的情况，三、实践案例假设我们要在 React 中发送一个数据请求，用户在请求发出后点击了“取消”按钮，首先创建一个可取消的 Axios 实例用于发送请求：``javascriptimport React, { useState } from 'react';import axios from 'axios';function App() {const [data, setData] = useState('');const [request, setRequest] = useState(null);const fetchData = async () => {const source = axios.CancelToken.source();setRequest(source);try {const response = await axios.get('/api/data', {cancelToken: source.token});setData(response.data);} catch (error) {if (axios.isCancel(error)) {console.log('请求被取消', error.message);} else {console.log('请求出错', error.message;}}}};const cancelRequest = () => {if (request) {request.cancel('手动取消请求');}};return (发送请求按钮{data}取消请求按钮);}export default App;`在这个例子中，我们创建了一个可取消的 Axios 请求实例，并在用户点击“取消”按钮时调用cancelRequest` 函数来取消请求，四、提示与注意事项确保在组件卸载时取消所有未完成的请求以避免内存泄漏问题，一旦使用了某个取消令牌后需要重新创建新的令牌来关联新的请求，五、总结通过使用 Axios 提供的取消令牌功能，我们可以方便地随时取消网络请求，避免不必要的流量和资源浪费，这为前端开发中处理用户操作中断提供了便利，六、知识扩展Axios 的响应拦截器是如何使用的？响应拦截器的用法和实践案例可以参考 Axios 的官方文档或其他相关教程进行深入学习，参考链接：Axios 官方文档：Getting Started | Axios DocsReact 官方文档：Using the State Hook – React希望这些修改和优化能让文章更加清晰易懂。