如何获取从 fetch() 承诺返回的数据？答案

【问题标题】：How to get data returned from fetch() promise?如何获取从 fetch() 承诺返回的数据？
【发布时间】：2018-05-16 04:30:12
【问题描述】：

我无法解决从一个函数中的 fetch() 调用返回 json 数据并将结果存储在另一个函数内的变量中的问题。这是我对我的 API 进行 fetch() 调用的地方：

function checkUserHosting(hostEmail, callback) {
    fetch('http://localhost:3001/activities/' + hostEmail)
    .then((response) => { 
        response.json().then((data) => {
            console.log(data);
            return data;
        }).catch((err) => {
            console.log(err);
        })
    });
}

这就是我试图获得返回结果的方式：

function getActivity() {
    jsonData = activitiesActions.checkUserHosting(theEmail)
}

但是，jsonData 在这里始终是undefined（我假设这是因为尝试将返回值分配给jsonData 时异步获取调用尚未完成。我如何等待足够长的时间来获取数据从 fetch 调用中返回，以便我可以将其正确存储在 jsonData 中？

【问题讨论】：

How do I return the response from an asynchronous call?的可能重复

标签： javascript react-native

【解决方案1】：

如果你想让它工作，也总是return 承诺： - checkUserHosting 应该返回一个承诺 - 在你的情况下它是return 一个promise 哪个return 结果data。

function checkUserHosting(hostEmail, callback) {
    return fetch('http://localhost:3001/activities/' + hostEmail)
        .then((response) => { 
            return response.json().then((data) => {
                console.log(data);
                return data;
            }).catch((err) => {
                console.log(err);
            }) 
        });
}

并在主代码中的 .then() 中捕获它：

function getActivity() {
    let jsonData;
    activitiesActions.checkUserHosting(theEmail).then((data) => {
       jsonData = data;
    }        
}

编辑：

或者更好的是，使用 @Senthil Balaji 建议的新语法：

const checkUserHosting = async (hostEmail, callback) => {
 let hostEmailData  = await fetch(`http://localhost:3001/activities/${hostEmail}`)
 //use string literals
 let hostEmailJson = await hostEmailData.json();
 return hostEmailJson;
}

const getActivity = async () => {
 let jsonData = await activitiesActions.checkUserHosting(theEmail);
  //now you can directly use jsonData
}

【讨论】：

当我尝试执行此操作时，我在activitiesActions.checkUserHosting(theEmail).then(function(data) 行上收到一条错误消息Cannot read property of 'then' of undefined。知道这可能是什么以及如何解决吗？
你用过return fetch(... & return response.json()...吗？
我忘了返回对 fetch() 的调用...非常感谢您的帮助！
最后一个例子是返回一个承诺，它假设返回值而不是一个承诺，我等待 response.text() 并返回另一个承诺，我只想要这个值，这在全部。

【解决方案2】：

你说对了一部分。这是因为您试图以同步方式获取此异步调用的结果。做到这一点的唯一方法与处理任何其他承诺的方法相同。通过.then 回调。所以对于你的 sn-p：

function getActivity() {
    return activitiesActions.checkUserHosting(theEmail).then((jsonData) => {
        // Do things with jsonData
    })
}

任何依赖于异步操作的函数本身都必须变为异步的。因此，对于需要使用 checkUserHosting 函数的任何事情，都无法避免使用 .then。

【讨论】：

与 ET-CS 的答案相同。当我尝试执行此操作时，我收到一条错误消息 Cannot read property 'then' of undefined。为什么会这样？
如另一个答案中所述，从checUserHosting返回您的承诺，例如return fetch...

【解决方案3】：

你可以使用新的 ES6 和 Es7 语法，其他人写的也是正确的，但是这样可以更易读和干净，

你正在尝试同步获取aysnc值，这里jsonData将是未定义的，因为你在异步函数（checkUserHosting）执行完成之前移动到下一行执行，这可以写成如下

const getActivity = async () => {
 let jsonData = await activitiesActions.checkUserHosting(theEmail);
  //now you can directly use jsonData
}

您可以使用类似这样的新语法以不同的方式编写checkUserHosting

const checkUserHosting = async (hostEmail, callback) => {
 let hostEmailData  = await fetch(`http://localhost:3001/activities/${hostEmail}`)
 //use string literals
 let hostEmailJson = await hostEmailData.json();
 return hostEmailJson;
}

【讨论】：