为多个get请求创建一个Promise数组

Question

I have a Vue app that at one point calls a sports feeds API end point to get an array of game ID's so I can iterate thru the ID's to get box scores for individual games. So first in in the main app I do:

// vue.js
         /* jshint ignore:start */
    axios
      .get(
        `https://api.mysportsfeeds.com/v1.2/pull/nba/${seasonName}/scoreboard.json?fordate=${
          date.yesterday
        }`,
        config
      )
      .then(async response => {
        this.sports_feeds_data = await response.data.scoreboard.gameScore;
        return this.sports_feeds_data;
      })
      .then(async response => {
        // Fill up array with all the game ID's for today's games
        // This will be used to retrieve the Box Scores later
        response.forEach(function(item, index) {
          gameIDs[index] = item.game.ID;
        });

        return gameIDs;
      })
      .then(response => {
        this.sports_feeds_boxscores = getBoxScores(response);
      })
      .catch(error => {
        console.log(error);
        this.errored = true;
      });
    /* jshint ignore:end */

    console.log("Here are boxScores" + this.sports_feeds_boxscores);================================================================================= //
    // ============================ End Get NBA Scores ================================= //
    // ================================================================================= //

Now in getBoxScores.js I want create an array of promises and then fulfill them one at a time via axios.all(promises) into the boxscores array and and return it to Vue.js for further processing. It looks like this:

// getBoxScores.js

const axios = require("axios");

let boxScores = [];
let promises = [];

/* jshint ignore:start */
const getBoxScores = gameIDs => {
  console.log(gameIDs);
  gameIDs.forEach(function(item) {
    console.log(item); // nothing output
    console.log("Im in forEach"); // nothing output
    let myUrl = `https://api.mysportsfeeds.com/v1.2/pull/nba/2018-2019-regular/game_boxscore.json?gameid=${item}`;

    promises.push(
      axios({
        method: "get",
        headers: {
          Authorization:
            "Basic NzAxMzNkMmEtNzVmMi00MjdiLWI5ZDYtOTgyZTFhOnNwb3J0c2ZlZWRzMjAxOA=="
        },
        url: myUrl,
        params: {
          teamstats: "none",
          playerstats: "PTS,AST,REB,3PM",
          sort: "stats.PTS.D",
          limit: 3,
          force: true
        }
      })
    );
  });



    console.log(promises);
  axios.all(promises).then(function(results) {
    results.forEach(function(response) {
      boxScores.push(response.data.gameboxscore);
    });
    return boxScores;
  });
};
/* jshint ignore:end */

module.exports = getBoxScores;

Problem: Update: See promises[] ok but this.sports_feeds_boxscores still shows as empty on getBoxScores(response) return. Any ideas? Thanks.

Answer 1

When you retrieve data asynchronously, you need to keep going with the asynchronous pattern and not fall back to synchronous sequences.

For example, you access gameIDs synchronously right after you launched an asynchronous request to get it, so that will not work: when executing boxScores(gameIDs); the array gameIDs will not yet have been populated.

So your code should be organised like this:

axios.get(url, config)
    .then(async response => { .... })
    .then(async response => { 
        .... 
        return gameIDs; // <-- better practice to drive the output through the chain
    })
    .then(boxScores); // <-- call it asynchronously!
    .catch(error => { ... });

// Whatever code comes here should not expect anything from the above 
// asynchronously retrieved data. It will not yet have been retrieved

Be careful with console.log : it may give the wrong impression that your data is present in the array at the time you made the log. This is not necessarily true: the console retrieves content later , at the moment when you expand the array in the console. It does not always reflect the situation at the time the log was made .