Reading time·5 min
If you got the error "fetch: Failed to execute 'json' on 'Response'", click on the second subheading.
The "response.json is not a function" error occurs when:
json()
method on an object that is not the Response
object
that resolves from the promise the fetch()
method returns.json()
method on the return value of calling an axios
method.json()
method on a valid Response
objectTo solve the error, make sure to only call the json()
method on the Response
object that resolves from a valid call to the fetch()
method.
async function getUser() { try { const response = await fetch('https://randomuser.me/api/'); if (!response.ok) { throw new Error(`Error! status: ${response.status}`); } // ✅ call response.json() here const result = await response.json(); return result; } catch (err) { console.log(err); } } console.log(await getUser())
The code sample shows a complete example of using the fetch() method to make a call to a remote API.
And here is an example of calling the response.json()
method if you use the
.then()
syntax.
function getUser() { return ( fetch('https://randomuser.me/api/') // ✅ call response.json() here .then(response => response.json()) .then(data => { console.log(data); }) .catch(err => { console.log(err); }) ); } getUser();
axios
, scroll down to the next subheading.The fetch()
method returns a Promise
that resolves to a Response
object.
The Response
object contains the json()
method that returns a promise that
resolves to a JavaScript object.
The json() method parses the JSON from the response to a native JavaScript object.
axios
If you use axios
, you don't have to call the json()
method on the response.
import axios from 'axios'; async function getUser() { try { const response = await axios.get('https://randomuser.me/api/', { headers: {'Accept-Encoding': 'gzip,deflate,compress'}, }); return response.data; } catch (err) { console.log(err); } } console.log(await getUser());
Axios takes care of parsing the response automatically, so we don't have to call any additional methods.
Access the data
property on the object to get the data from the response.
The data
property contains the response that was sent from the server.
Here is an example that uses the .then()
syntax instead of async/await
.
import axios from 'axios'; async function getUser() { return axios .get('https://randomuser.me/api/', { headers: {'Accept-Encoding': 'gzip,deflate,compress'}, }) .then(response => { console.log(response.data); }) .catch(err => { console.log(err); }); } await getUser();
Other properties on the axios
response object include:
status
- the status code of the server responsestatusText
- the HTTP status message of the response, e.g. OK
headers
- the HTTP headers the server responded withconfig
- the config that was provided to axios
for the requestrequest
- the request that generated this responseThe JavaScript fetch error "Failed to execute 'json' on 'Response': body
stream already read" occurs when the response.json()
method is called multiple
times.
To solve the error, make sure to only consume the fetch
response once.
Here is an example of how the error occurs.
function makeRequest() { return fetch('https://randomuser.me/api/').then(response => { console.log(response.json()); // ⛔️ Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read return response.json(); }); } makeRequest();
Notice that we called the reponse.json
method twice.
We first called the method in the call to console.log
and then called the
method in the return
statement.
The response.json
method takes a Response stream and reads it to completion.
As the error message states: "body stream already read".
To resolve the error, make sure to only call the response.json()
method once.
One way to solve the error is to return the call to response.json()
and chain
an additional .then()
call.
function makeRequest() { return fetch('https://randomuser.me/api/') .then(response => { return response.json(); }) .then(result => { console.log(result); }); } makeRequest();
The .json()
method returns a Promise that resolves to a JavaScript object, so
we can safely chain a .then()
call on the return value of the method.
Here is an example that uses the async/await
syntax.
async function makeRequest() { const response = await fetch('https://randomuser.me/api/'); const responseJSON = await response.json(); console.log(responseJSON); return responseJSON; } makeRequest();
The async/await
syntax is a bit more concise and intuitive.
We call the response.json()
method and store the result in a variable.
We can then safely console.log()
the variable without having to call the
response.json
method a second time.
If the error persists, use the
clone()
method to create a clone of the response object before calling json()
.
function makeRequest() { return fetch('https://randomuser.me/api/') .then(response => { return response.clone().json(); }) .then(result => { console.log(result); }); } makeRequest();
If, for some reason, you have to call the .json()
method on the response
multiple times, use the clone()
method to clone it each time.
function makeRequest() { return fetch('https://randomuser.me/api/') .then(response => { // 👇️ calling clone() here console.log(response.clone().json()); // 👇️ calling clone() here as well return response.clone().json(); }) .then(result => { console.log(result); }); } makeRequest();
The code sample doesn't raise an error because we used the clone()
method
before calling json()
each time.
Here is an example that uses the async/await
syntax with clone()
.
async function makeRequest() { const response = await fetch('https://randomuser.me/api/'); const responseJSON = await response.clone().json(); console.log(responseJSON); return responseJSON; } makeRequest();
Note that the clone()
method throws a TypeError if the response body has
already been used.
For example, running the following code sample causes an error.
async function makeRequest() { const response = await fetch('https://randomuser.me/api/'); // 👇️ this reads the stream console.log(response.json()); // ⛔️ Uncaught (in promise) TypeError: Failed to execute 'clone' on 'Response': Response body is already used const responseJSON = await response.clone().json(); console.log(responseJSON); return responseJSON; } makeRequest();
The purpose of the clone()
method is to enable you to call the json()
method
multiple times, however, you have to use the clone()
method to clone the
response object each time.
If you get the TypeError: Failed to fetch and CORS error, click on the link and follow the instructions.
You can learn more about the related topics by checking out the following tutorials: