Using ES2017 async/await feature to work around rate limited APIs

by Sam Zhao

This article was originally published on Medium..

Rate limits are a curse to API consumers and a blessing to API developers. Some APIs even have different limits for different endpoints.

Of course, if we are just calling one endpoint multiple times, we can simply debounce or throttle the call. However, it can get tricky when we are triggering multiple calls to different endpoints after calling one endpoint.

Plus, debounce is so 2013; we are in 2018 2019 already.

So today, I’d like to present a declarative way of working around rate limits as API consumers.

Hopefully, this makes consuming rate limited APIs easier while at the same time keeping API developers and DevOps people happy.

What is async/await

Let’s take a look at how async/await works first.

For those of you who already know this, close this tab please and stop looking at my embarrassing explanation below.

Put simply, async/await allows us burnt out and fatigued JavaScript developers to write asynchronous code (remember callbacks and Promises?) in a synchronous way.

Here’s a code snippet to illustrate it more clearly:

As you can see, Promises already help reduce some levels of nesting.

But async/await takes it to a whole new level.

I’ll give you a moment to appreciate this amazing technological advancement.

Now, we can do some cool things with this, such as putting a delay before API calls in a declarative way, like this:

Please do try this at home.

Using async/await in a loop

Hopefully you are super stoked about async/await now. You might even be thinking about using it in a for-loop!

Don’t.

Take a guess what the following snippet does:

If your guess is that each index will be logged out with a 1 second delay in between, then bwah bwah you are wrong. Go ahead, try it in the devtools console and you'll see.

Properly using async/await in a loop

To use the async/await delay helper in a loop, we will need to use another new ECMAScript feature (ES2015 to be exact) to make it work: the for..ofloop.

Here’s an example:

The index of each list item will now be logged out with a one-second delay between each other.

Applying to rate limited API calls

Now that we have figured out how to use async/await in a loop, we can apply this to work around rate limited calls.

I have written a delayed map helper to make it even easier:

And here’s an example usage of the helper:

Additional information

I hope by now you are convinced that async/await can help you write declarative, readable and maintainable code.

There are also other benefits I haven’t touched on in this article, such as the ability to catch errors with the more primitive try..catch block instead of relying on the one provided with the Promise API (which actually is also becoming a primitive).

Note that using ES2015 and ES2017 features does require transpilation steps (e.g. with BabelJS) for them to work in browsers that don't support them out of the box (works in most modern browsers though).

And honestly, debounce and throttle are most likely sufficient for most use cases.