axios请求的取消

情景：

有一个输入框，每输入字符时向后端发送请求获取提示词，输入框下方显示提示词。

如图：

问题：

当输入速度过快时，由于请求返回的时间不稳定性，会出现提示框的词与输入的内容不匹配

如图（我的是本地项目，请求响应太快不能复现此BUG，借的网上的图）：

解决：

采用方案为:取消上一次的请求

通过 CancelToken 实例来取消请求 您可以通过创建一个 CancelToken 实例并将其传递给请求的 config 对象中来实现取消请求。然后，在需要取消请求的地方，您可以调用 cancel 方法以发送取消请求信号。

代码：

import axios, { CancelTokenSource } from 'axios';
import { ref } from 'vue';

const value = ref('');
const list = ref<String[]>([]);

let source: CancelTokenSource | null = null;
const onInput = () => {
  source && source.cancel(); //取消请求
  source = axios.CancelToken.source(); //重新声明 CancelToken 实例
  axios.get('http://localhost:3000', {
    params: {
      data: value.value
    },
    cancelToken: source.token //相当于一个标记，可以根据这个标记进行取消
  })
    .then(res => {
      console.log(res);
      const { data } = res;
      list.value = data;
    })
    .catch(err => {
      console.log(err);
    });
};