can't get response status code with JavaScript fetch [duplicate]

Question

I'm trying to create a login form. when I'm testing the service with Postman, I will get a body object with status code and etc.

But, with JavaScript fetch, I can't get body object and I just received an error:

export const login = (username,password) => {
    return dispatch=>{
        const basicAuth = 'Basic ' + btoa(username + ':' + password);
        let myHeaders = new Headers();
            myHeaders.append('Authorization', basicAuth);
            myHeaders.append('Content-Type', 'application/json');      
            fetch(`${baseUrl}api/user/login`, {
                withCredentials: true,
                headers: myHeaders
            })
            .then(function (response) {
                return response.json();
            })
            .then(function (json) {
                dispatch(setLoginInfo(json))
            })
            .catch(err =>{
                console.log(err)
                 dispatch(loginFailed())
            });
    }

}

I need to get status code in fetch.

Answer 1

The status code is the status property on the response object. Also, unless you're using JSON with your error responses (which some people do, of course), you need to check the status code (or the ok flag) before calling json:

fetch(`${baseUrl}api/user/login`, {
    credentials: "include", // ¹ See note below
    headers: myHeaders
})
.then(function(response) {
    console.log(response.status); // Will show you the status
    if (!response.ok) {
        throw new Error("HTTP status " + response.status);
    }
    return response.json();
})
.then(// ...

Not checking that the request succeeded is such a common mistake I wrote it up on my anemic old blog.

---

¹ You had withCredentials: true, but the documentation says it's credentials: "include". (Thank you aderchox for pointing that out.)

Answer 2

The status is present in the response object. You can get it inside your first then block

.then(function (response) {
    console.log(response.status);
    return response.json();
})

Since you are returning response.json(), the subsequent then and catch only gets the result of response.json() which is the body of the response.