Promise.all or PromiseHash

Promises have become the defacto way of dealing with asynchronous data in Javascript. Promises are not a new concept, in fact they have existed since 1976. In the world of Javascript they became popular around 2011 through the popular Deferred Objects functionality of jQuery.

Promises introduced a new way of dealing with Async data and allowed us to move away from the callback pattern, often referred to as “callback hell”. In 2012 Promises were proposed as a spec in order to standardise the way many libraries were implementing promises. Promises were accepted into the 2015 spec. But what exactly is a Promise?

What is a promise

How a promise works

A promise is an object that is used for deferred or async computations, it represents an operation that hasn’t completed yet but will in the future. A promise has 3 different states.

1. Pending
2. Fulfilled
3. Rejected

Simply put a Promise is an object that holds a value that is “promised” to be returned to you at some point in the future. We can use many different ways of catching the different states of a promise. Typically we use the .then and .catch methods. Since ES8 we can natively use async await, and even if we cannot use it natively there are plenty of libraries out there to allow its use.

Promise.all

There are many built in promise methods. For the purposes of this article we will just look at the .all method of promises. This method will allow us to pass an iterable array to a promise in order to resolve multiple promises in the one go. This method returns a single promise that fulfils when all the promises have been fulfilled. If one of the promises rejects it rejects with that single promises reason.

const dummyPromiseOne = () =>new Promise(resolve => setTimeout(() => resolve("hello"), 2500));
const dummyPromiseTwo = () =>new Promise(resolve => setTimeout(() => resolve("hello"), 2500));
async function callThem() {
   const responseArray = await Promise.all([
      dummyPromiseOne(),
      dummyPromiseTwo()
   ]);
   console.log(responseArray);
   // response array ['hello', 'hello']
}
callThem();

Promise.all is most commonly used with similar types of requests. But there is no reason for it to be. If you have cases where you need to make a remote API request and read a local file and once you have the data from both calls you want to do something with the data then Promise.all is what you want to use.

promiseHash

Promise.all as a method takes an iterable array, but what if we need to be able to target specific properties returned to us from a Promise. Based upon the hash method provided by RSVP this method allows you to reference many promises at once, but avoid encoding the actual promises order. When passing an Object to the hash it will return a new Promise that will be fulfilled when all of the promises has been fulfilled, or rejected immediately if any promise is rejected.

The key difference to the Promise.all function is that both the fulfilment value and argument to the promiseHash method are objects. This allows for simple references to the results directly from the returned object without having to worry about the order they are entered in the first place.

const promiseHash = require('promise-hash-method');
const dummyPromiseOne = () =>new Promise(resolve => setTimeout(() => resolve("hello"), 2500));
const dummyPromiseTwo = () =>new Promise(resolve => setTimeout(() => resolve("hello"), 2500));
async function callThem() {
     const responseObj = await promiseHash(
         dummyOne: dummyPromiseOne(),
         dummyTwo: dummyPromiseTwo()
     ]);
     console.log(responseObj);

// response obj {dummyOne: 'hello', dummyTwo:'hello'}
}
callThem();

Conclusions

Both Promise.all and promiseHash are useful, it is not a case of one versus the other but rather a case of which best fits the use case one is currently working with. One will allow you to reference quickly based on the index of the array in which it is sitting where as the other allows you to access it instantly based on its property name.

You can download the npm package here to test out the promise hash method.

https://www.npmjs.com/package/promise-hash-method