Pass data through promise .then notation using axios

Question

I need to make three web service calls. The second two calls depend on the results of the first. Then I want to resolve my promise with the results of all three server calls. Imagine I want to get all the players of a given sport. Using those players, I want to make a call to get a list of teams they play on, and I want to make a call to get the games they've played in. It looks something like this:

static doTheThing(sports) {
    return new Promise((resolve, reject) => {
     axios
        .post("http://localhost:8076/getPlayersForSports", sports)
        .then((res1) => {
          const playerNames = res1.data.map(player => player.name);
          return(axios.all([
            axios.post("http://localhost:8076/getTeams", playerNames),
            axios.post("http://localhost:8076/getGames", playerNames),
          ]));
        }).then(axios.spread((res2, res3) => {
          resolve( 
            res1.data
            res2.data, 
            res3.data)
        }))
        .catch((err)=> {
          reject(err);
        })
    })
  }

I have gotten this far. I can get a list of players for a passed in list of sports. I can get the name off of every player object and use it to call the other two web services (I have confirmed the return is correct in the chrome dev console). This is where I am stuck. I am using axios.all() to chain the second two commands and then axios.spread() as I have seen in some other responses. I cant figure out how to pass res1 through the chain so that I can resolve with all three data sets.

Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! But most importantly, you cannot resolve a promise with three values at once. You can however resolve it with an array or object containing multiple values. — Bergi, Jan 12 '21 at 21:17

score 0 · Answer 1 · answered Jan 12 '21 at 19:21

Why not save it in a variable within the function but outside the promise chain like this with firstRes:

static doTheThing(sports) {
    let firstRes;

    return new Promise((resolve, reject) => {
     axios
        .post("http://localhost:8076/getPlayersForSports", sports)
        .then((res1) => {
          const playerNames = res1.data.map(player => player.name);
          firstRes = res1;
          return(axios.all([
            axios.post("http://localhost:8076/getTeams", playerNames),
            axios.post("http://localhost:8076/getGames", playerNames),
          ]));
        }).then(axios.spread((res2, res3) => {
          resolve( 
            firstRes
            res2.data, 
            res3.data)
        }))
        .catch((err)=> {
          reject(err);
        })
    })
  }

Really, just to avoid a variable creation. If I have to, there is nothing stopping me, but I was curious on principle if there is a concrete way to just pass it down the chain instead of initializing a variable. — Tim B., Jan 12 '21 at 19:24

Pass data through promise .then notation using axios

1 Answers1