Скачать или смотреть How to Use fetch() to Retrieve Multiple JSON Resources Efficiently

Discover how to use JavaScript's `fetch()` method to download multiple JSON resources effortlessly and improve your data handling.
---
This video is based on the question https://stackoverflow.com/q/66562037/ asked by the user 'Akira Takeshi' ( https://stackoverflow.com/u/13032028/ ) and on the answer https://stackoverflow.com/a/66562073/ provided by the user 'pouria' ( https://stackoverflow.com/u/3201578/ ) 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: How to fetch() multiple resources?

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.
---
How to Use fetch() to Retrieve Multiple JSON Resources Efficiently

In today's programming world, dealing with APIs and multiple data resources is a common task. If you're using JavaScript to fetch data in JSON format, you may find yourself asking: How can I efficiently retrieve multiple resources at once?

In this guide, we will explore how to structure your JavaScript code to fetch multiple JSON resources using the fetch() method. We'll also discuss how to avoid common pitfalls and ensure that you end up with a list of actual JSON objects instead of unresolved promises.

Understanding the Problem

You might have a list of URLs pointing to JSON files that you need to download for further processing. While using fetch(), it's common to run into the issue of ending up with a list of promises instead of the desired JSON objects. Here's an example of how one might try to achieve this:

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

As you can see, while the jsonBaseList is being populated, it actually contains unresolved promises because res.json() returns a promise itself.

The Solution

To get a list of JSON objects, you need to ensure that you resolve the JSON promise before pushing it into your jsonBaseList. Here’s how to correctly implement it:

Adjusting Your Code

Instead of assigning res.json() directly, return it to chain another .then() that will store the resolved JSON object. Here's an improved version of your code:

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

Important Note on Asynchronous Operations

Due to the asynchronous nature of JavaScript, directly logging jsonBaseList will show an empty array since the promises are likely still pending. To ensure you see the filled array, move the console.log statement inside the .then() block:

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

Utilizing async/await for Cleaner Code

As an alternative to using Promise.then, you can streamline your code with async/await, which makes your asynchronous code much cleaner and easier to read:

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

Conclusion

Fetching multiple JSON resources using JavaScript's fetch() method can be straightforward if structured correctly. By ensuring that you're resolving promises and utilizing modern async/await syntax, you can effectively handle multiple resources without falling into common pitfalls.

Now, you're ready to fetch data like a pro! Happy coding!