AbortController

AbortController is a global class in JavaScript that you can use to abort, well, anything!

const controller = new AbortController()

const signal = controller.signal

controller.abort()

Once you create a controller instance, you get two things:

Property/Method	Description
signal property	Returns an AbortSignal object instance, used to communicate with/abort the request
abort method	Aborts the request; optionally accepts a reason parameter

Usage

Fetch requests

let controller;

function search(query) {
	if (controller) {
		controller.abort()
	}

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

	fetch(`/api/search?q=${query}`, { signal })
		.then(res => res.json)
		.then(data => console.log(data))
		.catch(err => {
			if (err.name !== "AbortError") {
				console.error(err)
			}
		})
}

Event listeners

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

window.addEventListener("resize", () => {
	console.log("resize")
}, { signal })


window.addEventListener("hashchange", () => {
	console.log("hashchange")
}, { signal })

window.addEventListener("storage", () => {
	console.log("storage")
}, { signal })


window.addEventListener("click", () => {
	console.log("click")
}, { signal })

// Calling `.abort()` removes ALL event listeners associated with `signal`
controller.abort()

Steams

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

const writableSteam = new WriteableStream({
	write(chunk, controller) {
		if (signal.aborted) {
      console.log(new DOMException("Aborted", "AbortError"))
      return;
    }

		controller.signal.addEventListener("abort", () => {
      console.log("Abort detected during write")
      // Cleanup partial writes, close connections, etc.
    });

		return new Promise((resolve) => setTimeout(resolve, 100))
	},
	close() {
		console.log(('Stream closed normally'))
	},
	abort(reason) {
		console.log("Stream aborted: ", reason)
	}
}, { signal })

const writer = stream.getWriter();

// Write some data
await write.write("data chunk")

// Abort via writer
await write.abort()

// Abort via controller
controller.abort("user cancelled")