Axios nested .then with map

Question

I have a problem with Axios. I'm trying to nest multiple .then and .get.

I start a first get to take back a JSON, then I get the ids from it. And for each of these ids, I make another get to fill an array with a specific data. Unfortunately, I ended up with an empty array.

Here is my code

  var axios = require('axios');
  var config = {
    method: 'get',
    url: '.../api/firstCall',
    headers: {
      'Authorization': 'XXXXXXX',
      'Cookie': 'XXXXXXXX'
    }
  };

  axios(config)
    .then(function (response) {
      return (response.data.requests)
    })

    //Works fine (I Get the Ids for the second API call)
    .then(function (response) {
      const ids = []
      Object.values(response).map(element => {
        ids.push(element.id)
      })
      return ids
    })

     //For each Id I will make API call, get the data I want and put it in an array 
    .then(function (response) {
      const theArrayToFill = []
      response.map(id => {
        var config2 = {
          method: 'get',
          url: '.../api/secondCall',
          headers: {
            'Authorization': 'XXXX',
            'Cookie': 'XXXX'
          }
        };

        axios(config2)
          .then(function (response) {
            const theData = response.data
            theArrayToFill.push(theData)
          })
          .catch(function (error) {
            console.log(error);
          });
      })
      return theArrayToFill
    })
     
    // PROBLEM : my array is empty
    .then(function (response) {
      res.send(response)

    })
    .catch(function (error) {
      console.log(error);
    });
} ```

Do you have a reason to use .then chains instead of async await? It would be a lot cleaner and easier to debug — 0xRyN, Aug 04 '22 at 16:28
You never await the `axios.then` in your `map`. Return that and use `Promise.all` to await for all of them. See [this answer](https://stackoverflow.com/a/43766002/6243352) in the canonical thread. The `array.push()` pattern is a bad one--`return` results to resolve them and collect them with `Promise.all`. — ggorlen, Aug 04 '22 at 16:39
Thanks for your answers. The thing is I'm a newbie with Node and so for the Promise, async etc. How would you refactored my code ? — Arthur Fortin, Aug 04 '22 at 16:42
Did you tead the link I shared thoroughly and attempt to put it into practice? You can add the `Promise.all()` around the mapped array that returns promises. Hint: `return Promise.all(response.map(id => { ... return axios(config2) ... }))`. As an aside, `async`/`await` is usually cleaner than `then` and will probably make your job easier. — ggorlen, Aug 04 '22 at 17:38
Yes I tried something similar, but it returns an array of null values — Arthur Fortin, Aug 04 '22 at 19:19
@ggorlen Yes I tried to create an async function but your solution is better. However I got an array with null values. Here is the code `return Promise.all (response.map(id => { var config2 = {...my config...} axios(config2) .then(function (response) { const fullResolution = response.data }) .catch(function (error) { console.log(error); }); }))` — Arthur Fortin, Aug 04 '22 at 19:26
I don't see a `return` in front of the `axios(config2)` promise chain as I suggested. — ggorlen, Aug 04 '22 at 19:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247038/discussion-between-arthur-fortin-and-ggorlen). — Arthur Fortin, Aug 04 '22 at 19:30

Axios nested .then with map

0 Answers0