How can I get the error value inside the Promise object that is returned from Fetch Api?

Question

I have a fetch request as follows.

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 it

But it seems that the Promise function is not doing workouts.

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

Thank!

Answer 1

To get a promise, you can do it.

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

OR

You can also use the .catch () block to get the promise.

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

Never skip to this part because the server has already sent a 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 as follows:

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 then(...)

You should use it as follows:

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

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 a solution that response.json()can only read once, if I get from console.log(response.json());, it works fine.