javascript - 中止上一个请求后无法发出新的获取请求

Question

我需要更改定义哪些数据应来 self 的请求的参数，并且该应用程序还需要定期刷新。如果用户在未完成的请求中更改参数，事情就会开始变得奇怪，并且会发生一些意外的行为。

所以我的方法是在开始新请求之前中止所有先前的请求，但是使用 awaitcontroller.abort() 后似乎永远不会触发下一个请求，我是否需要清除信号或类似的东西？

const controller = new AbortController();
const async fetchData = (url, body = null) => {
  let data;
  const signal = controller.signal;
  const headers = { ... };
  response = await fetch(url, body ? {
    method: "POST",
    body: JSON.stringify(body),
    signal,
    headers
  } : { headers, signal });;
  data = await response.json()
  return data
}

const firstData = await fetchData(url1, body1);
await controller.abort();
const secondData= await fetchData(url2, body2);

发生的情况是，secondData 始终是未定义，实际上第二个请求从未发生(查看网络流量)。如果我在执行 .abort() 后停止源代码并尝试运行 await fetchData(url2) ，则会提示错误，指出 Uncaught SyntaxError:await 才有效在异步函数中或者如果我尝试在没有await的情况下运行它，它会返回一个待处理的 promise ，但在流量选项卡中看不到实际的请求。

---

已解决

应用 ansewr 上的建议，我在函数上创建了包装器，每次都调用新的 Controller 。

let controller = null;
let fetchData = null;
const initializeFetchData = () => {
  const controller = new AbortController();
  const async fetchData = (url, body = null) => {
    let data;
    const signal = controller.signal;
    const headers = { ... };
    response = await fetch(url, body ? {
      method: "POST",
      body: JSON.stringify(body),
      signal,
      headers
    } : { headers, signal });;
    data = await response.json()
    return data
  }
}

initializeFetchData();
const firstData = await fetchData(url1, body1);
controller.abort();
initializeFetchData();
const secondData= await fetchData(url2, body2);

Answer 1

您对两个不同的请求使用相同的AbortController。在 AbortController 上调用 .abort() 后，您已更新了 AbortSignal 的状态，然后该状态将导致第二个请求无效。

如果您想要这种行为，您应该为每个请求使用单独的AbortController。当然，如果您希望能够一次性中止所有请求，那么为多个 fetch 请求重用 AbortController 是完全可以接受的。

其他几点...

• .abort() 是一个同步方法，它返回 void，因此调用 .abort 时不需要 await 前缀().
• 在您的代码示例中，第一个请求永远不会中止，因为您正在等待fetch请求，该请求将在.abort()<之前完成 被调用。