Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

How do I return the response from an asynchronous call?

How do I return the response/result from a function foo that makes an asynchronous request?

I am trying to return the value from the callback, as well as assigning the result to a local variable inside the function and returning that one, but none of those ways actually return the response — they all return undefined or whatever the initial value of the variable result is.

Example of an asynchronous function that accepts a callback (using jQuery's ajax function):

function foo() {
 var result;
 $.ajax({
 url: '...',
 success: function(response) {
 result = response;
 // return response; // <- I tried that one as well
 }
 });
 return result; // It always returns `undefined`
}

Example using Node.js:

function foo() {
 var result;
 fs.readFile("path/to/file", function(err, data) {
 result = data;
 // return data; // <- I tried that one as well
 });
 return result; // It always returns `undefined`
}

Example using the then block of a promise:

function foo() {
 var result;
 fetch(url).then(function(response) {
 result = response;
 // return response; // <- I tried that one as well
 });
 return result; // It always returns `undefined`
}

Answer*

Most of the answers here give useful suggestions for when you have a single async operation, but sometimes, this comes up when you need to do an asynchronous operation for *each* entry in an array or other list-like structure. The temptation is to do this:

 // WRONG
 var results = [];
 theArray.forEach(function(entry) {
 doSomethingAsync(entry, function(result) {
 results.push(result);
 });
 });
 console.log(results); // E.g., using them, returning them, etc.

Example:





 // WRONG
 var theArray = [1, 2, 3];
 var results = [];
 theArray.forEach(function(entry) {
 doSomethingAsync(entry, function(result) {
 results.push(result);
 });
 });
 console.log("Results:", results); // E.g., using them, returning them, etc.

 function doSomethingAsync(value, callback) {
 console.log("Starting async operation for " + value);
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 callback(value * 2);
 }, Math.floor(Math.random() * 200));
 }



 .as-console-wrapper { max-height: 100% !important; }



The reason that doesn't work is that the callbacks from `doSomethingAsync` haven't run yet by the time you're trying to use the results.

So, if you have an array (or list of some kind) and want to do async operations for each entry, you have two options: Do the operations in parallel (overlapping), or in series (one after another in sequence).

### Parallel

You can start all of them and keep track of how many callbacks you're expecting, and then use the results when you've gotten that many callbacks:

 var results = [];
 var expecting = theArray.length;
 theArray.forEach(function(entry, index) {
 doSomethingAsync(entry, function(result) {
 results[index] = result;
 if (--expecting === 0) {
 // Done!
 console.log("Results:", results); // E.g., using the results
 }
 });
 });

Example:





 var theArray = [1, 2, 3];
 var results = [];
 var expecting = theArray.length;
 theArray.forEach(function(entry, index) {
 doSomethingAsync(entry, function(result) {
 results[index] = result;
 if (--expecting === 0) {
 // Done!
 console.log("Results:", JSON.stringify(results)); // E.g., using the results
 }
 });
 });

 function doSomethingAsync(value, callback) {
 console.log("Starting async operation for " + value);
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 callback(value * 2);
 }, Math.floor(Math.random() * 200));
 }



 .as-console-wrapper { max-height: 100% !important; }



*(We could do away with `expecting` and just use `results.length === theArray.length`, but that leaves us open to the possibility that `theArray` is changed while the calls are outstanding...)*

Notice how we use the `index` from `forEach` to save the result in `results` in the same position as the entry it relates to, even if the results arrive out of order (since async calls don't necessarily complete in the order in which they were started).

But what if you need to *return* those results from a function? As the other answers have pointed out, you can't; you have to have your function accept and call a callback (or return a [Promise][1]). Here's a callback version:

 function doSomethingWith(theArray, callback) {
 var results = [];
 var expecting = theArray.length;
 theArray.forEach(function(entry, index) {
 doSomethingAsync(entry, function(result) {
 results[index] = result;
 if (--expecting === 0) {
 // Done!
 callback(results);
 }
 });
 });
 }
 doSomethingWith(theArray, function(results) {
 console.log("Results:", results);
 });

Example:





 function doSomethingWith(theArray, callback) {
 var results = [];
 var expecting = theArray.length;
 theArray.forEach(function(entry, index) {
 doSomethingAsync(entry, function(result) {
 results[index] = result;
 if (--expecting === 0) {
 // Done!
 callback(results);
 }
 });
 });
 }
 doSomethingWith([1, 2, 3], function(results) {
 console.log("Results:", JSON.stringify(results));
 });

 function doSomethingAsync(value, callback) {
 console.log("Starting async operation for " + value);
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 callback(value * 2);
 }, Math.floor(Math.random() * 200));
 }



 .as-console-wrapper { max-height: 100% !important; }



