PHP, Javascript & React

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.

Share to

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 »