Denise Gosnell

Join a JavaScript newbie&rsquo;s journey to understanding async and await in this post &mdash;&nbsp;<a href="https://astra-tests.netlify.app/">a live web app</a>&nbsp;that times how long it takes to make asynchronous API calls.
After my first introduction to&nbsp;<a href="https://www.javascript.com/">JavaScript</a>&nbsp;about six months ago, I wanted to reach a deeper understanding of the built-in asynchronous programming concepts within the JavaScript language:&nbsp;<code>async</code>,&nbsp;<code>await</code>, and&nbsp;<code>promises</code>. To teach myself these concepts, I came up with a close to real-world, testable question for this live app:
<div>How long will it take to fetch data via REST APIs from a webpage?</div>
There are many, many ways we can do this.&nbsp;<a href="https://astra-tests.netlify.app/">This post</a>&nbsp;(which is a real, live app) focuses on timing the roundtrip API calls between two different cloud-based services:
<div>1. Webapp hosting and content delivery network (CDN):&nbsp;<a href="https://www.netlify.com/">Netlify</a> 2. Cloud Database:&nbsp;<a href="https://dtsx.io/3lgYQjw">DataStax Astra DB</a></div>
The rest of this post details how I set up the timing tests using asynchronous API calls, and a few hiccups I ran into along the way.&nbsp;<a href="https://dtsx.io/3A0EEsc">Go here for a 10-minute tutorial</a>&nbsp;on how to set up Netlify functions to make API calls to an&nbsp;<a href="https://dtsx.io/3lgYQjw">Astra</a>&nbsp;database.
<h2>How do we set up asynchronous timing tests?</h2>
Let&rsquo;s set up 10 tests. Each test will make 10 asynchronous (in parallel or simultaneous) API calls to our database in&nbsp;<a href="https://dtsx.io/3lgYQjw">Astra DB</a>. Our goal is to time the round trip for each set of asynchronous API calls from a simple web app to our cloud database and back. The pseudocode for this would look like this:
<pre> 1 Write a function to run multiple rounds of tests
 2 For each round of testing
 3 Start a timer in the app
 4 Call a function that will perform asynchronous API calls
 5 Stop the timer in the app
 6 Display the total time for that round</pre>
 The above pseudocode translates into the following JavaScript:
