Using fetch

fetch is the modern browser API for making HTTP requests from JavaScript.

You use it when your code needs to talk to a server.

Examples:

• load users from an API
• submit a form
• fetch product data
• save settings
• call your backend

What Is an API?

An API is a way for one program to communicate with another program.

In web development, an API often means an HTTP endpoint that returns data.

Example URL:

1

https://api.example.com/users/1

Your JavaScript sends a request.

The server sends a response.

Basic fetch Example

1
2
3
4

const response = await fetch("https://api.example.com/users/1");
const user = await response.json();

console.log(user.name);

This code:

1. Sends a request with fetch.
2. Waits for the HTTP response.
3. Parses the response body as JSON.
4. Uses the resulting object.

fetch Returns a Promise

fetch() is asynchronous.

1
2
3

const result = fetch("/api/user");

console.log(result); // Promise

To get the response, use await inside an async function.

1
2
3
4
5
6

async function loadUser() {
  const response = await fetch("/api/user");
  const user = await response.json();

  return user;
}

Or use .then().

1
2
3
4
5

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => {
    console.log(user.name);
  });

In modern code, async / await is often easier to read.

The Response Object

fetch() resolves to a Response object.

1
2
3
4
5

const response = await fetch("/api/user");

console.log(response.status);
console.log(response.ok);
console.log(response.headers);

Useful response properties:

Reading the Response Body

Common body-reading methods:

1
2
3

await response.json();
await response.text();
await response.blob();

Use .json() when the server sends JSON.

1

const data = await response.json();

Important:

1

response.json() also returns a Promise.

That is why you need await.

fetch Does Not Reject for 404

This surprises many beginners.

fetch() rejects for network-level failures.

It does not reject just because the server returns 404 or 500.

1
2
3
4

const response = await fetch("/api/missing");

console.log(response.status); // 404
console.log(response.ok); // false

You should check response.ok.

1
2
3
4
5
6
7
8
9

async function loadUser() {
  const response = await fetch("/api/user");

  if (!response.ok) {
    throw new Error(`Request failed with status ${response.status}`);
  }

  return response.json();
}

Handling fetch Errors

1
2
3
4
5
6
7
8
9
10
11
12
13
14

async function loadUser() {
  try {
    const response = await fetch("/api/user");

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

    return await response.json();
  } catch (error) {
    console.log("Could not load user:", error.message);
    return null;
  }
}

This handles:

• network failures
• failed status codes you explicitly throw for
• JSON parsing errors

Best Practices

Use async / await for readable request code.

Check response.ok before parsing data when status matters.

Use response.json() for JSON responses.

Handle errors with try...catch.

Do not assume every response body is valid JSON.

Common Mistakes

Mistake 1: Forgetting await response.json()

1
2
3

const data = response.json();

console.log(data); // Promise

Correct:

1

const data = await response.json();

Mistake 2: Assuming 404 Rejects Automatically

1

const response = await fetch("/missing");

This can still resolve.

Check:

1

if (!response.ok) {}

Mistake 3: Calling fetch Outside Async Code With await

1

const response = await fetch("/api/user");

This must be inside an async function or module with top-level await support.

Summary

fetch sends HTTP requests from JavaScript.

• fetch() returns a Promise.
• The fulfilled value is a Response object.
• Use await response.json() to parse JSON.
• Check response.ok for HTTP error statuses.
• Use try...catch for network, parsing, and thrown response errors.