Reading JSON

Learn to read the response body with response.json().

The body is read separately

When a fetch call completes, the Response object holds only the status code and headers. The body of the response is a stream and is read with its own methods.

const response = await fetch(url);
const body = await response.text();

text() gives the body as plain text. It also returns a Promise, so you put await in front of it. The body is not read until you ask for it; that is why you wait first for fetch, then for the body.

Two awaits

In a fetch request you typically use await twice: the first waits for the request to finish, the second waits for the body to be read.

async function load() {
  const response = await fetch(url);
  const body = await response.text();
  console.log(body);
}

Keeping the two steps separate gives you flexibility: you can check response.status first to see whether the request succeeded, then read and use the body. The body can be read only once; a second call to text() throws.

Exercise Read the response and the body

The url variable holds an address. Use await fetch(url) to put the response into a response variable, and await response.text() to put the body into a body variable. Then log body with console.log.

Show example solution

const response = await fetch(url);
const body = await response.text();
console.log(body);

Test yourself

Read the body as text

const body = await response.____();

Show answer

const body = await response.text();

Match methods to their meanings

fetch(url)

Sends the request
response.text()

Reads the body as text
response.status

Gives the status code
What does response.text() return?
```
const body = await response.text();
```
- A Promise
- A number
- An array
- true or false
Show answer

A Promise — Correct! text() returns a Promise; you wait for the result with await.

Next lesson: HTTP headers

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies