Fetch response.status or response.text() though not both

Question

I have two fetch scripts that work great at either or though I can't figure out how to combine them.

This first one allows me to know what the response.status is however even though it somehow knows the server's HTTP response while not having the response body (yeah, asynchronous):

fetch(url).then(function(r) { if (r.status != 200) {alert('Error: unable to load preview, HTTP response '+r.status+'.');} else { console.log(r.text());//Promise { <state>: "pending" }, no good. } }).catch(function(err) {alert('Error: '+err);});

This second script allows me to access the response.text() though I have no access to the response.status:

fetch(url).then(r => r.text()).then(function(r) { console.log(r);//response text. });

How do I combine the scripts properly so I have access to both the response.status and response.text() after the request has been received?

You can create a funciton at first then handler to do more than just returning r.text() — Shubham Srivastava
– Shubham Srivastava, Commented Dec 16, 2020 at 6:57
@ShubhamSrivastava Could you post please? If it works I'd be happy to accept/vote. — John
– John, Commented Dec 16, 2020 at 6:58
Whoa, I didn't expect three answers! I'll properly go through everything later tomorrow. Thank you for the help! 😄︀ — John
– John, Commented Dec 16, 2020 at 7:45

agilgur5 · Accepted Answer · 2025-08-29 08:40:55Z

While @shubhan's code will work, a cleaner approach may be Promise chaining, to avoid callback hell which Promises strive to solve:

fetch(url) .then(response => { if (response.status >= 400) throw { code: response.status } return response.text() // if you return a promise in a `then` block, the chained `then` block will get the resolved result }) .then(text => { console.log(text) // handle successful event }) .catch(err => { // if at any stage of the promise chain, if a promise rejects, or throws, it will be caught by the `catch` block if (err.code) { // handle status error } else { // handle other errors } })

Shubham Srivastava · Accepted Answer · 2020-12-16 07:01:20Z

 fetch("https://api.thecatapi.com/v1/images/search").then(function(r) { if (r.status != 200) { alert('Error: unable to load preview, HTTP response '+r.status+'.'); return } r.text().then(txt => console.log(txt)) }).catch(function(err) {alert('Error: '+err);});

You can do it like this; Promise need to be resolved before you can access the value

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Don't forget to return the inner promise chain so that errors from it will still be handled by the .catch() in the end

Yves Kipondo · Accepted Answer · 2020-12-16 07:03:51Z

You can use Promise.all which allows you to handle many Promise at the same time as fetch return a promise.

const firstFetch = fetch(url); const secondFetch = fetch(url); Promise.all([firstFetch, secondFetch]).then(([firstResponse, secondResponse]) => { // Here you can have access to both firstResponse.status // And secondResponse.text })

Doing two requests to the same url, just to access both the status and the body of the response, is a horrible suggestion. And the code doesn't even work, secondResponse.text() still is just a promise in the .then() callback.

Collectives™ on Stack Overflow

Fetch response.status or response.text() though not both

3 Answers 3

Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Related