详解Axios 如何取消已发送的请求

前言 最近在项目中遇到一个问题，在连续发送同一请求时，如果第二次请求比第一次请求快，那么实际显示的是第一次请求的数据，这就会造成数据和我选择的内容不一致的问题。解决的方案：在后续发送请求时，判断之前的请求是否完成（同一个接口），如果未完成则立即取消。然后在发送新的请求。 Axios 介绍 Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Axios 使用 cancel token 取消请求 Axios的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。 可以使用 CancelT 在开发过程中，我们经常需要与服务器进行数据交互， Axios 是一个非常流行的 JavaScript 库，用于在浏览器和 Node.js 环境中发起 HTTP 请求。它基于 Promise，提供了丰富的功能，如拦截请求和响应、自动转换请求和响应数据、取消请求等。在某些场景下，比如用户快速连续操作触发多次相同请求时，我们可能需要取消还在进行中的请求，以避免出现旧数据覆盖新数据的问题。本文将详细介绍如何使用 Axios 的 Cancel Token API 来实现这一功能。 Axios 的 Cancel Token API 是基于 cancellable promises 提案设计的，该提案目前还在发展阶段。要创建一个 Cancel Token，我们可以使用 `axios.CancelToken.source` 工厂方法。例如： ```javascript var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); // 取消请求 source.cancel('Operation canceled by the user.'); ``` 在这个例子中，`source.token` 被用作请求的 `cancelToken`，当需要取消请求时，调用 `source.cancel()` 并传入可选的取消原因。 另一种创建 Cancel Token 的方式是通过提供一个 executor 函数到 `CancelToken` 构造函数： ```javascript var CancelToken = axios.CancelToken; var cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }); // 取消请求 cancel(); ``` 在实际项目中，通常会将 API 请求进行封装，以便更好地管理和控制。下面是一个例子，展示了如何在封装的 API 函数中使用 Cancel Token： ```javascript // 封装的 API 函数 import request from '../utils/request'; // 配置过的 Axios 对象 import axios from 'axios'; export function getLatenessDetailSize(params, that) { return request({ url: '/api/v1/behaviour/latenessDetailSize', method: 'post', params: params, cancelToken: new axios.CancelToken(function executor(c) { // 设置 cancel token that.source = c; }) }); } // 具体的业务组件 import { getLatenessDetail } from "../api"; export default { data() { return { tableData: [], total: 0, page: 1, loadTable: false, params: {}, source: null }; }, methods: { cancelQuest() { if (typeof this.source === 'function') { this.source('终止请求'); // 取消请求 } }, getTableData(val) { this.cancelQuest(); // 请求发送前调用 this.page = val; this.loadTable = true; getLatenessDetail(this.params, (val - 1) * 10, this).then(res => { this.loadTable = false; this.tableData = res.data; }); } } }; ``` 在这个组件中，`cancelQuest` 方法用于取消请求，`getTableData` 方法在每次请求之前都会先调用 `cancelQuest`，确保上一次的请求被取消。`source` 被保存在组件的状态中，以便在需要时调用 `source.cancel()`。 通过以上方法，我们可以有效地管理 Axios 请求，确保在用户快速操作时只处理最新的请求，从而避免数据不一致的问题。在实际开发中，这样的优化对于提升用户体验和保证数据准确性至关重要。