react-native fetch return 状态码 + json

Question

我在 react-native 中使用 fetch 进行 API 调用。

我需要获取状态码（200、401、404）和响应数据。

获取响应数据的工作：

return fetch(url)
.then(response => {
  return response.json();
})
.then(res => {
  console.log("reponse :", res); // <-------- res is ok with data
 })    .catch(error => {
  console.error(error);
  return { name: "network error", description: "" };
});

现在我调整第一个然后获取状态代码但数据不是我除了

return fetch(url)
.then(response => {
  const statusCode = response.status;
  const data = response.json();
  return { statusCode, data };
})
.then(res => {
  console.log("reponse :", res); // <-------- i get a "promise"
 }).catch(error => {
  console.error(error);
  return { name: "network error", description: "" };
});

控制台日志：

  {statusCode: 200, data: Promise}

Answer 1

response.json()returns一个承诺，你要等到它实现。为此，您可以将 Promise.all 与两个元素的数组一起使用：statusCode 和 response.json() 调用：

return fetch(url)
  .then(response => {
    const statusCode = response.status;
    const data = response.json();
    return Promise.all([statusCode, data]);
  })
  .then([res, data] => {
    console.log(res, data);
  })
  .catch(error => {
    console.error(error);
    return { name: "network error", description: "" };
  });

//编辑您可以创建一个处理响应的函数

function processResponse(response) {
  const statusCode = response.status;
  const data = response.json();
  return Promise.all([statusCode, data]).then(res => ({
    statusCode: res[0],
    data: res[1]
  }));
}

并在 then()

中使用它

 return fetch(url)
    .then(processResponse)
    .then(res => {
        const { statusCode, data } = res;
        console.log("statusCode",statusCode);
        console.log("data",data);
    }) .catch(error => {
    console.error(error);
    return { name: "network error", description: "" };
  });

Answer 2

因为第一个then中API的响应是一个字符串而不是一个对象，你不能使用像response.status这样的响应。您应该首先将响应转换为 JSON 对象，然后像第一个示例一样将状态用作 response.status。代码应该可以正常工作：

return fetch(url)
.then(response => {
  const statusCode = response.status;
  let data;
  response.json().then(obj=>{
    data= obj;
    return { statusCode, data };
  });

})
.then(res => {
  console.log("reponse :", res); // <-------- i get a "promise"
 }).catch(error => {
  console.error(error);
  return { name: "network error", description: "" };
});

react-native fetch return 状态码 + json

react-native fetch return status code + json

promise

react-native

fetch-api