从源头出发，扼杀重复请求：深入剖析 Axios 拦截器之取消请求策略

2023-10-15 04:51:36

在软件开发过程中，我们常常会遇到需要主动取消接口请求的场景。当用户在短时间内发起多次请求时，如果这些请求是重复的，那么我们就有必要取消其中一些请求，以避免不必要的网络开销和服务器压力。Axios，作为一款备受欢迎的前端 HTTP 库，提供了 CancelToken 功能，能够帮助我们轻松实现主动取消请求。本文将深入剖析 Axios 拦截器之取消请求策略，探讨其在项目中的应用以及对性能的优化。

重复请求的危害

在了解 Axios 拦截器之取消请求策略之前，我们首先要明白重复请求的危害。重复请求不仅会浪费网络带宽和服务器资源，还会降低应用程序的性能。举个简单的例子，当用户在搜索框中输入关键词并按下回车键时，浏览器会向服务器发起请求，获取搜索结果。如果用户在等待搜索结果的过程中改变了主意，并再次按下回车键，那么浏览器就会发起一个新的请求。这个新的请求就是重复请求，因为它与前一个请求完全相同。重复请求不仅会增加服务器的负担，还会导致用户体验不佳。

Axios 拦截器之取消请求策略

Axios 提供了 CancelToken 功能，我们可以利用这个功能来实现主动取消请求。CancelToken 的本质是一个令牌，它包含一个 cancel() 方法。当我们调用 cancel() 方法时，与该令牌关联的所有请求都会被取消。

为了在 Axios 中使用 CancelToken，我们需要创建一个令牌，然后将其传递给请求配置对象。当我们需要取消请求时，我们只需调用令牌的 cancel() 方法即可。

const axios = require('axios');

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

axios({
  method: 'get',
  url: 'https://example.com',
  cancelToken: source.token,
})
.then((response) => {
  console.log(response.data);
})
.catch((error) => {
  if (axios.isCancel(error)) {
    console.log('Request canceled');
  } else {
    console.log('Request failed: ', error.message);
  }
});

source.cancel('Operation canceled by the user.');

在上面的代码中，我们首先创建了一个取消令牌 source，然后将该令牌传递给了请求配置对象。当我们需要取消请求时，我们调用 source.cancel() 方法，并传递了一个取消原因。当请求被取消时，axios.isCancel(error) 会返回 true，我们就可以知道请求是被主动取消的，而不是因为网络错误或其他原因导致的失败。

应用场景

Axios 拦截器之取消请求策略在项目中有着广泛的应用场景，其中包括：

远程搜索接口频繁请求 ：远程搜索接口通常会返回大量的搜索结果，当用户在短时间内发起多次搜索请求时，我们可以主动取消其中一些请求，以避免不必要的网络开销和服务器压力。
表单提交 ：当用户在表单中输入数据并点击提交按钮时，浏览器会向服务器发起请求，提交表单数据。如果用户在等待提交结果的过程中改变了主意，并再次点击提交按钮，那么浏览器就会发起一个新的请求。这个新的请求就是重复请求，因为它与前一个请求完全相同。我们可以利用 Axios 拦截器之取消请求策略来取消这个重复请求。
轮询：轮询是一种定时向服务器发起请求以获取最新数据的方式。当我们不再需要轮询数据时，我们可以主动取消轮询请求，以避免不必要的网络开销和服务器压力。