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:
| import axios from 'axios'; | |
| const API_URL = "https://jsonplaceholder.typicode.com/posts/1"; | |
| // Before async/await | |
| const logPostId = () => { | |
| axios.get(API_URL) | |
| .then(resp => { | |
| const { data } = resp; | |
| const { id } = data; | |
| console.log('Post Id:', id); | |
| }); | |
| } | |
| logPostId(); // Post Id: 1 | |
| // After async/await | |
| const logPostId = async () => { | |
| const { data } = await axios.get(API_URL); | |
| const { id } = data; | |
| console.log('Post Id:', id); | |
| } | |
| logPostId(); // Post Id: 1 |
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:
| const delay = time => | |
| new Promise(resolve => setTimeout(resolve, time)); | |
| const sendRequest = async () => { | |
| await delay(1000); | |
| return axios.get(API_URL); | |
| } | |
| // request fires after 1 second | |
| sendRequest(); |
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:
| const delay = time => | |
| new Promise(resolve => setTimeout(resolve, time)); | |
| const list = new Array(10).fill(); | |
| list.forEach(async (_, index) => { | |
| await delay(1000); | |
| console.log(index); | |
| }); |
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:
| const delay = time => | |
| new Promise(resolve => setTimeout(resolve, time)); | |
| const list = new Array(10).fill(); | |
| for (let index of list.keys()) { | |
| await delay(1000); | |
| console.log(index); | |
| } |
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:
| const delayedMap = async (list, iterator, delayTime) => { | |
| let promises = []; | |
| for (const item of list) { | |
| await delay(delayTime); | |
| promises.push(await iterator(item)); | |
| } | |
| return Promise.all(promises); | |
| }; |
And here’s an example usage of the helper:
| const toListItem = async item => { | |
| const { thing } = await sendRequest(); | |
| return thing; | |
| }; | |
| const delayTime = 100; | |
| const items = delayedMap(listOfStuff, toListItem, delayTime); |
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.