Получение данных по API и перенос в массив объектов
Всем привет! У меня есть fetch запрос который получает массив объектов, вот как он выглядит
[{symbol: 'BTCUSDT', bidPrice: '28385.87000000', bidQty: '1.62422000', askPrice: '28385.88000000', askQty: '6.30315000'}] я его извлекаю из массива и добавляю его в свой, но когда я обращаюсь к своему массиву arr[0] то он выдает undefined в чем проблема? Как ее решить?
async function getData (url) {
const result = await fetch(`${url}`);
if(!result.ok) {
throw new Error(`Error status:" ${res.status} from ${res.url}`);
}
return result.json();
}
const binanceSymbols = ["BTCUSDT", "ETHUSDT", "BNBUSDT"];
let arr = [];
binanceSymbols.forEach((item) => {
getData(`https://api.binance.com/api/v3/ticker/bookTicker?symbols=["${item}"]`).then((data) => {
arr.push(...data);
})
})
console.log(arr[0]); // undefinedОтветы (1 шт):
⚡ Вероятно, этот ответ создан с использованием ChatGPT.
Проблема заключается в том, что getData() возвращает данные асинхронно, поэтому в момент обращения к arr[0] запрос еще не завершен и массив пустой. Чтобы решить эту проблему, необходимо дождаться завершения всех Promise-объектов, возвращаемых внутри цикла forEach().
Одним из способов решить проблему может быть использование метода Promise.all(), который позволяет дождаться завершения массива Promise-объектов и затем выполнить некоторое действие. В Вашем случае это будет выглядеть так:
async function getData (url) {
const result = await fetch(url);
if(!result.ok) {
throw new Error(`Error status: ${res.status} from ${res.url()}`);
}
return result.json();
}
const binanceSymbols = ["BTCUSDT", "ETHUSDT", "BNBUSDT"];
let arr = [];
// Создаем массив Promise-объектов для запросов
const promises = binanceSymbols.map((item) => {
return getData(`https://api.binance.com/api/v3/ticker/bookTicker?symbols=["${item}"]`);
});
// Дожидаемся завершения всех Promise-объектов
Promise.all(promises)
.then((data) => {
// Объединяем все данные в один массив
arr = data.flat();
console.log(arr[0]); // Выводим первый элемент массива
})
.catch((err) => {
console.error(err);
});
В данном случае мы создаем массив Promise-объектов promises, заполняем его результатами выполнения функции getData() и дожидаемся их завершения с помощью метода Promise.all(). Объединяем все данные в массив arr, после чего обращаемся к первому элементу.