How to Use the JavaScript Fetch API

The JavaScript Fetch API is the built-in way to make HTTP requests in modern browsers and in Node.js 18+. It returns Promises, so you can chain .then() calls or use async/await instead of older patterns like XMLHttpRequest or jQuery’s $.ajax().

In this tutorial, you will send GET and POST requests, handle HTTP errors correctly, cancel slow requests, and compare Fetch with Ajax and Axios.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    if (!response.ok) throw new Error(response.status);
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

• The JavaScript Fetch API exposes fetch(url, options). It returns a promise that resolves to a Response object, not parsed JSON.
• Call response.json(), response.text(), or response.blob() to read the body. Each body-reading method returns its own Promise.
• fetch() only rejects on network failure. A 404 or 500 response still resolves. Check response.ok or response.status before you parse the body.
• For POST requests, set method, headers, and body. Use JSON.stringify() when you send JSON. See How to Work with JSON in JavaScript.
• async/await keeps request code readable. Pair it with try/catch and the same response.ok checks you use in promise chains.
• AbortController cancels in-flight requests and sets timeouts. Pass signal in the options object.
• Fetch is built into browsers and Node.js 18+. For interceptors or automatic JSON parsing, many teams pick Axios. See React Axios tutorial for a library-based approach.

To complete this tutorial, you will need the following:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.
• A basic understanding of coding in JavaScript from the How to Code in JavaScript series.
• Familiarity with Promises and async/await. Read the Promises section of Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript.

The JavaScript Fetch API is a browser and Node.js interface for requesting resources over HTTP. You pass a URL (or a Request object) to fetch(). The function returns a Promise that resolves when headers arrive, even when the server returns an error status.

For the full specification, see MDN: Fetch API.

The simplest call passes only a URL:

fetch(url)

fetch() returns a Promise. Chain .then() to handle a successful response:

fetch(url)
  .then(function() {
    // handle the response
  })

Add .catch() for network errors (offline client, DNS failure, CORS block in some cases):

fetch(url)
  .then(function() {
    // handle the response
  })
  .catch(function() {
    // handle the error
  });

.catch() does not run when the server returns 404 or 500. You handle those status codes inside .then() by checking response.ok. The error handling section below shows the pattern.

This step loads ten users from the JSONPlaceholder API and renders them in an HTML list.

Create authors.html with a heading and an empty list:

<h1>Authors</h1>
<ul id="authors"></ul>

Add a script tag. Select the list with getElementById and create a DocumentFragment to hold list items before you attach them to the page:

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';
</script>

Call fetch() and check response.ok before you parse JSON:

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response.json();
    })
</script>

The first .then() receives a Response. Calling response.json() returns another Promise with the parsed data. Add a second .then() to build list items with map(), createElement, and appendChild:

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response.json();
    })
    .then((authors) => {
      authors.forEach((author) => {
        const li = document.createElement('li');
        const name = document.createElement('h2');
        const email = document.createElement('span');

        name.textContent = author.name;
        email.textContent = author.email;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });

      ul.appendChild(list);
    })
    .catch((error) => {
      console.error('Fetch failed:', error);
    });
</script>

This is the complete authors.html file:

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response.json();
    })
    .then((authors) => {
      authors.forEach((author) => {
        const li = document.createElement('li');
        const name = document.createElement('h2');
        const email = document.createElement('span');

        name.textContent = author.name;
        email.textContent = author.email;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });

      ul.appendChild(list);
    })
    .catch((error) => {
      console.error('Fetch failed:', error);
    });
</script>

Open the file in a browser. You should see ten author names and email addresses. You just completed a GET request with the JavaScript Fetch API.

fetch() defaults to GET. For POST, pass a second argument with method, body, and headers.

const url = 'https://jsonplaceholder.typicode.com/users';

let data = {
  name: 'Sammy'
};

let fetchData = {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch(url, fetchData)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    return response.json();
  })
  .then((result) => {
    console.log('Created:', result);
  })
  .catch((error) => {
    console.error(error);
  });

JSONPlaceholder echoes your POST body and adds an id field. In a production API, read the status code and response body to confirm the record was saved.

The Headers interface lets you set request and response headers. On the server side, routes map HTTP methods to handler functions. See How To Define Routes and HTTP Request Methods in Express for a Node.js example.

POST with a Request object

You can also build a Request and pass it to fetch():

const url = 'https://jsonplaceholder.typicode.com/users';

let data = {
  name: 'Sammy'
};

let request = new Request(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
});

fetch(request)
  .then((response) => response.json())
  .then((result) => console.log(result));

fetch() also supports PUT, PATCH, and DELETE when you set method in the options object.

A resolved fetch() Promise does not mean the request succeeded. The Promise rejects only when the request cannot complete (network down, invalid URL, aborted signal).

Check response.ok (true for status 200–299) or inspect response.status:

