Как оптимизировать данный код?

Question

[Даниил Чистяков]

Доброго времени суток, данный код выполняется очень долго, соответственно макет сайта двигается после окончания загрузки основного контента. У кого-нибудь есть идеи по оптимизации? Цикл for пришлось использовать из-за необходимости добавить в массив элементы из другого массива. Сайт на React.

async componentDidMount() {
        var response = await fetch("https://api.laut.fm/station/key/last_songs");
        const data1 = await response.json();
        const data2 = [];
        const array2 = [];
        for (var i = 0; i < 7; i++) {
            let response = await fetch("https://ws.audioscrobbler.com/2.0/?method=album.getInfo&artist=" + data1[i].artist.name.replace(' & ', ', ') + "&album=" + data1[i].album + "&api_key=apikey&format=json");
            data2[i] = await response.json();
            var date = new Date(data1[i].started_at)
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var array1 = { id1: data1[i].id, id2: data1[i].id + 1, artist: data1[i].artist.name, title: data1[i].title, cover: data2[i].album.image[4]["#text"], started_at: date.getHours() + ":" + minutes }
            array2[i] = array1
        }
        this.setState({ results: array2 })
    }

Comments

[Вадим]

Ну, как минимум, не делать await в цикле, а сгенерировать массив промисифицованных запросов, через тот же fetch, а потом через Promis.all() вызвать обработчик с результатом всех запросов

[Даниил Чистяков]

Вадим, Спасибо!

Answer 1

[Сергей Соколов]

async componentDidMount() {
    const lastSongsResponse = await fetch("https://api.laut.fm/station/key/last_songs");
    const lastSongs = await lastSongsResponse.json();
    lastSongs.length = Math.min(7, lastSongs.length);

    const promises = lastSongs.map((song) => new Promise((resolve, reject) => {
        const params = {
            method  : 'album.getInfo',
            artist  : song.artist.name.replace(' & ', ', '),
            album   : song.album,
            api_key : 'apikey',
            format  : 'json',
        };

        const url = "https://ws.audioscrobbler.com/2.0/?" + Object.keys(params).map((key) => `${key}=${params[key]}`).join('&');

        const cover = await fetch(url)
            .then((response) => response.json())
            .then((songData) => songData.album.image[4]["#text"])
            .catch(err => reject(err));

        const date = new Date(song.started_at);

        const songData = {
            id1        : song.id,
            id2        : song.id + 1,
            artist     : song.artist.name,
            title      : song.title,
            cover      : cover,
            started_at : date.getHours() + ':' + date.getMinutes().toString().padStart(2, '0')
        }
        
        resolve(songData);
    }));

    const results = await Promise.all(promises);

    this.setState({ results: results })
}

Comments

[Даниил Чистяков]

Не знаю как Вас благодарить, большое спасибо, Сергей Соколов!

[Сергей Соколов]

Даниил Чистяков, не за что! Смотрите, чтобы не нарушить частотные лимиты на api LastFM: тут, выходит, 7 запросов с одним ключом одновременно идёт. А если несколько человек откроют страницу.

[Даниил Чистяков]

Сергей Соколов, да, постараюсь не нарушить, а Вы случайно не знаете как обновлять значение в state в фоне, если поменялась информация в JSON за время нахождения на сайте (автообновление контента).
Кейс: сменилась песня в эфире.
Может предоставить нынешний код?

[Даниил Чистяков]

Сергей Соколов, и ещё маленький момент: а как вывести строчку с результатом в return, так как по ключу [[PromiseResult]] не выводится?

Строчка:

[[PromiseResult]]: "https://lastfm.freetls.fastly.net/i/u/300x300/78dbc331c86c65637ae61d509beb4e04.png"