Cancelling Fetch Requests

Aborting Fetch

Pass an AbortSignal to fetch to cancel in-flight requests — essential for search inputs and component unmounting.

Example

let controller;
async function search(query) {
  controller?.abort(); // cancel previous
  controller = new AbortController();
  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal: controller.signal });
    return res.json();
  } catch (e) {
    if (e.name !== "AbortError") throw e;
  }
}

JAVASCRIPT

Full Editor

Pro Tip

Abort previous requests on each keystroke to prevent stale results from overwriting newer ones.

Related Resources

JavaScript Reference

Complete tag & property list

JavaScript How-To Guides

Step-by-step practical guides

JavaScript Exercises

Practice what you've learned