使用先前提取的响应进行提取答案

【问题标题】：fetching with response from a previous fetch使用先前提取的响应进行提取
【发布时间】：2020-05-18 07:56:48
【问题描述】：

我目前正在尝试使用先前 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 中？

提前谢谢大家

【问题讨论】：

标签： javascript reactjs api web

【解决方案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() 将返回与await 一起使用的Promise。

【讨论】：

【解决方案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.

【讨论】：