使用先前获取的响应进行获取

Question

我当前正在尝试使用先前 API 获取的响应来调用 API。

首先，我将该方法称为

fetchRoster

。然后，对于名单上的每个球员 (NHL)，我很乐意使用它的 id 从另一个端点获取他的统计数据。

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()

来获取玩家的ID。

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);
    }
}

这是从第一个 API 响应获取 id 后调用的方法

getPlayersStats

。

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);
}
}

)

但是，调用第二个API时，似乎第一个响应还没有到达。有没有人有解决办法？

是否可以在

getPlayersStats()

上调用await，尽管它在

.map

内部，这不是异步的？

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/