React useEffect 和 Axios:在 'then' 内进行链式 API 调用
React useEffect and Axios: Making chained API calls within 'then'
我正在与 NHL 合作 API 并为我的应用程序检索曲棍球统计数据。 API 有多个我用来访问玩家统计数据的端点。
Roster endpoint
https://statsapi.web.nhl.com/api/v1/teams/3/roster
检索此数据后,我可以访问一个名为 person
的对象,该对象包含该玩家 API 端点的 ID 号,该端点包含谱系信息(即他们来自的国家/地区,height/weight, 等等..).然后我可以发送一个看起来像这样的 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
我想做的是向 Roster endpoint
发送请求,获取名册上每个玩家的 ID 号,然后对 [=20= 进行后续 API 调用] 和 stats 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);
})
}, [])
不需要保持状态,下面是如何使用闭包来做到这一点:
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)])))
})
我正在与 NHL 合作 API 并为我的应用程序检索曲棍球统计数据。 API 有多个我用来访问玩家统计数据的端点。
Roster endpoint
https://statsapi.web.nhl.com/api/v1/teams/3/roster
检索此数据后,我可以访问一个名为 person
的对象,该对象包含该玩家 API 端点的 ID 号,该端点包含谱系信息(即他们来自的国家/地区,height/weight, 等等..).然后我可以发送一个看起来像这样的 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
我想做的是向 Roster endpoint
发送请求,获取名册上每个玩家的 ID 号,然后对 [=20= 进行后续 API 调用] 和 stats 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);
})
}, [])
不需要保持状态,下面是如何使用闭包来做到这一点:
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)])))
})