获取response.json()和response.status

时间:2017-11-13 14:57:01

标签: javascript promise fetch

这是使用body.json()并获取状态代码的唯一方法吗?

let status;

return fetch(url)
    .then((response => {
         status = response.status;
         return response.json()
     })
    .then(response => {
        return {
            response: response,
            status: status
        }
    });

这不起作用,因为它在响应字段中返回一个promise:

.then((response)=> {return {response: response.json(), status: response.status}})

5 个答案:

答案 0 :(得分:27)

您的状态在第二个then中不可见。您可以在单then中获取这两个属性。

json()会向您返回一个新的Promise,因此您需要在该函数的结果的then内创建您的对象。如果你从一个函数返回一个Promise,它将被实现,并将返回履行的结果 - 在我们的例子中是对象。



fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(r =>  r.json().then(data => ({status: r.status, body: data})))
.then(obj => console.log(obj));




答案 1 :(得分:6)

上周我遇到了完全相同的问题。 .json方法返回对JSON的承诺,而不是JSON本身。如果要同时访问响应和JSON,则需要使用这样的嵌套闭包:

fetch(...)
    .then(response => {
        response.json().then(json => {
            // code that can access both here
        })
    })

由于传递给json承诺的回调是在fetch承诺的回调中创建的,因此它也可以访问response

您可能希望创建一个处理JSON和错误情况的函数,然后将其重用于所有提取。例如,像这样:

function fetchHandler(response) {
    if (response.ok) {
        return response.json().then(json => {
            // the status was ok and there is a json body
            return Promise.resolve({json: json, response: response});
        }).catch(err => {
            // the status was ok but there is no json body
            return Promise.resolve({response: response});
        });

    } else {
        return response.json().catch(err => {
            // the status was not ok and there is no json body
            throw new Error(response.statusText);
        }).then(json => {
            // the status was not ok but there is a json body
            throw new Error(json.error.message); // example error message returned by a REST API
        });
    }
}

答案 2 :(得分:2)

使用两个'对我来说似乎是不必要的。

异步/等待可以很轻松地完成工作。

    fetch('http://test.com/getData')
      .then( async (response) => {

        // get json response here
        let data = await response.json();
        
        if(response.status === 200){
         // Process data here
        }else{
         // Rest of status codes (400,500,303), can be handled here appropriately
        }

      })
      .catch((err) => {
          console.log(err);
      })

答案 3 :(得分:0)

你试过这个吗?

return fetch(url)
    .then((r)=> {return {response: r.json(), status: r.status}})

答案 4 :(得分:0)

我认为最干净的方法是使用所需的片段创建Promise.all()。

.then(response => Promise.all([Promise.resolve(response.ok), response.text()]))

可以写成更短的

.then(response => Promise.all([response.ok, response.text()]))

promise返回一个包含所有结果的数组

.then(data => ({ status: data[0], response: data[1] }))