vue3 在 watchEffect 里中断未完成的 axios 请求（只保留最后一次请求的方法---连续点击查询按钮的优化）

需求描述

快速点击查询按钮多次，只需要最后一次点击的查询结果，中断之前无效点击发起的 http 请求，以便优化页面性能，减少对流量的消耗。

效果预览

快速点击查询按钮多次，期间第2-8次点击的请求取消，最后一次点击（第9次）的请求成功。

完整代码

原理详见注释

<template>
  <div>
    <button @click="id++">查询</button>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref, watchEffect } from "vue";
let id = ref(1);

watchEffect((onInvalidate) => {
  // source相关的部分为axios中断请求的固定写法
  const source = axios.CancelToken.source();
  axios
    .get(`https://jsonplaceholder.typicode.com/todos/${id.value}`, {
      cancelToken: source.token,
    })
    .catch((err) => {
      // 中断请求时会触发catch，其中message属性的值为下文中 source.cancel() 的参数
      console.log(err.message);
    });
  onInvalidate(() => {
    // 中断未完成的请求,此处 -1 是因为最后一个请求不会中断。
    source.cancel(`已中断id为${id.value - 1}的查询`);
  });
});
</script>