How to Use Fetch in JavaScript

Use fetch() when your JavaScript needs to request data from an API, send form data, load JSON, or talk to a backend service. This is the standard modern way to make HTTP requests in the browser.

What you’ll build or solve

You’ll learn how to use fetch in JavaScript for GET and POST requests. You’ll also know how to parse JSON responses and handle request errors.

When this approach works best

This approach is the right choice when data comes from a server instead of being hardcoded in the page.

Common real-world scenarios include:

• Loading dashboard stats
• Fetching user profiles
• Submitting forms
• Loading blog posts
• Calling REST APIs

This is a bad idea when the data is already available in memory and no network request is needed.

Prerequisites

You only need:

• A JavaScript file or browser console
• Basic async/await knowledge
• Access to an API endpoint

Step-by-step instructions

Step 1: Make a GET request and parse JSON

The cleanest default is fetch() with async/await.

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

  console.log(user);
}

This sends a GET request by default.

For POST requests, add an options object.

async function createUser() {
  const response = await fetch("/api/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      name: "Alex"
    })
  });

  const result = await response.json();
  console.log(result);
}

Wrap requests in try...catch for safer error handling.

try {
  const response = await fetch("/api/stats");
} catch (error) {
  console.error(error);
}

What to look for:

• fetch() returns a promise
• GET is the default request type
• Use response.json() for JSON APIs
• POST needs method, headers, and body
• Wrap network calls in try...catch

Examples you can copy

Load posts

const response = await fetch("/api/posts");
const posts = await response.json();

Submit form data

await fetch("/api/contact", {
  method: "POST",
  body: JSON.stringify({ email })
});

Refresh stats

const response = await fetch("/api/stats");
const stats = await response.json();

Common mistakes and how to fix them

Mistake 1: Forgetting to await response.json()

What the reader might do:

const data = response.json();

Why it breaks: json() returns a promise.

Corrected approach:

const data = await response.json();

Mistake 2: Missing JSON headers in POST requests

What the reader might do:

fetch("/api/users", {
  method: "POST",
  body: JSON.stringify({ name: "Alex" })
});

Why it breaks: some APIs require the JSON content type.

Corrected approach:

headers: {
  "Content-Type": "application/json"
}

Mistake 3: No error handling

What the reader might do:

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

Why it breaks: failed requests can stop the flow silently.

Corrected approach:

Wrap the request in try...catch.

Troubleshooting

If the result logs as a promise, add missing await.

If POST requests fail, verify the JSON headers.

If the request crashes, add try...catch.

If the endpoint returns HTML instead of JSON, confirm the API route.

Quick recap

• Use fetch() for HTTP requests
• GET is the default
• Await response.json()
• Add headers for JSON POST
• Use try...catch for request failures