解锁Axios配置秘籍：无痛取消重复请求

2023-10-18 12:21:53

取消重复请求：提升用户体验和优化性能的利器

在当今快节奏的网络世界中，用户对快速且无缝的体验有着更高的期望。消除重复请求是提升用户体验和优化性能的关键策略。本文将探讨如何使用流行的 HTTP 客户端库 Axios 来巧妙地取消重复请求，同时兼容现有项目的通用 Axios 方法。

剖析 Axios 取消请求机制

Axios 提供了一个强大的取消机制，允许您在请求发出后手动取消该请求。这通过调用 cancelToken.cancel() 方法实现。例如：

const axios = require('axios');

const source = axios.CancelToken.source();

axios.get('https://example.com', {
  cancelToken: source.token
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('Request canceled');
  }
});

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

当用户触发取消操作或请求变得过时时，cancelToken.cancel() 方法会将取消原因作为参数传递。Axios 会将这个错误识别为 axios.isCancel(error)，从而允许您针对取消情况进行定制处理。

适配现有 Axios 方法

为了将取消重复请求功能无缝集成到现有项目中，我们可以扩展通用 Axios 方法，使其支持取消令牌。

// 封装 Axios 方法，增加取消令牌参数
const axiosWithCancel = (method, url, config = {}) => {
  const source = axios.CancelToken.source();
  config.cancelToken = source.token;

  return axios[method](url, config).catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled');
    }
  }).finally(() => {
    source.cancel('Operation completed');
  });
};

// 调用封装后的方法进行请求
axiosWithCancel('get', 'https://example.com');

此封装方法接受与原始 Axios 方法相同的方法、URL 和配置参数，但在内部它会创建并附加一个取消令牌。这使得我们可以在现有代码中轻松地切换到取消支持的方法。

实战演练：搜索框中的取消重复请求

让我们以搜索框为例，展示如何应用取消重复请求功能：

const input = document.getElementById('search-input');

input.addEventListener('input', (event) => {
  if (timeout) {
    clearTimeout(timeout);
  }

  timeout = setTimeout(() => {
    // 创建取消令牌
    const source = axios.CancelToken.source();

    // 发起请求
    axiosWithCancel('get', `https://example.com/search?q=${event.target.value}`, {
      cancelToken: source.token
    }).then((response) => {
      // 处理响应
    }).catch((error) => {
      if (axios.isCancel(error)) {
        console.log('Request canceled');
      } else {
        // 处理错误
      }
    }).finally(() => {
      source.cancel('Operation completed');
    });
  }, 500);
});