javascript - 如何获取从 fetch() promise 返回的数据？

Question

我无法集中精力从一个函数中的 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 中？

Answer 1

总是返回 promise 如果你想让它工作:- checkUserHosting 应该返回一个 promise - 在你的例子中，它返回一个promise，它返回结果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
}