I love the new library that ships with ES6, though one thing has been left out, a function to sequentially execute multiple promises. Promise We can use a library like , , , , etc., or we can make our own. I really only need a single function and it seemed kind of heavy to import a whole library for one function which is why I created this. Q Bluebird RSVP.js Async One trait of the Promise is that it executes immediately. This actually works against us, we’ll need the Promises to execute when we are ready for it to execute. The way I did this was to convert each Promise into a factory function. The factory function will be a simple function that will return a Promise. Now our Promises will execute when decide. we For this *cough* contrived example, I’ve decided to use jQuery’s ajax method as my promise. // some dummy urls to resolveconst urls = ['/url1', '/url2', '/url3']// convert each url to a function that returns an ajax callconst funcs = urls.map(url => () => $.ajax(url)) Solving this problem is a little complex, and I find it helps me to think ahead a little bit about what our function should output. Probably something like this: Promise.resolve().then(x => funcs[0]()) // resolve func[0].then(x => funcs[1]()) // resolve func[1].then(x => funcs[2]()) // resolve func[2] I also want the final promise to return an array that contains the results of each promise. This was the most complex part. I needed to start each promise with an empty array and then concatenate the results of each promise to that array. Stick with me, I’ll try my best to break it down. [] I’m gonna start off this Promise with an initial value of an empty array like this . Then execute each factory function using the Promise’s function. Promise.resolve([]) then For simplicity sake, this example just resolve index of func. We’ll do the rest later. 0 // start our promise off with an empty array. this becomes all.Promise.resolve([])// all is the array we will append each result to..then(all => {return funcs[0]().then(result => {// concat the resolved promise result to allreturn all.concat(result)})}) This block of code can be expressed this in a more compact way by removing all the , , and from our code. { } return Promise.resolve([]).then(all => funcs[0]().then(result => all.concat(result))) A neat trick to get rid of that arrow function is directly call like this: concat Promise.resolve([]).then(all => funcs[0]().then(Array.prototype.concat.bind(all))) And finally, this will be the output of our function: Promise.resolve([]).then(x => funcs[0]().then(Array.prototype.concat.bind(x))).then(x => funcs[1]().then(Array.prototype.concat.bind(x))).then(x => funcs[2]().then(Array.prototype.concat.bind(x))) That wasn’t so bad was it? Now that we know our input and output, let’s make! We could use a loop (but that’s not very functional), we could also use recursion, but what I really like for this problem is . for reduce Whenever you need to transform a list into a single object, consider using reduce. Our function should take an array of factory functions (that each return a Promise) and reduce them into the single Promise chain expressed above. promiseSerial Our initial value of is passed into our reduce method like this: Promise.resolve([]) const promiseSerial = funcs =>funcs.reduce((promise, func) => ???, Promise.resolve([])) The last piece is to generalize one of our Promise 's from above and update some argument names. (the new part is in bold) then const promiseSerial = funcs =>funcs.reduce((promise, func) =>promise.then(result => ,Promise.resolve([])) func().then(Array.prototype.concat.bind(result))) That’s it! A pretty simple… scratch that… short function that will resolve Promises sequentially. Lastly, let’s slap it all together. Now we have eliminated the need to install a 3rd party library with our shiny new function. promiseSerial Hey! You actually made it to the end of this article! What is your use case for resolving promises sequentially? How did you solve this? Please share your experiences. I know it’s a small thing, but it makes my day when I get those follow notifications on Medium and Twitter ( ). Or if you think I’m full of shit, tell me in the comments below. @joelnet Cheers! Related Articles _In my last article, Death of the for Loop, I tried to convince you to abandon the for loop for a more functional…_medium.com Rethinking JavaScript: Break is the GOTO of loops _JavaScript’s for loop has served us well, but it is now obsolete and should be retired in favor of newer functional…_hackernoon.com Rethinking JavaScript: Death of the For Loop _Thinking functionally has opened my mind about programming._medium.com Rethinking JavaScript: The if statement

Mozilla

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Functional JavaScript: Resolving Promises Sequentially

Too Long; Didn't Read

Companies Mentioned

Joel Thoms

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Functional JavaScript: Resolving Promises Sequentially

Too Long; Didn't Read

Companies Mentioned

Joel Thoms

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES