axios 设置同一个接口多次调用时候取消上一次-CFANZ编程社区

axios设置同一个接口多次调用时取消上一次请求

在前端开发中，我们经常需要与后端进行数据交互。为了实现这一目标，我们通常会使用AJAX技术来发送HTTP请求。其中，axios是一个常用的基于Promise的HTTP客户端，它可以帮助我们更方便地进行HTTP请求的发送和响应的处理。

然而，在实际开发过程中，我们可能会遇到一种情况：当用户连续多次触发同一个接口的请求时，我们希望上一次请求能够被取消，只保留最后一次请求。这样可以有效地减少不必要的网络请求，提高用户体验。

动机

为什么会有这样的需求呢？假设我们正在开发一个搜索功能，当用户输入关键字时，我们希望发送一个搜索请求到后端来获取搜索结果。如果用户在输入框中快速连续输入多次，那么每次都发送搜索请求将会造成不必要的网络开销，并且导致前一个搜索请求的结果被后一个请求的结果所覆盖，这显然是不符合我们的预期的。

为了解决这个问题，我们可以使用axios提供的取消令牌功能来实现我们的目标。

axios取消令牌

axios提供了一个叫做CancelToken的机制，可以用来取消HTTP请求。我们可以为每个请求创建一个取消令牌，然后在发送请求之前，判断上一次请求是否已经发送，如果是，则取消上一次请求，再发送新的请求。

下面是一个使用axios取消令牌的示例代码：

import axios from 'axios';

let cancelToken;
const search = async (keyword) => {
  if (cancelToken) {
    cancelToken.cancel('取消上一次请求');
  }
  cancelToken = axios.CancelToken.source();
  try {
    const response = await axios.get('/api/search', {
      params: {
        keyword,
      },
      cancelToken: cancelToken.token,
    });
    // 处理响应结果
    console.log(response.data);
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log(error.message);
    } else {
      console.log('请求失败', error);
    }
  }
};

// 示例：绑定搜索输入框的输入事件
const input = document.getElementById('search-input');
input.addEventListener('input', (event) => {
  const keyword = event.target.value;
  search(keyword);
});

在上述示例中，我们首先引入了axios库，并定义了一个cancelToken变量来保存取消令牌。然后，我们定义了一个search函数，用于发送搜索请求。在每次调用search函数之前，我们首先判断上一次请求是否已经发送，如果是，则取消上一次请求；然后，创建一个新的取消令牌，并将其传递给axios请求的cancelToken参数中。

在请求成功时，我们可以处理响应结果，例如更新搜索结果的显示；在请求失败时，我们可以根据错误类型进行不同的处理，如果错误类型是axios.Cancel，则说明请求被取消，我们可以忽略该错误。

状态图

下面是一个状态图，展示了使用axios取消令牌的过程：

stateDiagram
  [*] --> 初始化
  初始化 --> 请求中: 发送请求
  请求中 --> 请求成功: 收到响应
  请求中 --> 请求失败: 发生错误
  请求成功 --> [*]
  请求失败 --> [*]
  请求失败 --> 请求失败: 错误类型为axios.Cancel
  请求失败 --> 请求失败: 其他类型的错误

类图

下面是一个类图，展示了axios取消令牌的相关类和方法：

classDiagram
  class axios.CancelToken {
    +token: CancelTokenSource
    +promise: Promise<Cancel>
    +reason?: Cancel
    +throwIfRequested(): void
    +subscribe(listener: (reason: Cancel) => void): Canceler
  }

  class axios.CancelTokenSource {
    +token: CancelToken
    +cancel: Canceler
  }

  class axios.Cancel {
    +message: string
  }

  class axios {
    +CancelToken: CancelToken
    +isCancel(value: any): boolean
  }

总结

本文介绍了如何使用axios