从「以防万一」到「随机应对」，从此拒绝无效Axios请求

前端

2024-01-18 15:08:27

前因后果：标签切换，数据错乱

在做 Vue 项目时，我遇到了一个头疼的问题：在不同标签之间频繁切换时，数据会显示错乱。这是因为不同标签的请求返回所需的时间不同，当点击某个标签时，响应时间最慢的数据会覆盖之前响应的数据，导致显示的数据与所点击的标签不对应。

为了解决这个问题，我必须确保在点击下一个标签之前，必须等到前一个标签的结果返回。这样才能保证数据的一致性。

柳暗花明：Axios CancelToken，优雅解决

苦思冥想之后，我终于找到了一个优雅的解决方案：Axios CancelToken。

Axios CancelToken 允许你在请求发出后取消它。这可以用来防止在标签切换时发送不必要的请求。

使用 Axios CancelToken 的步骤如下：

创建一个 CancelToken 实例。
将 CancelToken 实例作为参数传递给 Axios 请求。
当你需要取消请求时，调用 CancelToken 实例的 cancel() 方法。

代码示例：告别无效请求

为了帮助你更好地理解如何使用 Axios CancelToken，我提供了一个示例代码：

// 创建一个 CancelToken 实例
const cancelToken = axios.CancelToken.source();

// 将 CancelToken 实例作为参数传递给 Axios 请求
axios.get('/api/data', {
  cancelToken: cancelToken.token
}).then(response => {
  // 请求成功时的处理逻辑
}).catch(error => {
  // 请求失败时的处理逻辑
});

// 取消请求
cancelToken.cancel('Operation canceled by the user.');

在上面的示例代码中，我们首先创建了一个 CancelToken 实例。然后，我们将 CancelToken 实例作为参数传递给 Axios 请求。最后，我们调用 CancelToken 实例的 cancel() 方法来取消请求。