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*

## If you're using promises, this answer is for you.

This means AngularJS, jQuery (with deferred), native [XHR][1]'s replacement (fetch), [Ember.js][2], [Backbone.js][3]'s save or any [Node.js][4] library that returns promises.

Your code should be something along the lines of this:

 function foo() {
 var data;
 // Or $.get(...).then, or request(...).then, or query(...).then
 fetch("/echo/json").then(function(response){
 data = response.json();
 });
 return data;
 }

 var result = foo(); // 'result' is always undefined no matter what.

[Felix Kling did a fine job][5] writing an answer for people using jQuery with callbacks for Ajax. I have an answer for native XHR. This answer is for generic usage of promises either on the frontend or backend.


---------------
## The core issue

The JavaScript concurrency model in the browser and on the server with Node.js/io.js is _asynchronous_ and _reactive_.

Whenever you call a method that returns a promise, the `then` handlers are _always_ executed asynchronously - that is, __after__ the code below them that is not in a `.then` handler.

This means when you're returning `data` the `then` handler you've defined did not execute yet. This in turn means that the value you're returning has not been set to the correct value in time.

Here is a simple analogy for the issue:





 function getFive(){
 var data;
 setTimeout(function(){ // Set a timer for one second in the future
 data = 5; // After a second, do this
 }, 1000);
 return data;
 }
 document.body.innerHTML = getFive(); // `undefined` here and not 5



The value of `data` is `undefined` since the `data = 5` part has not executed yet. It will likely execute in a second, but by that time it is irrelevant to the returned value.

Since the operation did not happen yet (Ajax, server call, I/O, and timer) you're returning the value before the request got the chance to tell your code what that value is.

One possible solution to this problem is to code _re-actively_, telling your program what to do when the calculation completed. Promises actively enable this by being temporal (time-sensitive) in nature.

### Quick recap on promises

A Promise is a _value over time_. Promises have state. They start as pending with no value and can settle to:

 - __fulfilled__ meaning that the computation completed successfully.
 - __rejected__ meaning that the computation failed.

A promise can only change states _once_ after which it will always stay at the same state forever. You can attach `then` handlers to promises to extract their value and handle errors. `then` handlers allow [chaining][6] of calls. Promises are created by [using APIs that return them][7]. For example, the more modern Ajax replacement `fetch` or jQuery's `$.get` return promises.

When we call `.then` on a promise and _return_ something from it - we get a promise for _the processed value_. If we return another promise we'll get amazing things, but let's hold our horses.

### With promises

Let's see how we can solve the above issue with promises. First, let's demonstrate our understanding of promise states from above by using the [Promise constructor][8] for creating a delay function:

 function delay(ms){ // Takes amount of milliseconds
 // Returns a new promise
 return new Promise(function(resolve, reject){
 setTimeout(function(){ // When the time is up,
 resolve(); // change the promise to the fulfilled state
 }, ms);
 });
 }

Now, after we [converted setTimeout][9] to use promises, we can use `then` to make it count:





 function delay(ms){ // Takes amount of milliseconds
 // Returns a new promise
 return new Promise(function(resolve, reject){
 setTimeout(function(){ // When the time is up,
 resolve(); // change the promise to the fulfilled state
 }, ms);
 });
 }

 function getFive(){
 // We're RETURNING the promise. Remember, a promise is a wrapper over our value
 return delay(100).then(function(){ // When the promise is ready,
 return 5; // return the value 5. Promises are all about return values
 })
 }
 // We _have_ to wrap it like this in the call site, and we can't access the plain value
 getFive().then(function(five){
 document.body.innerHTML = five;
 });



Basically, instead of returning a _value_ which we can't do because of the concurrency model - we're returning a _wrapper_ for a value that we can _unwrap_ with `then`. It's like a box you can open with `then`.

### Applying this

This stands the same for your original API call, you can:

 function foo() {
 // RETURN the promise
 return fetch("/echo/json").then(function(response){
 return response.json(); // Process it inside the `then`
 });
 }

 foo().then(function(response){
 // Access the value inside the `then`
 })

So this works just as well. We've learned we can't return values from already asynchronous calls, but we can use promises and chain them to perform processing. We now know how to return the response from an asynchronous call.

## ES2015 (ES6)

ES6 introduces [generators][10] which are functions that can return in the middle and then resume the point they were at. This is typically useful for sequences, for example:

 function* foo(){ // Notice the star. This is ES6, so new browsers, Nodes.js, and io.js only
 yield 1;
 yield 2;
 while(true) yield 3;
 }

Is a function that returns an _iterator_ over the sequence `1,2,3,3,3,3,....` which can be iterated. While this is interesting on its own and opens room for a lot of possibility, there is one particular interesting case.

If the sequence we're producing is a sequence of actions rather than numbers - we can pause the function whenever an action is yielded and wait for it before we resume the function. So instead of a sequence of numbers, we need a sequence of _future_ values - that is: promises.

This somewhat a tricky, but very powerful trick let’s us write asynchronous code in a synchronous manner. There are several "runners" that do this for you. Writing one is a short few lines of code, but it is beyond the scope of this answer. I'll be using Bluebird's `Promise.coroutine` here, but there are other wrappers like `co` or `Q.async`.

 var foo = coroutine(function*(){
 var data = yield fetch("/echo/json"); // Notice the yield
 // The code here only executes _after_ the request is done
 return data.json(); // 'data' is defined
 });

This method returns a promise itself, which we can consume from other coroutines. For example:

 var main = coroutine(function*(){
 var bar = yield foo(); // Wait our earlier coroutine. It returns a promise
 // The server call is done here, and the code below executes when done
 var baz = yield fetch("/api/users/" + bar.userid); // Depends on foo's result
 console.log(baz); // Runs after both requests are done
 });
 main();

## ES2016 (ES7)

In ES7, this is further standardized. There are several proposals right now, but in all of them you can `await` promise. This is just "sugar" (nicer syntax) for the ES6 proposal above by adding the `async` and `await` keywords. Making the above example:

 async function foo(){
 var data = await fetch("/echo/json"); // Notice the await
 // code here only executes _after_ the request is done
 return data.json(); // 'data' is defined
 }

It still returns a promise just the same :)

 [1]: https://en.wikipedia.org/wiki/XMLHttpRequest
 [2]: https://en.wikipedia.org/wiki/Ember.js
 [3]: https://en.wikipedia.org/wiki/Backbone.js
 [4]: https://en.wikipedia.org/wiki/Node.js
 [5]: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323
 [6]: https://stackoverflow.com/questions/22539815/arent-promises-just-callbacks
 [7]: https://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises
 [8]: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
 [9]: http://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises
 [10]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

Draft saved

Draft discarded

Edit Summary*

Cancel

In short, async functions can either: 1) assign meaningless 'pending' promises or 'undefined' variables to synchronous flow (common gotchas) 2) extract the response body from the fulfilled promise for their own or callback processing 3) return the promise up the 'chain' to another calling async function

DWB
– DWB

2023年04月17日 15:57:47 +00:00
Commented Apr 17, 2023 at 15:57

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*