Or here's a version returning a `Promise` instead:

 function doSomethingWith(theArray) {
 return new Promise(function(resolve) {
 var results = [];
 var expecting = theArray.length;
 theArray.forEach(function(entry, index) {
 doSomethingAsync(entry, function(result) {
 results[index] = result;
 if (--expecting === 0) {
 // Done!
 resolve(results);
 }
 });
 });
 });
 }
 doSomethingWith(theArray).then(function(results) {
 console.log("Results:", results);
 });

*Of course, if `doSomethingAsync` passed us errors, we'd use `reject` to reject the promise when we got an error.)*

Example:





 function doSomethingWith(theArray) {
 return new Promise(function(resolve) {
 var results = [];
 var expecting = theArray.length;
 theArray.forEach(function(entry, index) {
 doSomethingAsync(entry, function(result) {
 results[index] = result;
 if (--expecting === 0) {
 // Done!
 resolve(results);
 }
 });
 });
 });
 }
 doSomethingWith([1, 2, 3]).then(function(results) {
 console.log("Results:", JSON.stringify(results));
 });

 function doSomethingAsync(value, callback) {
 console.log("Starting async operation for " + value);
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 callback(value * 2);
 }, Math.floor(Math.random() * 200));
 }



 .as-console-wrapper { max-height: 100% !important; }



*(Or alternately, you could make a wrapper for `doSomethingAsync` that returns a promise, and then do the below...)*

If `doSomethingAsync` gives you a [Promise][1], you can use [`Promise.all`][2]:

 function doSomethingWith(theArray) {
 return Promise.all(theArray.map(function(entry) {
 return doSomethingAsync(entry);
 }));
 }
 doSomethingWith(theArray).then(function(results) {
 console.log("Results:", results);
 });

If you know that `doSomethingAsync` will ignore a second and third argument, you can just pass it directly to `map` (`map` calls its callback with three arguments, but most people only use the first most of the time):

 function doSomethingWith(theArray) {
 return Promise.all(theArray.map(doSomethingAsync));
 }
 doSomethingWith(theArray).then(function(results) {
 console.log("Results:", results);
 });

Example:





 function doSomethingWith(theArray) {
 return Promise.all(theArray.map(doSomethingAsync));
 }
 doSomethingWith([1, 2, 3]).then(function(results) {
 console.log("Results:", JSON.stringify(results));
 });

 function doSomethingAsync(value) {
 console.log("Starting async operation for " + value);
 return new Promise(function(resolve) {
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 resolve(value * 2);
 }, Math.floor(Math.random() * 200));
 });
 }



 .as-console-wrapper { max-height: 100% !important; }



Note that `Promise.all` resolves its promise with an array of the results of all of the promises you give it when they are all resolved, or rejects its promise when the *first* of the promises you give it rejects.

### Series

Suppose you don't want the operations to be in parallel? If you want to run them one after another, you need to wait for each operation to complete before you start the next. Here's an example of a function that does that and calls a callback with the result:

 function doSomethingWith(theArray, callback) {
 var results = [];
 doOne(0);
 function doOne(index) {
 if (index < theArray.length) {
 doSomethingAsync(theArray[index], function(result) {
 results.push(result);
 doOne(index + 1);
 });
 } else {
 // Done!
 callback(results);
 }
 }
 }
 doSomethingWith(theArray, function(results) {
 console.log("Results:", results);
 });

*(Since we're doing the work in series, we can just use `results.push(result)` since we know we won't get results out of order. In the above we could have used `results[index] = result;`, but in some of the following examples we don't have an index to use.)*

Example:





 function doSomethingWith(theArray, callback) {
 var results = [];
 doOne(0);
 function doOne(index) {
 if (index < theArray.length) {
 doSomethingAsync(theArray[index], function(result) {
 results.push(result);
 doOne(index + 1);
 });
 } else {
 // Done!
 callback(results);
 }
 }
 }
 doSomethingWith([1, 2, 3], function(results) {
 console.log("Results:", JSON.stringify(results));
 });

 function doSomethingAsync(value, callback) {
 console.log("Starting async operation for " + value);
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 callback(value * 2);
 }, Math.floor(Math.random() * 200));
 }



 .as-console-wrapper { max-height: 100% !important; }



*(Or, again, build a wrapper for `doSomethingAsync` that gives you a promise and do the below...)*

