How to return the fetched API status code and response to the next step in JavaScript?

Question

I'm using an API which returns correct HTTP code and one message related to that status code as result. I could find this solution in StackOverflow:

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(// ... I need status code and error message here

but for this case, I've to use response.json() to get the error's message. So, I need a trick to return json data and status code to the next step then handle message alert.

I mean, there is not any message at first time and I've not access to the status code at next step to handle alert box's color.

Answer 1

The quick and dirty way is to nest then calls.

return response.json().then(parsed_json => [response.status, parsed_json])

The clearer way is to rewrite your code to use await so that all the variables remain in scope and you don't need to return them explicitly.

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