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>

Build and scale cloud native apps

Discover the benefits of DBaaS and why your apps deserve an upgrade.

Learn about NoSQL Databases

Learn about NoSQL databases with Apache Cassandra and Astra DB.

2022 Recap: A Year for Customers, Community, and Real-Time Data

Highlights from 2022 and a glimpse into the year ahead.

ViewingCompany

How Fast Is Netlify + DataStax Astra?

Sign up for our Developer Newsletter