title: JavaScript Promise inside async/await function resolve final array of responses
body: <p>I'm quite a newbie in JavaScript and in Promises.
  I'm trying to build an array of objects that I get from an API.</p>
  
  <p>To do so, I've build two functions in a file <code>MyFile.js</code>.</p>
  
  <p>The first one returns a promise when an axios promise is resolved. It's </p>
  
  <pre><code>function get_items (url) {
      return new Promise((resolve, reject) =&gt; {
          let options = {
              baseURL: url,
              method: 'get'
          }
          axios(options)
              .then(response =&gt; {
                  resolve(response.data)
              })
              .catch(error =&gt; {
                  reject(error.stack)
              })
      })
  }
  </code></pre>
  
  <p>The second one looks like this:</p>
  
  <pre><code>let output = []
  let next_url = 'https://some_url.com/api/data'
  async function get_data () {
      try {
          let promise = new Promise((resolve, reject) =&gt; {
              if (next_url) {
                  get_items(next_url)
                      .then(response =&gt; {
                          output.push(...response.results)
                          if (response.next) {
                              next_url = response.next
                              console.log('NEXT_URL HERE', next_url)
                              get_data()
                          } else {
                              console.log('else')
                              next_url = false
                              get_data()
                          }
                      })
                      .catch(error =&gt; {
                          reject(error.stack)
                      })
              } else {
                  console.log('before resolve')
                  resolve(output)
              }
          })
          return await promise
      } catch(e) {
          console.log(e)
      }
  }
  </code></pre>
  
  <p>It's where I'm grinding my teeth.
  What I think I understand of this function, is that:</p>
  
  <ul>
  <li>it's returning the value of a promise (that's what I understand <code>return await promise</code> is doing)</li>
  <li>it's a recursive function. So, if there is a next_url, the function continues on. But if there is not, it gets called one last time to go into the <code>else</code> part where it resolves the array <code>output</code> which contains the results (values not state) of all the promises. At least, when I execute it, and check for my sanity checks with the <code>console.log</code> I wrote, it works.</li>
  </ul>
  
  <p>So, <code>output</code> is filled with data and that's great.</p>
  
  <p>But, when I call this function from another file <code>MyOtherFile.js</code>, like this:</p>
  
  <pre><code>final_output = []
  MyFile.get_data()
      .then(result =&gt; {
          console.log('getting data')
          final_output.push(...result)
      })
  </code></pre>
  
  <p>it never gets into the <code>then</code> part. And when I console.log <code>MyFile.get_data()</code>, it's a pending promise.</p>
  
  <p>So, what I would like to do, is be able to make <code>get_data()</code> wait for all the promises result (without using Promise.all(), to have calls in serie, not in parallel, that would be great for performances, I guess?) and then be able to retrieve that response in the <code>then</code> part when calling this function from anywhere else.
  Keep in mind that I'm really a newbie in promises and JavaScript in general (I'm more of a Python guy).</p>
  
  <p>Let me know if my question isn't clear enough.
  I've been scratching my head for two days now and it feels like I'm running in circle.</p>
  
  <p>Thanks for being an awesome community!</p>