Обрабатывать один и тот же запрос несколько раз

Question

Я создаю глупую музыкальную викторину для обучения.Мне нужно заполнить свой взгляд связанной музыкой из deezer api .

Что мне нужно:

1. Получить случайный жанр
2. Получить 5 исполнителей из этого жанра (id + name)
3. Получить 1 музыку изкаждый исполнитель (имя + предварительный просмотр ссылки)

Итак, Я нашел свой путь до шага 3

Но я не могу узнать, как правильно отправитьодна и та же просьба 4 раза (для каждого художника), и мой исследователь пока ничего мне не дал

function deezer() {

    const reqGenero = new Request('https://api.deezer.com/genre');

    fetch(reqGenero)
        .then(response => {
            if (response.status === 200) {
                return response.json();
            } else {
                throw new Error('Erro ao pegar gêneros');
            }
        })
        .then(generos => {
            /* pega genero aleatorio */
            var generoId = generos.data[Math.floor(Math.random() * 10 + 1)].id;
            //console.log('\ngenero... ' + generoId);
            return fetch('https://api.deezer.com/genre/' + generoId + '/artists')
        })
        .then(response => {
            if (response.status === 200) {
                return response.json();
            } else {
                throw new Error('Erro ao pegar artistas');
            }
        })
        .then(artistas => {
            /* 1 música de 4 artistas */
            var artistasIds = [];
            for(var i = 0; i <= 4; i++) {   
                artistasIds.push(artistas.data[i].id);
                console.log('\nId: ' + artistasIds[i]);

                // CAN I SEND THIS REQUEST 4 TIMES?
                return fetch('https://api.deezer.com/artist/' + ids + '/top'); 
            }
        })         
        .catch(error => {
            console.error(error);
        });      
}

* Просим сообщить мне, если я делаю что-то действительно неправильно

Answer 1

Если использовать обещания явно (см. Ниже для async функций), я, вероятно, подхожу к этому так; см. *** комментарии для объяснения:

// *** Give yourself a helper function so you don't repeat this logic over and over
function fetchJson(errmsg, ...args) {
    return fetch(...args)
        .then(response => {
            if (!response.ok) { // *** .ok is simpler than .status == 200
                throw new Error(errmsg);
            }
            return response.json();
        });
}
function deezer() {
    // *** Not sure why you're using Request here?
    const reqGenero = new Request('https://api.deezer.com/genre');
    fetchJson('Erro ao pegar gêneros', reqGenero)
        .then(generos => {
            /* pega genero aleatorio */
            var generoId = generos.data[Math.floor(Math.random() * 10 + 1)].id;
            //console.log('\ngenero... ' + generoId);
            return fetchJson('Erro ao pegar artistas', 'https://api.deezer.com/genre/' + generoId + '/artists')
        })
        .then(artistas => {
            /* 1 música de 4 artistas */
            // *** Use Promise.all to wait for the four responses
            return Promise.all(artistas.data.slice(0, 4).map(
                entry => fetchJson('Erro ao pegar música', 'https://api.deezer.com/artist/' + entry.id + '/top')
            ));
        })         
        .then(musica => {
            // *** Use musica here, it's an array of the music responses
        })
        .catch(error => {
            console.error(error);
        });      
}

Предполагается, что вы хотите использовать результаты в deezer. Если вы хотите от deezer до вернуть результаты (обещание четырех песен), тогда:

// *** Give yourself a helper function so you don't repeat this logic over and over
function fetchJson(errmsg, ...args) {
    return fetch(...args)
        .then(response => {
            if (!response.ok) { // *** .ok is simpler than .status == 200
                throw new Error(errmsg);
            }
            return response.json();
        });
}
function deezer() {
    const reqGenero = new Request('https://api.deezer.com/genre');
    return fetchJson('Erro ao pegar gêneros', reqGenero) // *** Note the return
        .then(generos => {
            /* pega genero aleatorio */
            var generoId = generos.data[Math.floor(Math.random() * 10 + 1)].id;
            //console.log('\ngenero... ' + generoId);
            return fetchJson('Erro ao pegar artistas', 'https://api.deezer.com/genre/' + generoId + '/artists')
        })
        .then(artistas => {
            /* 1 música de 4 artistas */
            // *** Use Promise.all to wait for the four responses
            return Promise.all(artistas.data.slice(0, 4).map(
                entry => fetchJson('Erro ao pegar música', 'https://api.deezer.com/artist/' + entry.id + '/top')
            ));
        });
        // *** No `then` using the results here, no `catch`; let the caller handle it
}

Версия функции async этой второй:

// *** Give yourself a helper function so you don't repeat this logic over and over
async function fetchJson(errmsg, ...args) {
    const response = await fetch(...args)
    if (!response.ok) { // *** .ok is simpler than .status == 200
        throw new Error(errmsg);
    }
    return response.json();
}
async function deezer() {
    const reqGenero = new Request('https://api.deezer.com/genre');
    const generos = await fetchJson('Erro ao pegar gêneros', reqGenero);
    var generoId = generos.data[Math.floor(Math.random() * 10 + 1)].id;
    //console.log('\ngenero... ' + generoId);
    const artistas = await fetchJson('Erro ao pegar artistas', 'https://api.deezer.com/genre/' + generoId + '/artists');
    /* 1 música de 4 artistas */
    // *** Use Promise.all to wait for the four responses
    return Promise.all(artistas.data.slice(0, 4).map(
        entry => fetchJson('Erro ao pegar música', 'https://api.deezer.com/artist/' + entry.id + '/top')
    ));
}

Answer 2

Вы можете заменить заявление

// CAN I SEND THIS REQUEST 4 TIMES?
return fetch('https://api.deezer.com/artist/' + ids + '/top'); 

с

const fetchResults = [];    
artistasIds.forEach(function(ids){  
  fetchResults.push(fetch('https://api.deezer.com/artist/' + ids + '/top'));
});
return Promise.all(fetchResults);

в тогда условии, вы получите массив значений с лучшей музыкой от каждого исполнителя. Я не проверял данный API, но в идеале он должен работать.

Answer 3

Да, вы можете сделать 5 запросов (не 4, а 0-4) и ждать завершения каждого из них. Используйте Array.prototype.map для создания массива обещаний запросов (предпочтительнее, чем for-forEach и array.push)

и Promise.all ждать выполнения всех обещаний, которые вернут массив разрешенных ответов, если не произойдет сбоев.

.then(artistas => {
  /* 1 música de 4 artistas */
  var artistasIds = [];
  let ids = artistas.data.map(artist => artist.id).slice(0, 4);
  requests = ids.map(id => fetch(`https://api.deezer.com/artist/${id}/top`));
  return Promise.all(requests);
  }
}) 

Answer 4

Вы можете создать 4 запроса и подождать, пока все из них завершить , используя Promise # all .

.then(artistas => {
  /* 1 música de 4 artistas */
  const artistasPromises = artistas.data.map(artista =>
    fetch("https://api.deezer.com/artist/" + artista.id + "/top").catch(
      err => ({ error: err })
    )
  );
  return Promise.all(artistasPromises);
}).then(musicList => {
  console.log(musicList);
});

Обратите внимание на catch().Это гарантирует, что даже если выборка не удалась, другие результаты выборки не будут проигнорированы.Это из-за того, что Promise # all работает.Итак, вам нужно перебрать musicList и проверить, есть ли какой-либо объект формы { error: /* error object */ }, и игнорировать это при обработке списка.