The best way to wait for the completion async function before returning data

Question

What is the best way to wait for the completion of all parallel async functions before returning data?

Request works asynchronously and the following function will return an empty array.

import request from 'request'

// List of urls
const urls = [
  'http://someurl.com/1.json',
  'http://someurl.com/2.json',
  'http://someurl.com/3.json',
]

function getData () {
  // An array that will contain data
  let result = []
  
  // Request data from all urls
  urls.forEach(i => {
    // Function works asynchronously
    request(i, (err, res, body) => {
      if(err) throw err
      
      const data = JSON.parse(body)
      
      result.push(i.someValue)
    })
  })

  return result // Returns an empty array :(
}

What request library are you using?`import request from 'require'` doesn't make any sense — Aron, Mar 14 '17 at 10:31
First off, you CAN'T wait for async responses to finish before returning. See [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) for all the details on that issue. — jfriend00, Mar 14 '17 at 17:47

score 2 · Answer 1 · answered Mar 14 '17 at 10:34

If you can use promises, the best way would be to use them. Make sure your request function returns a promise, so you can then something like:

var request = function request( url ) {
    return new Promise(function requestPromise( resolve, reject ) {
        myAjaxCallOrOtherAsyncCall( url, function( error, response ) {
            if (error) reject(error);
            else resolve(response);
        })
    });
};

var getData = function getData( urls ) {
    return Promise.all( urls.map(request) );
};

var urls = [
  'http://someurl.com/1.json',
  'http://someurl.com/2.json',
  'http://someurl.com/3.json',
];

getData(urls).then(function( responses ) {
    var results = responses.map(JSON.parse);
    // do somethign with async results
});

score 0 · Answer 2 · answered Mar 14 '17 at 10:39

Use Promise.all() to await all promises to complete, though this does require that you use a request library that returns promises, like axios.

import axios from 'axios'

// List of urls
const urls = [
    'http://someurl.com/1.json',
    'http://someurl.com/2.json',
    'http://someurl.com/3.json',
]

function getData() {
    return new Promise((resolve, reject) => {

        const promises = urls.map(url => axios.get(url)); // array of pending promises

        Promise.all(promises) // creates single promise that resolves when all `promises` resolve
            .then(responses => {
                const dataArray = responses.map(response => response.data);
                return resolve(dataArray);
            }) // resolves with an array of response data
            .catch(reject);
    })
}

getData()
    .then(data => {
        // do something
    })

score 0 · Answer 3 · answered Mar 14 '17 at 10:41

0

Try to use the trigger. When all data is collected use

$(trigger_obj).trigger('loading_complete');

And then make it a handler

$(trigger_obj).on('loading_complete', function () {
  \\ logic ...
});

answered Mar 14 '17 at 10:41

Mobetoh

93
1
4

What does this have to do with multiple async calls? – Shilly Mar 14 '17 at 10:53

score 0 · Answer 4 · answered Mar 14 '17 at 11:05

Using https://github.com/request/request-promise-native, you can facilitate Promise.all as others have already pointed out:

import Request from 'request-promise-native'

// List of urls
const urls = [
  'http://someurl.com/1.json',
  'http://someurl.com/2.json',
  'http://someurl.com/3.json',
]

// The simplest form to create a bunch of request promises:
Promise.all(urls.map(Request))

// Otherwise it could look as follows:
const urlPromises = urls.map(url => Request({
  uri: 'http://www.google.com'
  // and more options
}))

// Or with promise chains:
const urlPromiseChain = (url) => {
  return Request(url)
         .then(doSomethingWithResponse)
         .catch(logButDontFailOnError)
}

const urlPromiseChains = urls.map(urlPromiseChain)

Promise.all(urlPromises /* or urlPromiseChains */)
.then(responses => console.log(responses))

The best way to wait for the completion async function before returning data

4 Answers4