Скачать или смотреть How to Wait for Multiple Fetches to Complete and Aggregate Results in JavaScript

A comprehensive guide on how to wait for multiple URL fetches to complete, aggregate the results, and post them to another URL in JavaScript.
---
This video is based on the question https://stackoverflow.com/q/71378144/ asked by the user 'HumptyDumpty' ( https://stackoverflow.com/u/18395696/ ) and on the answer https://stackoverflow.com/a/71387802/ provided by the user 'Bravo' ( https://stackoverflow.com/u/10549313/ ) 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 wait for multiple fetch to complete, aggregate the result and post it to another URL

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 Wait for Multiple Fetches to Complete and Aggregate Results in JavaScript

As a JavaScript developer, you may find yourself in a situation where you need to fetch data from multiple URLs and aggregate the responses to send them to another endpoint. This can be particularly challenging if some of those URLs may be inactive or down during runtime. In this guide, we'll discuss how to accomplish this task effectively, ensuring that your code is robust even when dealing with 500 or more URLs.

The Problem

You're trying to fetch data from a list of URLs (for instance, http://www.a.com, http://www.b.com, http://www.c.com) and aggregate the responses. The challenge is that some URLs may not respond, and your code must handle this gracefully. Here's a breakdown of the core requirements:

Fetch data from multiple URLs.

Handle potential errors gracefully (e.g., when a URL is down).

Aggregate results from successful fetches.

Post the aggregated results to a specified URL.

Understanding the Initial Code

Before diving into the solution, let’s examine the problems in the initial code provided:

The apiRequest function creates a promise that is never resolved.

The getData function does not wait for Promise.all to resolve.

The callFetch function is asynchronous but is not properly awaited.

The results in resultVal could be built in an unpredictable order.

These issues can lead to unhandled promises and incorrect results.

Proposed Solution

With these challenges in mind, let's look at a corrected version of the code along with an explanation of how it works.

Step-by-Step Breakdown

1. Defining the apiRequest Function

Instead of returning a new promise, we can simplify the function with async/await.

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

In this function:

We use await to pause execution until the fetch completes.

We check if the response is successful before extracting text.

We return a formatted string to represent the fetched data.

2. Fetching Data from All URLs

Next, we need a function to fetch data from all URLs and aggregate the successful responses.

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

The getData function:

Creates an array of URL strings to fetch.

Maps each URL to the apiRequest function and uses Promise.all to handle all fetch calls.

3. Calling the Fetch and Posting Results

Now we create the main function to call getData and post the aggregated responses.

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

In this block:

We await the completion of all fetch requests.

After aggregating results with join, we post the response to another URL.

Handling Top-Level await

If you find yourself in a modern JavaScript environment that supports top-level await, you can streamline this even further:

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

This eliminates the need for explicit promise chaining and error handling at each step.

Conclusion

By redefining how we handle multiple fetch requests and aggregating results, we've created a more efficient and robust approach to dealing with multiple URLs in JavaScript. This method allows for error handling and results aggregation in a clean manner.

If you're new to JavaScript, don't hesitate to experiment with the code and adapt it to your needs. Happy coding!