Recursive asynchronous calls with JavaScript and ES6
By:
Mark Biek
on 1/30/2018
To avoid sending too much data all at once, many APIs return paginated results. Most of the time (especially when you’re displaying the results), that’s exactly what you want.
Sometimes, though, you want to collect all of that data first, then do stuff with it. While this is technically possible with basic JS and Promises, it gets ugly fast!
Here’s where ES6 generator functions can simplify things.
Let’s pretend we’re calling an API that returns a payload like this:
(If you don’t want to pretend, take a look at the Mailgun Events API since that’s what this exercise is based on.)
Step 1: Define a generator function which calls the API
This function runs in an infinite loop and will return the results of the last ajax call each time generator.next()
is called. The function also changes the url it’s calling so that it’s getting the next page of data on each call.
Step 2: Define a function to call our generator.
This function initializes our generator, then calls itself recursively, getting each page of data back from the generator until there is no more data.
Step 3: Start the process by calling our function
This is still a little tricky to conceptualize (as recursion always is), but it’s a powerful way to tackle this problem with a minimal amount of code.
Related Posts
Wordpress to Sanity Data Script
By:Nick Stewart on 3/11/2021
One of the biggest challenges of moving from one CMS to another is getting your existing data to the new platform. In our case, we were moving our existing WordPress platform, which had been around for years, over to the Sanity.io platform.
Read More »Developing the New via.studio
By:Alec Robertson on 6/14/2021
A deep dive into creating a fast, user-focused experience on the latest web technology stack for the new via.studio website.
Read More »