使用一个信号进行多个 fetch() 以便中止所有操作

Question

我看到了另一个答案：/sf/answers/3307543501/

那么我可以仅使用一个信号来中止多个获取请求吗？

Answer 1

在我写问题时，我已经在这篇文章中找到了关于如何中止从致力于实施中止的先驱者之一获取数据的解决方案。

所以是的，你可以:)这是一个简短的例子：

async function fetchStory({ signal }={}) {
  const storyResponse = await fetch('/story.json', { signal });
  const data = await storyResponse.json();

  const chapterFetches = data.chapterUrls.map(async url => {
    const response = await fetch(url, { signal });
    return response.text();
  });

  return Promise.all(chapterFetches);
}

在上面的示例中，相同的信号用于初始读取和并行章节读取。以下是使用 fetchStory 的方法：

const controller = new AbortController();
const signal = controller.signal;

fetchStory({ signal }).then(chapters => {
  console.log(chapters);
});

在这种情况下，调用controller.abort()将拒绝正在进行的提取的承诺。