需求描述
快速点击查询按钮多次，只需要最后一次点击的查询结果，中断之前无效点击发起的 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>
