Mastering Fetch: How to GET and POST JSON with JavaScript

JSON is a simple format for structured data. Example:

{
  "name": "公众号",
  "id": "FedJavaScript",
  "isVillain": true,
  "friends": []
}

This article shows how to use the fetch() API to get and post JSON data.

1. Calling fetch()

The Fetch API provides a JavaScript interface for accessing and manipulating HTTP resources. It replaces the older XMLHttpRequest and offers a simpler, promise‑based way to make network requests, including support for CORS and other HTTP concepts.

fetch() takes two arguments; a basic request is straightforward:

fetch('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwNjI5MTYyMw==')

The optional second argument configures the request, for example:

{
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'content-type': 'application/json'
  }
}

2. GET JSON

Fetch a list of names from /api/names:

async function loadNames() {
  const response = await fetch('/api/names');
  const names = await response.json();
  console.log(names); // logs [{ name: 'Joker'}, { name: 'Batman' }]
}

loadNames();

The default method is GET, but you can specify it explicitly:

const response = await fetch('/api/names', {
  method: 'GET'
});

Some APIs require you to indicate the desired response format via the Accept header:

const response = await fetch('/api/names', {
  headers: {
    'Accept': 'application/json'
  }
});

3. POST JSON

async function postName() {
  const object = { name: 'James Gordon' };
  const response = await fetch('/api/names', {
    method: 'POST',
    body: JSON.stringify(object)
  });
  const responseText = await response.text();
  console.log(responseText); // logs 'OK'
}

postName();

This pattern works for POST, PUT, or PATCH requests.

3.1 Explicit POST JSON

As with GET, you can set headers to declare the content type:

const object = { name: 'James Gordon' };

const response = await fetch('/api/names', {
  method: 'POST',
  body: JSON.stringify(object),
  headers: {
    'Content-Type': 'application/json'
  }
});

4. Conclusion

If you need to support browsers that lack native Fetch, use a Fetch polyfill.