Получение данных по API и перенос в массив объектов

Question

Получение данных по API и перенос в массив объектов

Рейтинг: 0Ответов: 1Опубликовано: 30.03.2023

Всем привет! У меня есть 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

api javascript fetch массивы foreach

Источник: Stack Overflow на русском

Answer 1

▲ 0

Проблема заключается в том, что 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, после чего обращаемся к первому элементу.

Получение данных по API и перенос в массив объектов

Ответы