fetch 请求怎么取消请求处理延迟结果

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); // 其他错误
  }
};