Скачать или смотреть How to Correctly Return Multiple Values Using JavaScript Promises in Fetch Requests

Learn how to correctly chain JavaScript promises to fetch multiple values from an API in a single request.
---
This video is based on the question https://stackoverflow.com/q/66659989/ asked by the user 'RubyRube' ( https://stackoverflow.com/u/5680952/ ) and on the answer https://stackoverflow.com/a/66660399/ provided by the user 'Vo Quoc Thang' ( https://stackoverflow.com/u/14480038/ ) 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: Promises chain incorrect. Doesn't return multiple values

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.
---
Returning Multiple Values from Fetch Requests with JavaScript Promises

When working with APIs in JavaScript, you may encounter scenarios where you need to return multiple values from a single request. This can be particularly tricky when using Promises to handle asynchronous operations. In this post, we'll tackle a common issue: returning both video count and view count from an API fetch request, and how to do it correctly.

The Problem: Incorrect Promise Chaining

You might have tried the following code to return both values:

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

While the idea is there, this code doesn't work correctly because you're trying to chain .then() calls that expect different results from the same fetch request. Each .then() returns a single value, not multiple.

Understanding the Fetch API and Promises

The fetch function allows you to make network requests. It returns a Promise, which is an object that represents the eventual completion (or failure) of an asynchronous operation. Each call to .then() is a way to handle the response, but it only handles one value from the previous resolution.

The Solution: Returning Multiple Values in One Step

To correctly fetch and extract multiple values from the response, you only need a single then() after parsing the JSON. You can get both properties in one go. Here's how you should structure your code:

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

Breakdown of the Code

Single .then() for JSON Parsing: After the fetch call, you parse the response using a single .then(), which converts the response into JSON format.

Accessing Multiple Properties: Inside the second .then(), you can access both videoCount and viewCount from the result object. This is where both values are logged in a single line.

Error Handling: The .catch() method will still catch any errors in the entire promise chain.

Conclusion

By following the corrected structure, you'll eliminate the confusion of trying to retrieve multiple values through separate promise chains. This approach provides a cleaner, more efficient way to access the data you need in a single API request. Remember, when using JavaScript promises, keep your .then() calls organized and clear to ensure successful data retrieval.

With these insights, you can navigate the nuances of JavaScript promises more effectively, making your code cleaner and easier to maintain. Happy coding!