Cancel a Fetch Request

fetch-cancel.js

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

fetch("http://localhost:8000", { signal }).then(response => {
  console.log(`Request 1 is complete!`);
}).catch(e => {
  console.warn(`Fetch 1 error: ${e.message}`);
});

fetch("http://localhost:8000", { signal }).then(response => {
  console.log(`Request 2 is complete!`);
  if(e.name === "AbortError") {
    // We know it's been canceled!
  }
}).catch(e => {
  console.warn(`Fetch 2 error: ${e.message}`);
  if(e.name === "AbortError") {
    // We know it's been canceled!
  }
});

// Wait 2 seconds to abort both requests
setTimeout(() => controller.abort(), 2000);


// Utility for One Signal Many Fetches
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);
}

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

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