通过多个axios请求分派不同的操作

时间:2020-04-11 09:51:11

标签: javascript reactjs redux react-hooks

我有一个get方法发送不同的请求,我想为我发送的任何请求调度一个动作。

查看相关代码

export function getTeamsStats(league, team, type) {
  return function(dispatch) {

    let url1 = "https://www.api-football.com/demo/api/v2/statistics/891/490/2020-01-09"
    let url2 = "https://www.api-football.com/demo/api/v2/statistics/891/490/2020-02-09"
    let url3 = "https://www.api-football.com/demo/api/v2/statistics/891/490/2020-03-09"

    let urlArray = [url1,url2,url3]

    let promiseArray = urlArray.map(url => axios.get(url));

    const api = true;

    if (api) {
      return axios({
        method: "get",
        headers: {
          "x-rapidapi-host": "api-football-v1.p.rapidapi.com",
          "x-rapidapi-key": ""
        }
      })
      .all(promiseArray)
      .then(res => {
        const {
          matchsPlayed: { home: teamsMatchsPlayedHome, away: teamsMatchsPlayedAway},
          wins: { home: teamsStatsWinHome, away: teamsStatsWinAway },
          draws: { home: teamsStatsDrawHome, away: teamsStatsDrawAway },
          loses: { home: teamsStatsLoseHome, away: teamsStatsLoseAway }
        } = res.data.api.statistics.matchs;
        const teamStats = {
          teamsMatchsPlayedHome,
          teamsMatchsPlayedAway,
          teamsStatsWinHome,
          teamsStatsWinAway,
          teamsStatsDrawHome,
          teamsStatsDrawAway,
          teamsStatsLoseHome,
          teamsStatsLoseAway
         }
        dispatch(receivedTeamsStat(teamStats, type));

对于这3个网址中的任何一个,我都希望进行此调度dispatch(receivedTeamsStat(teamStats, type));

我只用一个URL请求就可以执行相同的dispatch并得到满意的结果,但是现在我不知道如何为每个URL进行dispatch来实现相同的目的。

2 个答案:

答案 0 :(得分:2)

此逻辑可能会对您有所帮助。您可以在forEach

中使用.then()
.then( res => res.forEach( result => dispatch({type: FETCH_DATA_SUCESS, payload:  result.data}))

内部:

...

if (api) {
  return axios({
    method: "get",
    headers: {
      "x-rapidapi-host": "api-football-v1.p.rapidapi.com",
      "x-rapidapi-key": ""
    }
  })
  .all(promiseArray)
  .then( res => {
        ...

        res.forEach( result => dispatch({type: FETCH_DATA_SUCESS, payload:  result.data}))

        ...
  })

  ...

答案 1 :(得分:0)

您可以初始化状态

this.state={
  myArray:[]
}

对于每个api调用,您可以按以下方式修改状态

get('URL').then((res)=>{
    //Some extra code here to create object to be appended and maybe to check if the get was successfull
    let x = this.state.myArray;
    x.push(object);
    this.setState(x);
})

关于日期,