Accessing promise data from Node API inside React fetch call

Question

I'm putting together a React app that consumes data from a Node/Express REST API which is currently on my local machine. I've got a simple res.json returning a Sequelize object, and I'm accessing it through a service I made. Obviously, I'm going to be putting the object in state eventually, but I'm currently having difficulty accessing the values.

const options = {
    method: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    body: JSON.stringify({email: "matthewharp@gmail.com", password: "M1nerals"})
};
fetch('http://localhost:3000/users/sign_in', options)
    .then(response => console.log(response.json()));

I'm getting the results in the console, but they're stuck in the [[PromiseValue]].

I must be missing some kind of async step, but I'm not sure what.

`fetch('http://localhost:3000/users/sign_in', options).then(response => response.json()).then(data => console.log(data));` — zero298, Feb 19 '19 at 20:56
Related: [JSON.parse() Vs. .json()](https://stackoverflow.com/q/48295439/691711) — zero298, Feb 19 '19 at 20:59

score 0 · Answer 1 · answered Feb 19 '19 at 20:56

0

The json method returns a promise, which you also need to await. So do:

fetch('http://localhost:3000/users/sign_in', options)
    .then(response => response.json())
    .then(obj => console.log(obj));

answered Feb 19 '19 at 20:56

trincot

317,000
35
244
286

score 0 · Answer 2 · answered Feb 19 '19 at 20:57

0

You're having this error because response.json() return a promise.

you need to do fetch('http://localhost:3000/users/sign_in', options) .then(response => response.json()) .then(res => console.log(res));

answered Feb 19 '19 at 20:57

Nathan Schwarz

631
5
19

score 0 · Answer 3 · answered Feb 19 '19 at 21:00

You need to return the promise from the fetch call or else you need to act on it in the then for the json promise.

const options = {
    method: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    body: JSON.stringify({email: "matthewharp@gmail.com", password: "M1nerals"})
};
return fetch('http://localhost:3000/users/sign_in', options)
    .then(response => {
         console.log(response.json())
         return response.json()
    }
);

or...

const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: JSON.stringify({email: "matthewharp@gmail.com", password: "M1nerals"})
    };
   fetch('http://localhost:3000/users/sign_in', options)
        .then(response => {
             console.log(response.json())
            response.json().then( result => {
               // whatever you're doing with the data here.
        }
    );

score 0 · Answer 4 · answered Feb 19 '19 at 21:00

Take a look at the fetch api: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

You need a separate then chained to take the json data once ready, and it will give you the values.

('http://localhost:3000/users/sign_in', options)
.then(function(response) {
    return response.json();
})
.then(function(myJson) {
    console.log(JSON.stringify(myJson));
});

Accessing promise data from Node API inside React fetch call

4 Answers4