The JavaScript fetch() method

Q: How do I use fetch() with async/await?

Await the request and then the body: const res = await fetch(url); const data = await res.json();. Wrap it in try/catch.

Q: How do I send a POST request with fetch()?

Pass an options object: fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }).

Q: How do I get JSON from a fetch response?

Call await response.json(), which parses the body and returns the data.

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

The fetch() method makes a network request and returns a promise that resolves to the response. The modern pattern is const res = await fetch(url); const data = await res.json();. It's the standard way to call APIs. Note it only rejects on network failure; you must check res.ok for HTTP errors like 404.

Overview

fetch() is how modern JavaScript talks to servers. You give it a URL and it returns a promise for a Response. Because it's promise-based, it pairs beautifully with async/await: const res = await fetch(url) reads almost like synchronous code while staying non-blocking.

Getting the data is a two-step dance. fetch() resolves once the response headers arrive; you then call a method on the response to read the body, usually await res.json() for JSON, or res.text() for plain text. That's why API calls have two awaits.

The gotcha that bites everyone: fetch() only rejects the promise on a network failure (offline, DNS, CORS). An HTTP error status like 404 or 500 still resolves successfully, so you must check res.ok (or res.status) yourself and throw if it's not OK. Wrap the whole thing in try/catch to handle both network and HTTP errors. For a POST, pass a second options object with method, headers and a body (often JSON.stringify()'d).

Syntax

const response = await fetch(url)
const response = await fetch(url, options)

// typical GET
const res = await fetch("/api/users");
if (!res.ok) throw new Error(res.status);
const data = await res.json();

// POST with a JSON body
await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" })
});

Parameters

The fetch() method accepts the following parameters.

Parameter	Description
`resource`	The URL to request, or a `Request` object.
`options`	Optional. A settings object: `method`, `headers`, `body`, `credentials`, `signal` and more.

Example

 Live example
                                    
                                    // Fetch data from an API with async/await
async function loadUser(id) {
  try {
    const res = await fetch('/api/users/' + id);
    if (!res.ok) throw new Error('HTTP ' + res.status);

    const user = await res.json();
    console.log(user.name);
  } catch (err) {
    console.error('Request failed:', err);
  }
}

loadUser(1);

Best practices

Always check response.ok; fetch() does not reject on HTTP errors like 404 or 500.
Wrap calls in try/catch with async/await to handle network failures.
Remember the two-step read: await fetch() then await res.json().
For POST/PUT, set the method, a Content-Type header and a stringified body.

Frequently asked questions

How do I use fetch() with async/await?

Await the request and then the body: const res = await fetch(url); const data = await res.json();. Wrap it in try/catch.

Why doesn't fetch() throw on a 404?

It only rejects on network errors. HTTP error statuses still resolve, so you must check response.ok and throw yourself.

How do I send a POST request with fetch()?

Pass an options object: fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }).

How do I get JSON from a fetch response?

Call await response.json(), which parses the body and returns the data.

dataset getAttribute()

References