26

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.

Postman Result

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

fetch console log

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.

VLAZ
  • 26,331
  • 9
  • 49
  • 67
ali mottaghian
  • 310
  • 1
  • 4
  • 11
  • 2
    You got a CORS error here … so go read up on what that means, and what needs to be done to fix it. – 04FS Feb 27 '19 at 08:40
  • I put the answer here please check. https://stackoverflow.com/a/66940824/12553450 – Mafei Apr 04 '21 at 11:34
  • you can try this: `async function fetchText() { let response = await fetch('url.php'); console.log(response.status); // 200 console.log(response.statusText); // OK if (response.status === 200) { let data = await response.text(); console.log(data); } }` – Lepy Dec 10 '21 at 22:03

2 Answers2

58

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

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 2
    when my request gets failed, nothing in .then() will run. it goes straight to catch() – ali mottaghian Feb 27 '19 at 08:37
  • 2
    @alimottaghian - The promise from `fetch` only rejects on **network errors**, not HTTP errors. So it will reject if you can't send the request to the server, but it does not reject if the server responds with (say) a 404. – T.J. Crowder Feb 27 '19 at 08:56
  • 1
    With ES6 fetch use: `credentials: 'include'` and not `withCredentials: true`. – aderchox Apr 22 '22 at 02:08
  • 1
    @aderchox - Thanks for pointing that out! I just copied what the OP had, but you're right. I've flagged that up in the answer as well. (Side note: `fetch` has nothing to do with "ES6", it's the web platform, not JavaScript.) – T.J. Crowder Apr 22 '22 at 07:19
8

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.

Panther
  • 8,938
  • 3
  • 23
  • 34