How to return a response from a fetch in javascript

Question

I am having trouble returning the response for a API call in my React Native project.

let response = fetch('http://3.133.123.120:8000/auth/token', {
    method: "POST",
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        client_id: 'NTMtzF7gzZPU9Ka35UFsDHvpR8e4D1Fy4OPRsurx',
        grant_type: 'password', 
        username: user, 
        password: pass, 
    })
})
.then((response) => response.json())
.then((response) => this.setState({jsonData: response}))
.then(() => alert('resposne jsonData: ' + JSON.stringify(this.state)));
alert('resposne jsonData: ' + JSON.stringify(response))

The code above returns the correct response in the bottom .then() statement, however, I have not been able to use the data outside of the fetch() statement.

Anything I've tried to use outside of the fetch() (like my alert in bottom line) has given me the following...

{"_40":0,"_65":0,_55":null,"_72":null}

Please also note this is all inside a React class Component

If you want to use the respond outside fetch function, you should set the response as an async function, or use Promise. — Kuo-hsuan Hsu
Does this answer your question? How do I return the response from an asynchronous call? — ggorlen

sdotson sdotson · Accepted Answer · 2020-03-27T01:04:17

fetch returns a Promise: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

You already have access to the value in that final then. If you're looking for a way to use the value below without using a callback, you could consider async/await style and wrapping this code in a function like so:

const fetchData = async () => {
  const results = await fetch() // put your fetch here
  alert(results.json());
};

fetch info: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

async/await info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

How to return a response from a fetch in javascript

1 Answers