Выборка возвращает неопределенный при импорте

Question

У меня есть функция, которая извлекает данные из URL и должна их возвращать:

const fetchTableData = () => {
fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })
}

export default fetchTableData;

Проблема в том, что когда я импортирую эту функцию и пытаюсь использовать ее, она всегда возвращает undefined.

Когда я консоль регистрирую данные внутри самой функции, вы можете видеть, что они доступны.Функция просто не работает, когда я пытаюсь ее импортировать.

В чем здесь проблема?Почему это так работает?

Answer 1

Вам нужно либо сохранить данные в глобальной переменной, либо назначить любую переменную для выборки, чтобы получить возвращаемые данные.

//First way
fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        console.log("data",data);
    });
    
//Second way
let binData = null;

fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        binData = data;
        console.log("binData", binData);
    });
    

Вот рабочий пример.

Answer 2

В вашем коде вы не возвращались из функции fetchTableData.Только со второго then() обратного вызова.Если у функции нет возвращаемого значения, будет возвращено undefined.

Попробуйте вместо этого:

const fetchTableData = () => {
const myResponse = fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })
return myResponse;
}

export default fetchTableData;

Теперь происходит следующее:

1. Ответ, возвращаемый второй функцией then(), возвращает данные.
2. Мы сохраняем эти данные в переменной с именем myResponse.
3. Теперь мы возвращаем это значение из функцииfetchTableData.

Answer 3

Попробуйте это =) Вы также должны вернуть что-то из функции fetchTableData.

const fetchTableData = () => {
  const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })

    return fetchedData;
}

export default fetchTableData;

Или вы можете просто вернуть его так:

const fetchTableData = () => {
      return fetch('https://api.myjson.com/bins/15psn9')
        .then(result => result.json())
        .then(data => {
            return data;
        })
    }

    export default fetchTableData;