If `doSomethingAsync` gives you a Promise, if you can use ES2017+ syntax (perhaps with a transpiler like [Babel](http://babeljs.io)), you can use an [`async` function][3] with [`for-of`][4] and [`await`][5]:

 async function doSomethingWith(theArray) {
 const results = [];
 for (const entry of theArray) {
 results.push(await doSomethingAsync(entry));
 }
 return results;
 }
 doSomethingWith(theArray).then(results => {
 console.log("Results:", results);
 });

Example:





 async function doSomethingWith(theArray) {
 const results = [];
 for (const entry of theArray) {
 results.push(await doSomethingAsync(entry));
 }
 return results;
 }
 doSomethingWith([1, 2, 3]).then(function(results) {
 console.log("Results:", JSON.stringify(results));
 });

 function doSomethingAsync(value) {
 console.log("Starting async operation for " + value);
 return new Promise(function(resolve) {
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 resolve(value * 2);
 }, Math.floor(Math.random() * 200));
 });
 }



 .as-console-wrapper { max-height: 100% !important; }



If you can't use ES2017+ syntax (yet), you can use a variation on the ["Promise reduce" pattern][6] (this is more complex than the usual Promise reduce because we're not passing the result from one into the next, but instead gathering up their results in an array):

 function doSomethingWith(theArray) {
 return theArray.reduce(function(p, entry) {
 return p.then(function(results) {
 return doSomethingAsync(entry).then(function(result) {
 results.push(result);
 return results;
 });
 });
 }, Promise.resolve([]));
 }
 doSomethingWith(theArray).then(function(results) {
 console.log("Results:", results);
 });

Example:





 function doSomethingWith(theArray) {
 return theArray.reduce(function(p, entry) {
 return p.then(function(results) {
 return doSomethingAsync(entry).then(function(result) {
 results.push(result);
 return results;
 });
 });
 }, Promise.resolve([]));
 }
 doSomethingWith([1, 2, 3]).then(function(results) {
 console.log("Results:", JSON.stringify(results));
 });

 function doSomethingAsync(value) {
 console.log("Starting async operation for " + value);
 return new Promise(function(resolve) {
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 resolve(value * 2);
 }, Math.floor(Math.random() * 200));
 });
 }



 .as-console-wrapper { max-height: 100% !important; }



...which is less cumbersome with [ES2015+ arrow functions][7]:

 function doSomethingWith(theArray) {
 return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
 results.push(result);
 return results;
 })), Promise.resolve([]));
 }
 doSomethingWith(theArray).then(results => {
 console.log("Results:", results);
 });

Example:





 function doSomethingWith(theArray) {
 return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
 results.push(result);
 return results;
 })), Promise.resolve([]));
 }
 doSomethingWith([1, 2, 3]).then(function(results) {
 console.log("Results:", JSON.stringify(results));
 });

 function doSomethingAsync(value) {
 console.log("Starting async operation for " + value);
 return new Promise(function(resolve) {
 setTimeout(function() {
 console.log("Completing async operation for " + value);
 resolve(value * 2);
 }, Math.floor(Math.random() * 200));
 });
 }



 .as-console-wrapper { max-height: 100% !important; }




 [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
 [2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
 [3]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
 [4]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
 [5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await
 [6]: https://stackoverflow.com/questions/43433643/javascript-how-do-i-reduce-multiple-promise-all
 [7]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Draft saved

Draft discarded

Edit Summary*

Cancel

5

Could you explain how the if (--expecting === 0) part of the code works please? The callback version of your solution is working great for me, I just don't understand how, with that statement, you are checking the number of responses completed. Appreciate it's just lack of knowledge on my part. Is there an alternative way that check could be written?

Sarah
– Sarah

2017年05月28日 10:21:35 +00:00
Commented May 28, 2017 at 10:21
5

@Sarah: expecting starts out with the value of array.length, which is how many requests we're going to make. We know the callback won't be called until all of those requests are started. In the callback, if (--expecting === 0) does this: 1. Decrements expecting (we've received a response, so we're expecting one fewer response) and if the value after the decrement is 0 (we're not expecting any more responses), we're done!

T.J. Crowder
– T.J. Crowder

2017年05月28日 18:31:11 +00:00
Commented May 28, 2017 at 18:31
2

@Henke - I think it is indeed personal preference, and while normally I'd prefer to log raw data and let the console handle it, in this specific case I think you're right about the change. Thanks! :-)

T.J. Crowder
– T.J. Crowder

2021年05月06日 11:27:48 +00:00
Commented May 6, 2021 at 11:27
2

Out of convenience for myself (and others?), adding a link to a related answer: How to make many asynchronous calls and wait for them all.

Henke
– Henke

2021年06月01日 14:01:43 +00:00
Commented Jun 1, 2021 at 14:01

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

How do I return the response from an asynchronous call?

Answer*