如何获取从 fetch() Promise返回的数据？

IT技术 javascript react-native
2021-03-06 13:43:10

我无法从一个函数中的 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.将其存储在jsonData?

3个回答

永远return的Promise太多，如果你想让它工作： -checkUserHosting应返回一个Promise-在你的情况下，它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
}
当我尝试这样做时，我收到一条错误消息，Cannot read property of 'then' of undefined显示在行上activitiesActions.checkUserHosting(theEmail).then(function(data)。知道这可能是什么以及如何解决吗？
2021-04-24 13:43:10
我忘了回拨 fetch() 的电话……非常感谢您的帮助！
2021-04-29 13:43:10
最后一个例子是无论如何返回一个Promise，它假设返回值而不是一个Promise，我确实 await response.text() 并返回另一个Promise，我想要单独的值，这根本不起作用。
2021-05-01 13:43:10
你用过return fetch(...&return response.json()...吗？
2021-05-07 13:43:10

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

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

任何依赖于异步操作的函数本身都必须成为异步的。因此，.then对于需要使用该checkUserHosting函数的任何内容都不能逃避使用。

正如在另一个答案中提到的，返回你的PromisechecUserHosting，例如return fetch...
2021-04-26 13:43:10
与 ET-CS 的答案相同。当我尝试这样做时，我收到一个错误消息Cannot read property 'then' of undefined。为什么会这样？
2021-05-03 13:43:10

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

您正在尝试同步获取 aysnc 值，这里jsonData将是未定义的，因为您在 async 函数（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;
}
其它你可能感兴趣的问题
上一篇当被其他弹性项目包围时，在容器中居中弹性项目 下一篇ES6 Promise不更新 AngularJS DOM