How can i get errors value inside Promise object which return from Fetch Api?

Question

I have my fetch request like this.

fetch(deafaultUrl + '/v1/users/',
        {
            headers: {
                'Content-Type': 'application/json'
            },
            method: "POST",
            body: JSON.stringify(userInfoParams)
        })
        .then(function(response) {
            console.log(response);
            console.log(response.json());

            // not working never go into this function
            response.json().then(function(value) {
                console.log('access promise');
                console.log(value); // "Success"
            });

            if (response.status !== 200 && response.status !== 201) {
                throw new Error("Bad response from server");
            }
        })
        .then(function(json){

            console.log("succeed json re");
            console.log(json);
            dispatch(update_user(json));

        }) 

So when i console this console.log(response.json());

I got this

But it seems like Promise function doesnot workout.

So how can i get errors Object inside [[PromiseValue]]?

Thanks!

Answer 1

To get the error from the promise, you can do it like this:

promise.then(function(data) {
  }, function(error) {...}

OR

To got promise error you can also use .catch() block

 .then(){...}
 .catch(){..}

Never going to this part because server already sent the response

.then(function(response) {
            console.log(response);
            console.log(response.json());

            // not working never go into this function
            response.json().then(function(value) {
                console.log('access promise');
                console.log(value); // "Success"
            });

You can write your code in this way:

fetch(deafaultUrl + '/v1/users/', {
        headers: {
            'Content-Type': 'application/json'
        },
        method: "POST",
        body: JSON.stringify(userInfoParams)
    })
    .then(function(response) {
        // if request is successful
    }
    .catch(err){
         // if got error
     }
    });

Answer 2

Here is the documentation of then(...)

You should use it like this :

p.then(function(value) {
   // fulfillment
  }, function(reason) {
  // rejection
});

Then your code will look like this

fetch(deafaultUrl + '/v1/users/', {
        headers: {
            'Content-Type': 'application/json'
        },
        method: "POST",
        body: JSON.stringify(userInfoParams)
    })
    .then(function(response) {
        //Land here if request is successful
        console.log(response);

        if (response.status !== 200 && response.status !== 201) {
            throw new Error("Bad response from server");
        }
    }, function(error){
        //Land here if request has an error
        console.log(error);
    });

Answer 3

I found the solution that response.json() can only read once if i get of console.log(response.json()); it works fine.