<pre>1 function runTests(rounds, numberAPICalls) {
2 for (round = 0; round &lt; rounds; round++) {
3 var startTime = new Date();
4 timeTest(numberAPICalls).then(() =&gt; {
5 var finishTime = new Date();
6 var timeTaken = finishTime - startTime;
7 );
8 }
9}</pre>
The work of doing the asynchronous API calls is in the&nbsp;<code>timeTest</code>&nbsp;function; we will get to what that does after we take a look at my first mistake.
Click the link below to run this web app&rsquo;s timing suite with the function definition above. Before reading the answer written below the output, can you see what is wrong with the output?
<a href="https://astra-tests.netlify.app/badcalls.html">Run Bad Tests Live</a>
<h2>What&rsquo;s wrong with these results?</h2>
There are two glaring mistakes with the output on the other page that led me to think we weren&rsquo;t setting this up correctly. First, the&nbsp;<code>round</code>&nbsp;number is the same for each series of tests. Second, the&nbsp;<code>startTime</code>&nbsp;is the exact same for each test.
Something isn&rsquo;t right here. It seems like the&nbsp;<code>round</code>&nbsp;number and the&nbsp;<code>startTime</code>&nbsp;are not updating with each subsequent series of tests. Instead, we want both the&nbsp;<code>round</code>&nbsp;number and&nbsp;<code>startTime</code>&nbsp;to wait for the tests to complete before changing the value.
This is where we run into the&nbsp;<code>async</code>&nbsp;and&nbsp;<code>await</code>&nbsp;a pattern in JavaScript.
<h2>What is the <code>async</code> / <code>await</code> pattern and how do we use it here?</h2>
Think of&nbsp;<code>async</code>&nbsp;and&nbsp;<code>await</code>&nbsp;as making the code read synchronously (like Python), even though it really isn&rsquo;t.&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">This great blog by Mozilla</a>&nbsp;details the definitions and usages of the&nbsp;<code>async</code>/<code>await</code>&nbsp;pattern. The definition of&nbsp;<code>await</code>&nbsp;is:
<div><code>await</code>&nbsp;can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value.</div>
We need to pause our code after the test so that the timer can correctly calculate the runtime for each set of asynchronous API calls. Let&rsquo;s change the function above into an&nbsp;<code>async</code>&nbsp;function and tell the code to pause for the entire set of API calls to finish with&nbsp;<code>await</code>&nbsp;before stopping the timer. This changes the function to the following:
<pre>1 <code>async</code> function runTests(rounds, numberAPICalls) { 2 for (round = 0; round &lt; rounds; round++) { 3 var startTime = new Date(); 4 <code>await</code> timeTest(numberAPICalls).then(() =&gt; { 5 var finishTime = new Date(); 6 var timeTaken = finishTime - startTime; 7 ); 8 } 9 }</pre>
Click the link below to see the results when using the above structure for your testing skeleton:
<a href="https://astra-tests.netlify.app/goodcalls.html">Run Good Tests Live</a>
Great! This testing suite is now properly timing only one round of API calls at a time. Last up, let&rsquo;s take a look at how we are making the API calls.
<h2>How do you kick off a bunch of asynchronous API calls?</h2>
I love how easy it is to use Netlify&rsquo;s&nbsp;<a href="https://www.netlify.com/products/functions/">functions</a>&nbsp;feature. For this project, I created&nbsp;<a href="https://dtsx.io/3z17sPM">one REST API</a>&nbsp;to make calls from Netlify to the database in&nbsp;<a href="https://dtsx.io/3lgYQjw">Astra</a>. In the timing suite, the API call is made in one&nbsp;<code>async</code>&nbsp;function which waits for the payload to return. You can see the same&nbsp;<code>async/await</code>&nbsp;pattern in the function below to make the API call and wait for the result:
<pre>1const addData = async (testNumber) =&gt; {
2 const response = await fetch("/.netlify/functions/writeRestAPI", {
3 method: "POST",
4 body: testNumber,
5 });
6 const responseBody = await response.json();
7};</pre>
The last step in our setup is to make simultaneous calls to this API. We need one last&nbsp;<code>async</code>&nbsp;function for this:
<pre>1 async function timeTest(numTests) {
2 const dataPromises = [];
3 for (let i = 0, ilen = numTests; i &lt; ilen; i++) {
4 dataPromises.push(addData(i));
5 }
6 return await Promise.all(dataPromises);
7}</pre>
I bolded two sections in the above code snippet. First, let&rsquo;s look at&nbsp;<code>Promise.all()</code>. This is the final piece of key functionality for our testing. The use of&nbsp;<code>Promise.all()</code>&nbsp;here will wait for all asynchronous API calls to return before returning the results.
You can find all of the code for&nbsp;<a href="https://dtsx.io/3zVn0WG">this project here.</a>
Follow the&nbsp;<a href="https://dtsx.io/3C3u98d">DataStax Tech Blog</a>&nbsp;for more developer stories. Check out our&nbsp;<a href="https://dtsx.io/3hjcH7G">YouTube</a>&nbsp;channel for tutorials and here for DataStax Developers on&nbsp;<a href="https://dtsx.io/3lcnxgF">Twitter</a>&nbsp;for the latest news about our developer community.
Resources
<ol>
<li><a href="https://www.javascript.com/">JavaScript</a></li>
<li><a href="https://www.netlify.com/">Netlify</a></li>
<li><a href="https://dtsx.io/3lgYQjw">DataStax Astra DB</a></li>
<li><a href="https://github.com/DataStax-Examples/todo-astra-jamstack-netlify#prerequisites">Github Repository: Todo list JAMStack app example with ReactJS + DataStax Astra DB</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
<li><a href="https://www.netlify.com/products/functions/">Netlify Functions</a></li>
<li><a href="https://dtsx.io/3z17sPM">Github Repository: Creating a REST API to make calls from Netlify to Astra DB</a></li>
<li><a href="https://dtsx.io/3zVn0WG">Github Repository: Testing API speed for Astra DB in a variety of scenarios</a></li>
</ol>

How Fast Is Netlify + DataStax Astra?

Denise GosnellChief Data Officer

Share

Share

How do we set up asynchronous timing tests?

What's wrong with these results?

What is the async / await pattern and how do we use it here?

How do you kick off a bunch of asynchronous API calls?

More Company

DataStax Acquires Langflow to Accelerate Generative AI Development

The Top 5 DataStax Stories from 2023

2023 Recap: Data = AI

DataStax Astra DB Nabs Three Prestigious 2023 TrustRadius “Best of” Awards, Dominates the Vector Databases Category

One-stop Data API for Production GenAI