用AbortController控制请求取消多余的网络请求来代替防抖节流

AbortController：控制器对象，该接口允许根据需要中止一个或多个web请求。

AbortController.signal：可以用该属性来和异步操作进行通信或者中止这个操作。

AbortController.abort()：该方法中止一个尚未完成的异步操作，能中止fetch请求及任何响应体和流的使用。

AbortController API 文档地址：AbortController - Web API | MDN

例：有一个搜索输入框，每次用户输入时都会发送一个搜索请求，我们希望取消之前的请求，只保留最新的请求。

<template>
  <div>
    <input v-model="query" @input="handleInput" placeholder="Search..." />
    <div v-if="isLoading">Loading...</div>
    <ul v-else>
      <li v-for="result in results" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const query = ref('');
const results = ref([]);
const isLoading = ref(false);
// 创建一个 AbortController 对象实例
let abortController = new AbortController();

const handleInput = async () => {
  if (abortController) {
    // 终止当前正在进行的请求
    abortController.abort(); 
  }

  // 每次输入发生时 终止了当前正在进行的请求后 再创建一个新的 AbortController，在去发起请求
  abortController = new AbortController();
  // 获得signal属性
  const signal = abortController.signal;

  if (query.value.trim() === '') {
    results.value = [];
    return;
  }

  isLoading.value = true;

  // 发起请求
  try {
    // 传入signal属性 将abortController和请求相关联
    const response = await axios.get(`https://api.example.com/search?q=${query.value}`, { signal });
    results.value = response.data.results;
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('请求已取消:', error.message);
    } else {
      console.error('搜索失败:', error);
    }
  } finally {
    isLoading.value = false;
  }
};
</script>

注意：axios使用AbortController取消请求需要在0.22.0版本或以上，因为axios是从0.22.0才开始支持使用AbortController的。

axios文档地址：取消请求 | Axios中文文档 | Axios中文网