Combining Promise.all with multiple distinct data types for returned values

Question

Combining Promise.all with multiple distinct data types for returned values

Can Promise.all() accept an iterable with different resolved types?

For example, can promise.all([promiseA, promiseB, promiseC]) work if promiseA and promiseB return void but promiseC returns boolean?

I attempted this and it seems not possible. I am unsure whether an iterable can have different types, so I wanted to confirm. The error I encountered is related to TypeScript in my code.

PromiseC: Promise<boolean>;
PromiseA: Promise<void>;
PromiseB: Promise<void>;

const promises = [this.promiseA, this.promiseB];
if (!flag) {
   promises.push(this.promiseC); 
}
Promise.all(promises).then(() => { // do something}

https://i.sstatic.net/cSCw1.png

Thank you for your help!

javascript typescript promise iterable

Answer 1

Answer №1

Absolutely, it is possible to utilize promises that return different types. The Promise.all(iterable) method, as explained in the MDN documentation, functions in the following way:

It provides a single Promise that resolves once all promises within the iterable have resolved or if there are no promises in the iterable. In case of rejection, it will reject with the reason from the first promise that rejects.

The resolved promise will contain:

... an array consisting of all values from the iterable provided as arguments (including non-promise values).

The output type is Array since any type can be stored in each element of a JavaScript array. This enables achieving the scenario you outlined. Below is a sample demonstration, with the console displaying undefined for two elements, along with a Number and a String type also present.

var p1 = new Promise((resolve, reject) => {
  resolve(console.log("Performing task...results in undefined akin to how a function behaves"))
})
var p2 = undefined;
var p4 = Promise.resolve(true)
var p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 100);
}); 

Promise.all([p1, p2, p3, p4]).then(values => { 
  console.log(values); // Array contains multiple types.
});

Answer 2

Absolutely, it is possible to utilize promises that return different types. The Promise.all(iterable) method, as explained in the MDN documentation, functions in the following way:

It provides a single Promise that resolves once all promises within the iterable have resolved or if there are no promises in the iterable. In case of rejection, it will reject with the reason from the first promise that rejects.

The resolved promise will contain:

... an array consisting of all values from the iterable provided as arguments (including non-promise values).

The output type is Array since any type can be stored in each element of a JavaScript array. This enables achieving the scenario you outlined. Below is a sample demonstration, with the console displaying undefined for two elements, along with a Number and a String type also present.

var p1 = new Promise((resolve, reject) => {
  resolve(console.log("Performing task...results in undefined akin to how a function behaves"))
})
var p2 = undefined;
var p4 = Promise.resolve(true)
var p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 100);
}); 

Promise.all([p1, p2, p3, p4]).then(values => { 
  console.log(values); // Array contains multiple types.
});

Combining Promise.all with multiple distinct data types for returned values

Answer №1

Similar questions

Is jQuery still recommended for adding animations in VueJS?

`Javascript framework suggests ajax navigation as the preferred method`

Is there a way to combine an onclick function with a return false statement within a submit button?

Using AngularJS to hide elements within a nested dictionary structure

Experiencing an excessive amount of re-renders can lead to performance issues. React implements limits on the number of renders to avoid potential infinite

Enabling the use of dot or full stop in JavaScript keycode for numeric input

Is it possible to enable full screen window functionality in Angular 2 by simply clicking a button? Let's find out

Node.js poses a challenge when it comes to decoding incoming request data

Retrieving an image from a JSON file based on its corresponding URL

An error occurred with useState and localStorage: the parameter type 'string null' cannot be assigned to a parameter of type 'string'

Using Three.js to render an octahedron shape

Implementing Ajax functionality in MVC 3 to return a partial view

Tips for concealing the delete button within the main content area and displaying it in the subsequent "add" pop-up window upon clicking the "add" button in Angular

What is the purpose of including window and undefined as parameters in this jQuery plugin?

Ways to troubleshoot the error message 't.rangeslider is not a function' in which rangeslider is a personalized function

Utilizing Cordova and AngularJS to efficiently retrieve JSON data through XMLHttpRequest in a factory

Issues with connecting static files in express.js

Adjust the color of radio button text with Jquery

The Java Selenium script encountered an illegal type error when trying to execute JavaScript through JavaScriptExecutor: driverFactory.CustomWebElement

Unable to access structuredClone on the global object within a Node.js application