Как получить данные, возвращаемые из обещания fetch ()?

1

У меня возникают проблемы с переносом головы по возврату данных json из вызова fetch() в одну функцию и сохранение этого результата в переменной внутри другой функции. Вот где я делаю вызов 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 (что я предполагаю, потому что вызов async fetch еще не завершился, когда вы пытаетесь присвоить возвращаемое значение jsonData я могу подождать достаточно долго, чтобы данные были возвращены из вызова выборки, так что Я могу правильно сохранить его внутри jsonData?

Теги:
react-native

3 ответа

2
Лучший ответ

всегда 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
}
Поделиться
  • 0
    Когда я пытаюсь это сделать, я получаю сообщение об ошибке « Cannot read property of 'then' of undefined удается Cannot read property of 'then' of undefined в строке activitiesActions.checkUserHosting(theEmail).then(function(data) . Любая идея, что это может быть и как исправить Это?
  • 1
    Вы использовали return fetch(... & return response.json()... ?
Показать ещё 1 комментарий
2

Вы частично правы. Это потому, что вы пытаетесь получить результат этого асинхронного вызова синхронно. Единственный способ сделать это - это то же самое, что вы имеете дело с любым другим обещанием. Через. .then callback. Итак, для вашего фрагмента:

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

Любая функция, зависящая от асинхронной операции, сама должна стать асинхронной. Так что там никакой возможности избежать использования .then для чего - либо, что требует использования checkUserHosting функции.

Поделиться
  • 0
    То же, что и ответ от ET-CS. Когда я пытаюсь это сделать, я получаю сообщение об ошибке «Не удается Cannot read property 'then' of undefined . Почему это происходит?
  • 0
    Как упоминалось в другом ответе, верните свое обещание из checUserHosting , например, return fetch...
0

Вы можете использовать новый синтаксис 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;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню