Fetch возвращает undefined при импорте
У меня есть функция, которая извлекает данные из URL-адреса и должна их возвращать:
const fetchTableData = () => {
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
return data;
})
}
export default fetchTableData;
Проблема в том, что когда я импортирую эту функцию и пытаюсь ее использовать, она всегда возвращает undefined.
Когда я консоль регистрирую данные внутри самой функции, вы можете видеть, что они доступны. Функция просто не работает, когда я пытаюсь ее импортировать.
В чем проблема? Почему так работает?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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;
Замечательно, работает как шарм. Спасибо! Не могли бы вы добавить напоминание о том, что таким образом fetchTableData() возвращает обещание и к его данным необходимо получить доступ с помощью другого then? Это сэкономило бы пару минут другим новичкам, вроде меня, которые задаются этим вопросом.
componentDidMount () {const data = fetch ("локальный: 4000 / профиль / адрес ") .then ((res) => {res = res.json ();}) .then ((res) => {return res;}); console.info ( data);} На консоли отображается: Promise {<pending>} прото: Promise [[PromiseState]]: «выполнено» [[PromiseResult]]: undefined, пожалуйста, помогите, заранее спасибо
Вам нужно либо сохранить данные в глобальной переменной, либо назначить любую переменную для выборки, чтобы получить возвращаемые данные.
//First way
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
console.info("data",data);
});
//Second way
let binData = null;
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
binData = data;
console.info("binData", binData);
});
Вот рабочий пример.
В вашем коде вы не возвращались из функции 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;
Теперь происходит следующее:
- Ответ, возвращаемый второй функцией
then(), возвращает данные. - Мы сохраняем эти данные в переменной с именем
myResponse. - Теперь мы возвращаем это значение из функции
fetchTableData.
Вы должны добавить код, в котором вы его реализовали