fetch('https://jsonplaceholder.typicode.com/posts/999')
  .then((response) => {
    if (!response.ok) {
      return Promise.reject({
        status: response.status,
        statusText: response.statusText
      });
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => {
    console.error('Request failed:', error.status, error.statusText);
  });

For async/await, throw inside try/catch when !response.ok:

async function getPost(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);

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

  return response.json();
}

getPost(1).then(console.log).catch(console.error);

Read Understanding JavaScript Promises for more on chaining and rejection.

async/await is syntactic sugar over Promises. It keeps request code flat and easy to read:

async function fetchUsers(endpoint) {
  const response = await fetch(endpoint);

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

  const data = await response.json();
  return data.map((user) => user.name);
}

fetchUsers('https://jsonplaceholder.typicode.com/users')
  .then((names) => console.log(names))
  .catch((error) => console.error(error));

You can return data from an async function and keep chaining .then() on the returned Promise. For a deeper walkthrough of async/await, see Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript.

Fetch has no built-in timeout. Use AbortController to cancel a request or stop it after a deadline:

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

fetch('https://jsonplaceholder.typicode.com/users', {
  signal: controller.signal
})
  .then((response) => response.json())
  .then((data) => {
    clearTimeout(timeoutId);
    console.log(data.length, 'users loaded');
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.error('Request timed out');
    } else {
      console.error(error);
    }
  });

AbortController is supported in current versions of Chrome, Firefox, Safari, and Edge, and in Node.js 18+.

For new projects that already use jQuery, read Submitting AJAX Forms with jQuery for a comparison of $.ajax() and fetch().

Pick Fetch when you want zero dependencies and your team is fine checking response.ok. Pick Axios when you need interceptors, simpler error defaults, or tighter React integration. See How to Use Vue.js and Axios to Display Data from an API.

Fetch API in React

React apps often call fetch() inside useEffect() when a component mounts:

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        if (!response.ok) throw new Error(response.status);
        return response.json();
      })
      .then((json) => setData(json))
      .catch((err) => setError(err.message));
  }, []);

  if (error) return <p>Error: {error}</p>;
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

export default App;

For a React-focused walkthrough, see How to Call Web APIs with the useEffect Hook in React.

Fetch API in Vue.js

In Vue 3, call fetch() inside onMounted() or the Options API mounted() hook:

<script>
export default {
  data() {
    return { data: null, error: null };
  },
  async mounted() {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      if (!response.ok) throw new Error(response.status);
      this.data = await response.json();
    } catch (error) {
      this.error = error.message;
    }
  }
};
</script>

Many Vue projects use Axios instead. See Vue.js REST API with Axios.

Fetch API in Angular

Angular ships HttpClient for most production apps. You can still call native fetch() in a component when you want a dependency-free call:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-data',
  template: '<p>{{ data | json }}</p>'
})
export class DataComponent implements OnInit {
  data: unknown;

  async ngOnInit() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) throw new Error(String(response.status));
    this.data = await response.json();
  }
}

1. What is JavaScript Fetch API?

The JavaScript Fetch API is a built-in interface for making HTTP requests from browser JavaScript and from Node.js 18+. fetch() returns a Promise that resolves to a Response object. You read the body with methods like .json() or .text(). It replaced XMLHttpRequest for most new front-end code.

2. How do you fetch data from an API in JavaScript?

Call fetch() with the API URL, check response.ok, then parse the body:

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    if (!response.ok) throw new Error(response.status);
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

The same pattern works in Node.js 18+ without extra packages. To test endpoints from the command line, see How to Use Wget to Download Files and Interact with REST APIs.

3. Which is better, Ajax or Fetch?

For new browser code, Fetch is the better default. It is native, Promise-based, and does not require jQuery. Ajax (via XMLHttpRequest or $.ajax()) still fits legacy pages that already depend on jQuery. Fetch gives you a smaller runtime footprint and matches modern async/await style. Ajax wrappers can feel familiar if your codebase already centers on jQuery.

4. What are the disadvantages of Fetch API?

Fetch does not reject on HTTP error status codes, so you must check response.ok yourself. It does not parse JSON automatically, does not include request interceptors, and does not report upload or download progress. Timeouts require AbortController. For apps that need those features out of the box, a library like Axios is often simpler.

5. What is fetch() in JavaScript?

fetch() is the global function that starts a network request. The first argument is a URL string or Request object. The optional second argument is an options object with method, headers, body, and signal. It always returns a Promise. The Promise resolves with response headers even when the server returns an error code.

The JavaScript Fetch API is supported in all current major browsers and in Node.js 18+. You can send GET and POST requests, handle HTTP errors with response.ok, cancel slow calls with AbortController, and write cleaner code with async/await.

For larger projects, compare Fetch with Axios or GraphQL based on how much control you need over errors, caching, and data shape. See An Introduction to GraphQL when you want clients to request only the fields they need.

What’s next

Keep building with these JavaScript tutorials:

• How to Call Web APIs with the useEffect Hook in React
• React Axios tutorial
• How to Work with JSON in JavaScript
• Node.js Express basics
• How to Install Node.js on Ubuntu 22.04

Host your API and front end on DigitalOcean App Platform with automatic deploys from GitHub. For a dedicated Node.js server, start with a Droplet and follow How to Set Up a Node.js Application for Production on Ubuntu 22.04.