fetch 请求怎么取消 abort 处理延迟结果
前言
当我们在输入框中频繁输入去调用请求的时候，有时候会出现我们请求的结果是上一次的结果
场景解释
比如当我们输入 “测试”的时候，可能会有 100 条数据，我们又输入了 "测试 1"这个结果可能 5 条数据，但是，当我们返回这五条数据之后，我们那个 100 条数据还没返回结果，过了一会我们发现列表数据又渲染成了 100 条数据，显然我们期望的结果是 5 条数据
解决方案
-
? 1、可以通过设置防抖来处理这个问题（有风险）
可以参考这里设置防抖
❓：会有什么风险？
?：一般我们设置的防抖是 300ms 左右，如果我们上一次请求返回的结果与本次请求结果之间相差时间超过 300ms 则就依旧会出现上面所说的问题，如果我们设置的防抖时间过长，则用户体验会很差，有种交互没有立即响应的感觉 -
? 2、可以通过取消上一次请求来解决（推荐）
-
? 2、1 知识点： AbortController
-
? 2、2 实现步骤：
-
let controller = null; // 保存当前的 AbortController 可以使用useRef来保存
const fetchData = async () => {
if (controller) {
controller.abort(); // 终止之前的请求
}
controller = new AbortController(); // 创建新的 AbortController
const signal = controller.signal; // 获取信号
try {
const request = fetch("http://localhost:8000/json/index.jso1n", {
signal: signal, // 使用信号进行请求
})
.then((res) => {
const response = res.json();
response.then((data) => {
console.log(data);
});
})
.catch((err) => {
console.log("我取消了请求");
});
// 处理响应数据
} catch (error) {
console.log("Fetch error:", error); // 其他错误
}
};