Competing in a fast-paced race with JavaScript promises to guarantee the completion of all

Question

Competing in a fast-paced race with JavaScript promises to guarantee the completion of all

How can I retrieve the result of a Javascript Promise that resolves the fastest, while still allowing the other promises to continue running even after one has been resolved? See example below.

// The 3 promises in question
const fetchFromGoogle: Promise<T> = googlePromise()
const fetchFromAmazon: Promise<T> = amazonPromise()
const fetchFromCloudflare: Promise<T> = cloudflarePromise()

// Retrieve the result of the fastest resolving promise
const winner: T = Promise.race([fetchFromGoogle, fetchFromAmazon, fetchFromCloudflare])

If, for example, the fetchFromAmazon call wins in terms of speed, its result will be returned to the client, but the other two promises will continue executing asynchronously.

This code is running within a Cloudflare Worker, and the functionality to return the winning promise while allowing the evaluation of the others can be achieved using the waitUntil API linked below.

I have considered two options:

An unknown Javascript API that may handle this automatically
Using a method like this to identify the "losing" promises and execute them with Cloudflare Workers' context.waitUntil function to ensure continuous evaluation despite already returning a result to the client.

I believe that utilizing Promise.all would not meet this requirement, as it would wait for all three promises to complete before returning any result.

javascript typescript async-await promise cloudflare-workers

Answer 1

Answer №1

If you want to handle multiple promises and only care about the first one that finishes, you can use a combination of the .then() handler with Promise.race(). The .then() allows you to process each result individually, while Promise.race() signals when the first promise is complete:

// Three promises we are interested in
const fetchFromGoogle: Promise<T> = googlePromise().then(result => { 
    /* process this one here whenever it completes */
    return someValue;
});
const fetchFromAmazon: Promise<T> = amazonPromise().then(result => { 
    /* process this one here whenever it completes */
    return someValue;
});
const fetchFromCloudflare: Promise<T> = cloudflarePromise().then(result => { 
    /* process this one here whenever it completes */
    return someValue;
});

// Get the value of the first completed promise
const winner: T = await Promise.race([fetchFromGoogle, fetchFromAmazon, fetchFromCloudflare]);

Note that Promise.race() resolves once the first promise settles, regardless of success or failure. If the first promise rejects, that is what Promise.race() will return. Use Promise.any() if you specifically want the first fulfilled promise.

Answer 2

If you want to handle multiple promises and only care about the first one that finishes, you can use a combination of the .then() handler with Promise.race(). The .then() allows you to process each result individually, while Promise.race() signals when the first promise is complete:

// Three promises we are interested in
const fetchFromGoogle: Promise<T> = googlePromise().then(result => { 
    /* process this one here whenever it completes */
    return someValue;
});
const fetchFromAmazon: Promise<T> = amazonPromise().then(result => { 
    /* process this one here whenever it completes */
    return someValue;
});
const fetchFromCloudflare: Promise<T> = cloudflarePromise().then(result => { 
    /* process this one here whenever it completes */
    return someValue;
});

// Get the value of the first completed promise
const winner: T = await Promise.race([fetchFromGoogle, fetchFromAmazon, fetchFromCloudflare]);

Note that Promise.race() resolves once the first promise settles, regardless of success or failure. If the first promise rejects, that is what Promise.race() will return. Use Promise.any() if you specifically want the first fulfilled promise.

Competing in a fast-paced race with JavaScript promises to guarantee the completion of all

Answer №1

Similar questions

React.Suspense is looking for a different type of data following the update

The p5.play library does not function properly on repl.it

Translate3d increases the whitespace towards the end of the page

Error 431 is encountered when submitting an Axios post request

The Fixed Navbar is causing sections to be slightly off from their intended positions

How to show line breaks in MySQL text type when rendering in EJS

Are there any techniques for running unit tests on a Vue.js transition?

Having trouble with your React/TypeScript/Redux/Thunk action not dispatching and the state remaining unchanged?

Is it feasible to create a doughnut chart with curved edges?

Sorting in MongoDB aggregation operations

When using Vuetify's v-text-field with the type "number", remember to assign a null value instead of an empty string

Attempting to grasp the concept of Typescript generics

Using Jquery to retrieve data in sections from a server and continuously add it to a file on the client side

Efficient method to update the state of a result in React JS using hooks within an asynchronous function and useState

Creating Bootstrap Popover dynamically on a jQuery DataTable is a straightforward process that can enhance user experience

Accessing stored web pages / Browser as an interactive interface

How can I trigger my function in jQuery after inputting into the jQuery text field?

Oops! There seems to be an issue with trying to access the 'map' property of undefined within the render method

What is the best way to preserve the state of child components after being filtered by the parent component?

The Johnny-Five stepper initiates movement within a for-loop