react-native fetch().then() 返回对象 Object答案

【问题标题】：react-native fetch().then() returning object Objectreact-native fetch().then() 返回对象 Object
【发布时间】：2019-07-03 12:25:42
【问题描述】：

我正在做一个与 react-native 的示例代码非常相似的网络请求。

Networking.js

export default class Networking {

  static tryLogin() {

    return fetch('https://exampleserver.com')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson;
    })
    .catch((error) => {
      console.error(error);
    });

  }
}

我想检索 responseJson 并在另一个类中处理它，但是，.then((responseJson) 正在返回 objectObject 而不是我的 JSON。我正在使用Networking.tryLogin();调用此方法

当用alert(responseJson) 替换return responseJson 时，它按预期工作，所以它必须与返回有关。

编辑：在执行 console.log() 时，我得到：

 Promise {
   "_40": 0,
   "_55": null,
   "_65": 0,
   "_72": null,
}

【问题讨论】：

只是返回的对象太大，控制台无法显示吗？
请说明您是如何使用调用 tryLogin 的
您在哪里看到 objectObject 返回？像警报一样？还是您使用 React Native 调试器将其发送到控制台？
我正在调用该函数并警告它：alert(Networking.tryLogin()); 我在警告框中看到“objectObject”。但是在 console.log() 中是一样的
@spender 请看一下编辑。

标签： javascript react-native promise fetch return-value

【解决方案1】：

您正在tryLogin() 中返回一个 Promise。所以你需要在.then() 方法中访问它的值：

Networking.tryLogin().then(response => console.log(response));

除了在cmets中提出的问题，如react-native docs中解释的那样：

联网本质上是一种异步操作。 Fetch 方法将返回一个 Promise，这样就可以直接编写以异步方式工作的代码。

【讨论】：

我建议 OP 回到书本上了解 Promise 的工作原理，尤其是 async 和 await 如何在处理 Promise 时让生活变得非常轻松。
谢谢。当我已经在 tryLogin() 方法中有 .thens 时，为什么我要返回一个承诺？我需要做什么才能将响应保存到变量以便进一步处理它？
@j.Doe 请检查您问题的更新答案。为了保存响应，只需将其分配给在 then() 方法之外定义的变量。
@MohammadrezaFarahani 当然，但我如何检查请求是否已完成？我是否在then() 方法之外分配一个标准值并让while 循环等待值发生变化？
@j.Doe 当我在答案中提到的then 块被调用时，这意味着请求已经完成。不需要其他陈述。为了更容易使用，如支出者建议的那样，您应该使用 async 和 await。

【解决方案2】：

试试Promise.all()。

我有一个与 OP 类似的问题，并找到了this article。有点旧，但工作！重点是如下代码：

const apiRequest1 = fetch('api.example1.com/search').then(function(response){ 
         return response.json()
});
const apiRequest2 = fetch('api.example2.com/search').then(function(response){
         return response.json()
});
const combinedData = {"apiRequest1":{},"apiRequest2:{}};
Promise.all([apiRequest1,apiRequest2]).then(function(values){
    combinedData["apiRequest1"] = values[0];
    combinedData["apiRequest2"] = values[1];
    return combinedData;
});

【讨论】：