Скачать или смотреть Understanding Why Your async Function Returns undefined While Fetching Data

Explore the distinction between promises and async functions in JavaScript, and learn how to correctly retrieve data from APIs using `await` for proper results.
---
This video is based on the question https://stackoverflow.com/q/64662722/ asked by the user 'Igor Šátek' ( https://stackoverflow.com/u/12633014/ ) and on the answer https://stackoverflow.com/a/64662754/ provided by the user 'Ilijanovic' ( https://stackoverflow.com/u/10990737/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Why the first funcion give me results and second one only undefined?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Why Your async Function Returns undefined While Fetching Data

When working with JavaScript, particularly with asynchronous functions and APIs, it's common to encounter issues that can lead to frustrating results. One such problem arises when comparing two functions designed to fetch the same data: one function returns the expected result, while the other yields undefined. In this guide, we'll break down a specific example to clarify why this happens and how to correct the issue.

The Problem at a Glance

Consider the following two functions which both attempt to fetch data from an API that generates random user information:

First Function (Working):

[[See Video to Reveal this Text or Code Snippet]]

Second Function (Returns Undefined):

[[See Video to Reveal this Text or Code Snippet]]

Despite both functions aiming to retrieve the same data, the second function results in undefined. So, what's going wrong here?

Understanding Async Functions and Promises

The Role of async and await

An async function always returns a promise. When you use the await keyword, you're pausing the execution of the function until the promise is resolved. If it doesn’t explicitly return a value, it implicitly returns undefined.

In the second function, the following line:

[[See Video to Reveal this Text or Code Snippet]]

doesn't work as intended because:

res.json() returns a promise.

You need to await that promise to get the data.

Correcting the Code

To fix the second function, we must ensure that we resolve the promise returned by res.json():

[[See Video to Reveal this Text or Code Snippet]]

Alternative Approach

While the above correction works, there’s also a cleaner way to structure your function using promises:

[[See Video to Reveal this Text or Code Snippet]]

This method utilizes chaining with .then(), which some developers prefer for its readability.

Conclusion

Understanding the differences in handling promises and async functions is crucial for effective JavaScript programming. By ensuring that each promise is resolved before accessing its data, you can avoid pitfalls such as returning undefined. With proper structure, you can confidently work with APIs and handle asynchronous operations.

Feel free to experiment with these patterns in your code and see how they affect the outcome. Happy coding!