在前端开发中，网络请求是超级常见的操作。而有时候，我们可能需要在发送请求后撤销它，列如用户在请求还未完成时离开了当前页面或者执行了其他操作，本文将介绍如何在使用 Axios 发送请求时撤销这些请求。

• 什么是 axios?如何使用 axios?一文快速入门

基本概念

在 Axios 中，撤销请求的基本思路是创建一个用于撤销的标记（cancel token），并将其与特定请求关联。当需要撤销请求时，我们可以使用这个标记通知 Axios 撤销发送该请求。

撤销请求的写法

1. 使用 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 {    console.log('请求出错', error.message);
  }
});// 撤销请求source.cancel('请求撤销的缘由');

2. 使用请求配置

除了使用 CancelToken，你也可以在请求配置中直接提供 cancelToken 属性来关联撤销标记：

const source = axios.CancelToken.source();

axios.get('/api/data', {  cancelToken: source.token
}).then(response => {  // 请求成功处理}).catch(error => {  // 错误处理});// 在需要的时候撤销请求source.cancel('请求撤销的缘由');

实践案例

假设我们要在 React 中发送一个数据请求，用户在请求发出后点击了“撤销”按钮。第一，我们需要创建一个可撤销的 Axios 实例，并将其用于发送请求。

import 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 (    <div>      <button onClick={fetchData}>发送请求</button>      <button onClick={cancelRequest}>撤销请求</button>      <div>{data}</div>    </div>
  );
}export default App;

提示与注意事项

• 确保在组件卸载时撤销请求，以免造成内存泄漏。

• 撤销标记只能撤销尚未完成的请求，无法撤销已经完成的请求。

• 撤销标记只能在特定的请求上使用一次，一旦使用过，就需要重新创建。

使用 Apifox 来 Mock 数据

Apifox 是一个比 Postman 更强劲的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。

• 一个 HTTP 请求需要具备的 5 个要点

• WebSocket 是什么？你需要知道的一切

更为重大的是，Apifox 能够 Mock 数据，其集成了 Mock.js 库，允许你自定义规则，并且可以编写脚本，强劲的 Mock 功能可以让前端开发人员不再苦苦等待后端提供接口，自己就能提前造各种各样的数据出来，可视化操作让你点点鼠标就能生成可观的人性化数据。

总结

通过使用 Axios 提供的撤销标记，我们可以在发送请求后随时撤销请求，以避免不必要的网络流量和资源浪费。这为我们在前端开发中处理用户操作的中断提供了便利。

知识扩展：

• Axios 的响应拦截器如何使用？响应拦截器的用法以及实践案例

参考链接：

• Axios 官方文档：https://axios-http.com/docs/intro

• React 官方文档：https://reactjs.org/docs/hooks-state.html