выборка с ответом из предыдущей выборки

Question

В настоящее время я пытаюсь вызвать API с ответом предыдущей выборки API.

Сначала я вызываю метод fetchRoster. Затем, для каждого игрока в списке (НХЛ), я хотел бы использовать его идентификатор для получения его статистики из другой конечной точки.

var roster = await fetchRoster(8);


roster.map((player) => {
  console.log(player.person.id);
  console.log(player.person.fullName);

  var stats = getPlayerStats(player.person.fullName);
  console.log(stats);
})

Это метод fetchRoster (), который я вызываю первым для получения идентификаторов игроков.

async function fetchRoster(id) {
    try {
        //let response = await fetch(`${roster_base_url}/${id}/roster `);
        let response = await fetch('https://statsapi.web.nhl.com/api/v1/teams/' + id + '/roster');
        let responseJson = await response.json();
        return responseJson.roster;
    } catch(error) {
        console.log(error);
    }
}

Это метод getPlayersStats, который вызывается после получения идентификатора из первый ответ API.

export async function getPlayerStats(id) {
try {
    let response = await fetch('https://statsapi.web.nhl.com/api/v1/people/' + id + '/stats?stats=statsSingleSeason&season=20192020');
    let responseJson = await response.json();
    return responseJson.stats[0].splits[0].stat;
} catch(error) {
    console.log(error);
}
}

)

Однако, кажется, что первый ответ еще не прибыл при вызове 2-го API. У кого-нибудь есть решение для этого?

Можно ли вызывать await на getPlayersStats (), хотя он находится внутри .map, который не является asyn c?

Заранее спасибо, ребята

Answer 1

Мне кажется, что fetchRoster() должно быть async:

async function fetchRoster(id) {
    try {
        //let response = await fetch(`${roster_base_url}/${id}/roster `);
        let response = await fetch('https://statsapi.web.nhl.com/api/v1/teams/' + id + '/roster');
        let responseJson = await response.json();
        return responseJson.roster;
    } catch(error) {
        console.log(error);
    }
}

Тогда fetchRoster() вернет Promise, который работает с await.

Answer 2

var roster = await fetchRoster(8);


roster.map((player) => {

  var stats = getPlayerStats(player.person.fullName);
  // Here getPlayerStats is a promise. So it does not work
  console.log(stats); 
})

Вы можете попробовать что-то вроде этого

var roster = await fetchRoster(8);

var stats = await Promise.all(roster.map(player => getPlayerStats(player.person.fullName))

console.log(stats); // Now stats is a list of response.

Подробнее об этом: https://flaviocopes.com/javascript-async-await-array-map/