如何从fetch()Promise返回数据

Question

我很难将我的头缠绕在一个函数中返回fetch（）呼叫的json数据，并存储该函数，从而导致另一个功能内部的变量。这是我将fetch（）调用给我的API的地方：

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中？

Answer 1

始终return如果您希望它能起作用：-checkUserHosting应该返回承诺 - 在您的情况下，它是 return a 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);
            }) 
        });
}

并在您的主要代码中捕获它。然后。

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
}

Answer 2

你是部分正确的。这是因为您试图以同步方式获得这种异步呼吁的结果。做到这一点的唯一方法是您处理其他任何承诺的方式。通过.then回调。因此，对于您的片段：

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

任何取决于异步操作的函数本身都必须变得异步。因此，无法使用.then来使用checkUserHosting函数的任何内容。

Answer 3

您可以使用新的ES6和ES7语法，而其他人编写的内容也正确，但这可以更可读和清洁，

您正在尝试同步获取Aysnc值，在此处jsonData将不确定，因为，您在async函数（CheckUserhosting）完成执行之前，移至下一行执行（CheckUserhosting），可以写如下

写下。

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

，您可以使用像This

的新语法在不同的不同语法中编写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;
}