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

<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>