javascript - 使用 debounce js 时的数据一致性

Question

假设我们有一个 debounce 函数来在 javascript 中发出 Http 请求。如果第二个请求的解析速度比第一个请求快，如何确保我们根据用户最后的输入向用户显示相关数据？

考虑到第一个请求的响应在 10000 毫秒内到达，而第二个请求的响应则更快(例如 4000 毫秒)，因为网络请求的异步性质。

Answer 1

对于赛车请求，通常您希望在启动第二个请求之前取消第一个请求。这有助于避免您遇到的问题，并帮助您摆脱未使用的响应。如果您使用 fetch，现代浏览器对 Abort Controller 有很好的支持。 .

const controller = new AbortController();
const { signal } = controller;

fetch(url, { signal })
  .then((response) => {
    // ...
  })
  .catch((e) => {
    //
  });

// To abort the fetch call
controller.abort(); // Edited, thanks Peter!

请注意，当您中止 fetch 调用时，它将导致拒绝的 Promise，因此请确保将 catch 链接到它，或者如果您使用的是 async-await，则将整个内容包装在 try-catch block 中。

try {
  await fetch(url, { signal });
} catch (error) {
  // ...
}