JavaScript Core - The Fetch API

Create a free account to save your progress

Earn XP, track streaks, and sync your dashboard across devices.

Lesson

Making HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. requests is the most common async task in web development. Whether you are loading user data, submitting a form, or calling a third-party APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses., your application needs to talk to servers. The Fetch API is the modern, PromiseWhat is promise?An object that represents a value you don't have yet but will get in the future, letting your code keep running while it waits.-based way to do this. It replaced the older XMLHttpRequest with a cleaner interface that works naturally with async/awaitWhat is async/await?A syntax that lets you write asynchronous code (like fetching data) in a readable, step-by-step style instead of chaining callbacks..

Basic GET requests

The simplest fetch takes a URL and returns a PromiseWhat is promise?An object that represents a value you don't have yet but will get in the future, letting your code keep running while it waits.:

const response = await fetch('https://api.example.com/users');
const users = await response.json();
console.log(users);

Step by step: fetch() sends a GET request, returns a Promise that resolves to a Response object, then response.json() parses the body (also a Promise).

AI pitfall

AI tools frequently hardcode URLs directly in fetch calls and skip error handling entirely. A real application stores base URLs in configuration and always checks for non-200 responses. If Copilot generates fetch('https://api.example.com/users') with no error handling, you need to add response.ok checking and wrap it in try/catch before the code is production-ready.

The Response object

Property	Description	Example
`status`	HTTP status code	`200`, `404`, `500`
`statusText`	Status message	`'OK'`, `'Not Found'`
`ok`	Boolean for 200-299	`true` / `false`
`headers`	Response headers	`Headers` object
`url`	Final URL after redirects	`'https://...'`

const response = await fetch('/api/users');

console.log(response.status);     // 200
console.log(response.ok);         // true
console.log(response.statusText); // 'OK'

Critical

Fetch only rejects on network failures (no internet, DNS error). A 404 or 500 response is a "successful" fetch, the Promise resolves. You must check response.ok yourself.

Parsing response bodies

Method	Returns	Use for
`.json()`	Parsed JavaScript object	API responses (most common)
`.text()`	Raw string	HTML, plain text
`.blob()`	Binary blob	Images, files
`.formData()`	FormData object	Form responses
`.arrayBuffer()`	ArrayBuffer	Binary manipulation

You can only read the body once. If you need it twice, clone the response first:

const response = await fetch('/api/data');
const clone = response.clone();

const text = await response.text();
const json = await clone.json();

POST and other request methods

Pass an options object as the second argument:

const newUser = { name: 'Alice', email: 'alice@example.com' };

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify(newUser)
});

const created = await response.json();

Common HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. methods

Method	Use case	Body?
`GET`	Retrieve data	No
`POST`	Create new resource	Yes
`PUT`	Replace entire resource	Yes
`PATCH`	Partial update	Yes
`DELETE`	Remove resource	Optional

Error handling pattern

This is the pattern you should use for every fetch call:

async function fetchUsers() {
  try {
    const response = await fetch('/api/users');

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Failed to fetch users:', error.message);
    return [];
  }
}

Common fetch patterns

With query parameters:

const params = new URLSearchParams({
  page: '1',
  limit: '10',
  search: 'alice'
});

const response = await fetch(`/api/users?${params}`);

With authenticationWhat is authentication?Verifying who a user is, typically through credentials like a password or token.:

async function fetchWithAuth(url, options = {}) {
  const token = localStorage.getItem('token');

  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    }
  });
}

File upload:

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('name', fileInput.files[0].name);

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData // Do NOT set Content-Type - fetch sets it automatically
});

Fetch vs other HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. libraries

Feature	Fetch	Axios
Built-in	Yes	No (extra dependency)
Promise-based	Yes	Yes
Automatic JSON parsing	No (manual `.json()`)	Yes
Request interceptors	No	Yes
Request timeout	No (use AbortController)	Built-in
Browser support	Modern browsers	IE11+ with polyfill

For most applications, fetch is enough. Consider Axios if you need interceptors, automatic timeouts, or request cancellation.

Timeouts and cancellation

Fetch has no built-in timeout. Use AbortController or Promise.race():

// AbortController approach
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

try {
  const response = await fetch('/api/data', {
    signal: controller.signal
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Request timed out');
  }
}

Quick reference

Pattern	Code
Simple GET	`const data = await (await fetch(url)).json()`
POST with JSON	`fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) })`
Check status	`if (!response.ok) throw new Error(...)`
Query params	`fetch(\`/api?${new URLSearchParams(params)}\`)`
Cancel request	`fetch(url, { signal: controller.signal })`

javascript

// GET request
const res = await fetch('https://api.example.com/users');
const users = await res.json();

// POST request
const res2 = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' })
});

Done

Complete & Next