0

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);
    });
} ```
Amit Dash
  • 584
  • 8
  • 21
Arthur Fortin
  • 103
  • 1
  • 10
  • 1
    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
  • @ggorlen How would you use promise.all in my code ? Thanks – Arthur Fortin Aug 04 '22 at 17:35
  • 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

0 Answers0