When a whole bunch of tasks need to be accomplished before moving on with things, some or all of which might take a while, one way to do so is with the Promise.all method. This method will return a resolved promise object when everything that is given to it via an array as the first argument is resolved if a promise, or is something that is not a promise, or in other words it is all ready a value to begin with. So the array that is given to the promise all method can be a mixed collection of values some of which can be promises, and things will not continue until all promises in the array are resolved or rejected.
So it goes without saying that the promise all method is fairly useful whenever I am in a situation in which I need to do a whole bunch of async tasks, and then continue with more to do once all of that has completed. The promise all method should be there when it comes to native Promise support, but can also be added when working with older platforms via something like bluebird.
So then lets take a look at a few examples of the promise all method in action.
So then something like this:
Will result in the text Hello World being logged to the console. However this is not in any way a typical use case example of the Promise all method, and I could just pass the array to a Promise.resolve static method call to get the same result. I am just bothering with this to make a point which is that the array that I give to Promise.all can be an array of primitives, or it can also be an array of Promise objects that will resolve or reject in certain situations, or a combination of the two. More on this later in this post, but for now on many at least a few more basic examples are call for.
Although The array that is given to the Promise all method can be an array of anything, often it should contain at least one if not more promise objects. When all the Promise objects in the array resolve, then the next then method in the promise chain will be called.
When calling this source code example I get an array of numbers where each number is the amount of time it took for each of the called of the delay method to finish.
If Just one of the promise objects in the array reject, then so will the promise all call as a whole and then next catch statement will file in the promise chain for the Promise all call.
Here I have a simple example of Promise all in nodejs 8.x, in this version of nodejs the util promisify method was introduced that can be used to make methods that just make use of a callback, return a promise. I can then use this as a way to make file system methods return promises, which I can then use in an array. This array can then be passed as the first argument for promise all.
So in the example here I am using the util promisify method to make sure that the fs stat method will return a promise when used, and doing the same for the fs read file method. In addition I am doing so in an array, so I have an array of two promise objects and of course I am passing this to the Promise all method as the first argument. Wit that said the promise all method then returns a promise as it should, and just like with any other promise I can call then and catch methods off of it. In the event that and error happens, and I end up with a rejected promise I end up logging an error message, if all goes to plan then it will resolve and the code in the then function call with run. In the body of that then function call I will have access to both a stats object, and the content of the read file call as the array of resolved values will be passed as an argument there.
That is a bit of a mouth full, but maybe it is best to just play around with a code example to get a better idea of that the deal is when this.
If you are using a later version of node, and you do not need to work about pushing backward compatibility back to node 8.x then the code example could be a litter different as some of the later versions of node have files system methods that will return promises anyway. However in any case this simple example of promise all should help give you a basic idea of what the deal is with the promise all method and why it can come in handy now and then.
So if a browser does support Promise all it can also be used in the front end as well. New browser technologies such as fetch return promises, and it is also possible to create custom promises as well with the Promise constructor. However there is just one little concern when it comes to browser support, if you care about supporting any version of IE at all you will need to use something that will bring promise all support to those older platforms.
In this example I am passing an array that is a concatenation of a hard coded array of values, and an array of promise objects for files that contain additional string values. In the event that all the fires are there, and there is no problem reading them, then an array of the hard values along with the loaded values will be returned. If there is an array of any kind then the hard values will be returned only.
this example could be written differently where the hard coded values are added later, but you get the idea. The array can be of mixed values, and in some cases this might be helpful. Say you need to do something where you start off with some hard coded values, and what is loaded will effect those values. The hard coded values can be just packed up along with everything else and passed down along the promise chain.
It is a good idea to know a thing or two about the array prototype methods when working with the Promise all method. Mainly the array map and array filter methods, as these are the methods that I find myself using the most often when working with arrays of data, or objects to which I want to create an array of promises for that I would then pass to the Promise all method. So then in this section I am going to be going over a few quick examples of using the promise all method with certain array prototype methods. The basics covered in this section here will then come up in the actually basic project examples that I will be getting to later in this post.
The array map method is what I can use to create a new array from a source array where I want to do something for each element in the source array that will then result in the new element for each element in the new array. In this example I have an array of times and I want to create an array of promise objects for each time, for this I can just call the array map method and then just return a promise for each time by calling the delayed method that returns a promse and pass the time for each call of that method.
The array filter method is then what I want to use to create a new array, where each element in the new array is something that meets a given condition for elements in the source array. Once again lets take an example similar to that of the map example, but this time say I want to only create an array of promises for each time that is less than one thousand. For this I can use the array filter method to create an array of times that are below one thousand and then call the array map method off of that array.
So say I want to walk a file system path for all items in a path, and then filter out all the folders. After that I want to read all of the files in that path. In nodejs I can use the readdir method to read the contents of a dir, and then I can use promise all for each item in the path, getting the stats for each item. That can the be used to filter out all the folders, at which point I can the use promise all again to read all the files then as well.
In this example I am also using the util.promisify method as a way to make all the file system module methods that I am using return a promise rather than having to deal with call back hell.
5 - Nodejs promise all example that has to do with creating a JSON report for a collection of blog post files.
For yet another project example of the Promise all method here is yet another example that runs on top of nodejs, and does not use any npm packages. The goal here is to have some kind of system where I read all the mark down files in a given folder, and create objects for each file found in the given folder. I then write a json file that will contain all of the data that was extracted. For now with this example at least the goal is to just create a collection of objects where each object is just a file name, and also a date, and updated key that is extracted from the top from data of each mark down file.
When it comes to the Promise all method alone which is of course the theme of this post then the main method of interest to write about here would be the read all method. This method calls the get uri array method that will return a promise that should resolve to an array of file names for each post, that can then be used to create an array of promise objects each of which are a call of the read file method that will return a promise. When each of these promise resolve the end result will then be an object that contains the filename as well as the text that was read from the mark down file. This array of promise objects is then passed to, you guessed it the promise all method.
So I then have a index.js file that will make use of this report module that I have above. I just require in the module, and see about calling the main method that is exported by the module. The result of which is then a json file being crated for each of the demo posts that I have in my test project folder.
The end result of the report is then just a collection of objects for each markdown file that contain just the file name as well as updated and date keys extracted from the files header data. That is all that I wanted to do for this example at least, but there is taking this and making at least one or two more scripts that will do a bot more than just that such as tabulate things that I might want to know for a massive collection of text files.
So the promise all method can be used as a way to create a promise with an array of promises and other mixed values that will resolve when all of the promises in the array resolve, or contain values that are not a promise. In other words if I am every in a situation in whichI need to do create not just one promise but a whole bunch of them, then the promise all method is what I want to use to get things done.