JavaScript 获取response.status 或response.text()，但不能同时获取两者

Question

我有两个

fetch

脚本，它们可以很好地工作，或者尽管我不知道如何组合它们。

第一个让我知道

response.status

是什么，尽管它以某种方式知道服务器的 HTTP 响应，但没有响应正文（是的，异步）：

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);});

第二个脚本允许我访问

response.text()

，尽管我无法访问

response.status

:

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

如何正确组合脚本，以便我可以访问

response.status

和

response.text()

after 收到请求？

Answer 1

    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);});

你可以这样做；需要先解决 Promise，然后才能访问该值

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

Answer 2

您可以使用

Promise.all

，它允许您在

fetch

返回一个 Promise 的同时处理多个 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
    
})

Answer 3

虽然 @shubhan 的代码可以工作，但更干净的方法可能是内置的 Promise 链，以避免 Promise 努力解决的回调地狱：

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

Answer 4

谢谢

    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);});

Answer 5

    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);});