javascript 如何获取fetch()promise返回的数据?

cs7cruho  于 2022-11-27  发布在  Java
关注(0)|答案(3)|浏览(403)

我在一个函数中从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调用还没有完成。我如何等待足够长的时间以使数据从fetch调用返回,以便我可以正确地将其存储在jsonData中?

bpsygsoo

bpsygsoo1#

如果你想让它起作用的话,你也要遵守承诺:- checkUserHosting应该返回一个承诺-在你的例子中它returnpromise其中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);
            }) 
        });
}

然后在主代码中使用():

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

编辑:
或者更好的办法是,使用@ SenthilBalaji建议的新语法:

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
}
2izufjch

2izufjch2#

你说对了一部分。这是因为你试图以同步的方式获得这个异步调用的结果。唯一的方法是你处理其他承诺的方法。通过一个.then回调。所以对于你的代码片段:

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

任何依赖于异步操作的函数本身都必须是异步的,所以对于任何需要使用checkUserHosting函数的函数,都不能逃避使用.then

omvjsjqw

omvjsjqw3#

您可以使用新的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;
}

相关问题