Fetch, Errors, and Cancellation

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Fetch, Errors, and Cancellation step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Separate network failure from HTTP error responses.
Validate status and representation before parsing.
Cancel obsolete work with AbortController.
Expose safe recovery messages without leaking internals.

DEEP EXPLANATION

Build the complete mental model

fetch fulfills for ordinary HTTP errors

The fetch Promise rejects when a request cannot be completed, such as a network failure or abort. A server response with 404 or 500 normally fulfills with a Response, so check response.ok or the exact status before treating it as data. Decide which statuses are retryable, which mean authentication is required, and which should become a user-correctable message.

A response body still needs a contract

Check the expected content type before parsing and validate the parsed JSON shape afterward. response.json can reject when the body is invalid, and a valid JSON value can still omit required fields. Keep the fetch adapter responsible for HTTP details while domain validation converts unknown external data into trusted application values.

Cancellation prevents obsolete results

Pass an AbortSignal to fetch and abort when a search changes, a component is removed, or a deadline expires. Treat AbortError as a normal control outcome rather than showing a frightening failure. Cancellation does not replace server timeouts, authorization, or request limits. When responses can race, track ownership so an old result cannot overwrite newer state.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Validate the full response boundary

Status, representation, and parsed shape are checked before the caller receives trusted data.

async function requestCourse(url, { signal } = {}) {
  const response = await fetch(url, { signal, headers: { Accept: "application/json" } });
  if (!response.ok) throw new Error("Request failed (" + response.status + ")");
  if (!(response.headers.get("content-type") ?? "").includes("application/json")) throw new Error("Unexpected response type");
  const data = await response.json();
  if (!data || typeof data.title !== "string") throw new Error("Invalid course data");
  return data;
}

Example 2: Cancel an obsolete search

Each new search owns a controller and distinguishes cancellation from actionable failure.

let activeController;
async function search(query) {
  activeController?.abort();
  activeController = new AbortController();
  try {
    return await requestResults(query, { signal: activeController.signal });
  } catch (error) {
    if (error instanceof DOMException && error.name === "AbortError") return null;
    throw error;
  }
}

How to trace this lesson

Record request method, URL, headers, body, and signal.
Classify the outcome as abort, network failure, HTTP error, parse error, shape error, or success.
Verify only the newest request owns the visible result.
Map technical detail to a safe message and a concrete retry or correction action.

Common mistakes and corrections

Calling response.json before checking response.ok.: Validate the HTTP outcome and representation first.
Showing raw server errors to users.: Log controlled diagnostics and present safe recovery guidance.
Letting stale requests overwrite new results.: Cancel obsolete work or compare request ownership before committing state.

PRACTICE LADDER

Move from recognition to independent work

1
Mock 200, 404, 500, non-JSON, and malformed JSON responses.
2
Write a response-shape validator for a course record.
3
Cancel a search when the query changes.
4
Design messages and recovery actions for every outcome class.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

HTTP errors are still fulfilled fetch responses

fetch rejects when the request cannot be completed, not simply because the server returned 404 or 500. Check response.ok before parsing, verify the expected content type, and show a message that helps the learner retry. Keep detailed diagnostics in controlled logs rather than exposing server internals.

Cancellation is a normal application state

AbortController lets an interface cancel work when the user changes a query or leaves a view. Pass its signal to fetch and distinguish AbortError from a genuine failure. A timeout can be implemented with a signal, but the server must still enforce its own limits and authorization.

RUNNABLE EXAMPLE

Change one assumption at a time

Change the mock to 404, then to a non-JSON content type. Confirm each failure is caught at the layer that can show a recovery action.

async function requestJson(fetcher) {
  const response = await fetcher();
  if (!response.ok) throw new Error('Request failed (' + response.status + ')');
  const type = response.headers.get('content-type') ?? '';
  if (!type.includes('application/json')) throw new Error('Unexpected response');
  return response.json();
}
const mockFetch = async () => ({ ok: true, status: 200, headers: new Headers({ 'content-type': 'application/json' }), json: async () => ({ lessons: 3 }) });
console.log(await requestJson(mockFetch));

async function requestJson(fetcher) {
  const response = await fetcher();
  if (!response.ok) throw new Error('Request failed (' + response.status + ')');
  const type = response.headers.get('content-type') ?? '';
  if (!type.includes('application/json')) throw new Error('Unexpected response');
  return response.json();
}
const mockFetch = async () => ({ ok: true, status: 200, headers: new Headers({ 'content-type': 'application/json' }), json: async () => ({ lessons: 3 }) });
console.log(await requestJson(mockFetch));

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const data = await fetch(url).then((response) => response.json());

Reveal repair and explanation

const response = await fetch(url, { signal });
if (!response.ok) throw new Error('Request failed');
const data = await response.json();

Parsing immediately treats error pages as successful data. Check status and expected content before accepting the response.

INDEPENDENT LAB

Build without copying the example

Build a requestJson helper with status checks, content-type validation, cancellation, and a user-safe error mapping.

async function requestJson(url, { signal } = {}) {
  // Fetch, validate, and parse JSON.
}

async function requestJson(url, { signal } = {}) {
  // Fetch, validate, and parse JSON.
}

Press Run to execute your code.

Self-review checklist Non-2xx responses cannot be returned as successful data. Cancellation is distinguished from an actionable failure. No secret or raw server error is exposed in browser code.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Does fetch reject automatically for a 404 response? No Yes Only for JSON

2. What object creates an abort signal? AbortController FormData MutationObserver

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

Fetch, Errors, and Cancellation | JavaScript Course | SovranCode

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering