Promise.all the DIY of JavaScript

I love to tinker. I often find myself looking around a store or online and thinking of how I could rework candle globe into a lamp or take old furniture and repurpose it. Often times this means waiting for parts and pieces from around the country or the world… which obviously results in a bit of clutter and a large bit of hurry up and wait (keep this metaphor in mind as you read).

While designing a digital version of a board game with a friend, we ran into issues around how to resolve a turn. Do we update the DOM optimistically? Do we daisy chain everything in a long line of fetch().then’s that make us cry inside when we look at our code…. With a bit of help and some direction, we where introduced into the Promise.all.

The sequence of events we were trying to resolve were as follows:

Being who we are, we didn’t want to render anything optimistically. The idea is that if the game where refreshed, we wanted what you last saw to persist. We needed all of these a-synchronous functions to resolve before we advanced the game and re-rendered the board. Now, some of these we could nest in a single call because of our data structure relationships like the active player and the piece they are using. However, the conditional was what was throwing us. Inside of the parent fetches, we lost access to a lot of the data we needed in order to complete the cycle.

— — — — — — ENTER PROMIS.ALL

Promise.all is a collection of promise objects and more specifically it takes an array for promise objects. The way Promise.all functions is that it will not resolve until one of two conditions is met:

1- As soon as the first promise object fails, the Promise.all fails (or rejects) with the rejected status of the first promise to fail.

2-All promises resolve. In this case the Promise.allwillresolve with an array of the results of each of it’s elements….

It solved all of our needs. We could confirm persistence to the database before taking action on the DOM and moving our game along. It also allows us to initiate multiple requests to an API so that we’re not compounding the response times, yet structure our next action based on the knowledge that we’ll have all of the parts we need before we proceed. You guessed it, that brings us back to the metaphor from before.

Often times in a project you’ll might need to wait on multiple sources to respond before you manipulate that data (or build that cool new lamp) but you don’t want to wait for one part to come in before you order the next unless you need something from that piece of data before moving to the next step. Promise.all allows you to send all of those requests at the same time and compile them in one place before you proceed. I hope this opens up new ideas of data flow and designs working in JavaScript. Good luck and happy coding!

Related posts:

Veis el rayo y esperáis el trueno. Está todo oscuro y, a veces, la lluvia que cae lo oscurece todo más. Es tiempo de brujas, dicen. O de dragones, cuentan. Vienen con el relámpago y el fragor. Nubes…

To prepare for the service, we have created a Google Docs sheet in which the stage and console layout can be prepared. The file contains some useful information. This video briefly introduces the…

Table is an important tool for representing data, however, for small screens e.g. mobile and tablet, it is also crucial to represent data in different way. Otherwise, it turns into chaos! For modern…