reactjs - React useEffect 和 Axios：在“then”中进行链式 API 调用

问题描述

我正在使用 NHL API 并为我的应用检索曲棍球统计数据。API 有多个端点，我使用它们来访问玩家统计信息。

Roster endpoint

https://statsapi.web.nhl.com/api/v1/teams/3/roster

在我检索到这些数据后，我可以访问一个名为的对象，该对象person包含该个人玩家的 API 端点的 ID 号，该端点包含谱系信息（即他们来自的国家、身高/体重等）。然后我可以发送一个如下所示的 API 请求来检索该单个玩家的更多数据，在本例8476191中是 ID 号。

Pedigree Info endpoint:

https://statsapi.web.nhl.com/api/v1/people/8476191

我还可以将 ID 号 , 传递8476191给包含同一玩家的统计信息的统计端点。

Stats endpoint:

https://statsapi.web.nhl.com/api/v1/people/8476191/stats?stats=statsSingleSeason&season=20182019

我想要做的是向发送请求，获取名单上每个玩家的 ID 号，然后Roster endpoint对 ID 号进行后续 API 调用。Pedigree info endpointstats endpoint

如何Axios向名册端点发出 get 请求，然后在调用中再嵌套两个 get 请求，这些请求可以从第一次调用中访问 ID 号？这是我尝试的：

// State for retrieving player ID numbers from roster endpoint
const [playerIDNumbers, setPlayerIDNumbers] = useState([]);

useEffect(() => {
    // Get the roster data, set playerIdNumbers to an array containing all the ID numbers
   axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams[teamName].id}/roster`)
       .then(res => {
           setPlayerIDNumbers(Object.values(res.data.roster).map((x) => {
               return x.person.id;
           }));
           // res now contains all the ID numbers
           console.log(res);
       })
       // After grabbing all the ID numbers for each player on the roster, I want to map through each ID 
       // in the array and send a request for each player's pedigree data
       .then(res => {
           // Later in my code I created an array to contain the IDs called playerIDArr
           playerIDArr.map((playerID) => {
               axios.get(`https://statsapi.web.nhl.com/api/v1/people/${playerID}/`)
           })
           console.log('Player ID call returned : ' + res);
       })
       // After this is done I want to make a third request using the ID numbers to grab the stats /////from the stats endpoint
       /* Stats Axios request would go here */
       .catch(err => {
           console.log('Error : ' + err);
       })
}, [])

标签： reactjspromiseaxiosreact-hooksuse-effect

不需要保持状态，这里是如何使用闭包做到这一点：

useEffect(() => {
  axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams[teamName].id}/roster`)
    // get all ids
    .then(res => Object.values(res.data.roster).map((x) => x.person.id))
    // map through ids and retrieve the data 
    .then(ids => {
      const people = Promise.all(ids.map(id => axios.get(`https://statsapi.web.nhl.com/api/v1/people/${id}/`)))

      const stats = Promise.all(ids.map(id => axios.get(`https://statsapi.web.nhl.com/api/v1/stats/${id}/`)))

      return Promise.all([people, stats])

    }).catch(err => {
      console.log('Error : ' + err);
    })
})

// or using async/await, and some refactoring

const getRoster = id => axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${id}/roster`)

const getPerson = id => axios.get(`https://statsapi.web.nhl.com/api/v1/people/${id}/`)

const getStats = id => axios.get(`https://statsapi.web.nhl.com/api/v1/stats/${id}/`)

useEffect(() => {
  const res = await getRoster(teams[teamName].id)
  const ids = Object.values(res.data.roster).map(x => x.person.id)
  return Promise.all(ids.map(id => Promise.all([getPerson(id), getStats(id)])))
})

reactjs - React useEffect 和 Axios：在“then”中进行链式 API 调用

问题描述

解决方案

推荐阅读