danielchistyakov
@danielchistyakov
Frontend Developer

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

Доброго времени суток, данный код выполняется очень долго, соответственно макет сайта двигается после окончания загрузки основного контента. У кого-нибудь есть идеи по оптимизации? Цикл 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 })
    }
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
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 })
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Могилев
от 2 800 до 3 300 $
05 мар. 2021, в 20:30
5000 руб./за проект
05 мар. 2021, в 20:08
1000 руб./за проект
05 мар. 2021, в 18:46
10000 руб./за проект