What is the Async / Await Technique?

I am glad you asked as I have been waiting a long year to reveal this new technique. I was denied the opportunity to present this talk at last year's Empower conference but I can wait no longer (there is a plan you know and we have to keep on schedule).

In a nutshell the Async / Await Technique is the a simplified way of making asynchronous AJAX calls to QuickBase but to have the code appear synchronous. That explanation may not make much sense now but suffice it to say that using the new async / await feature in JavaScript allows you to write arbitrary complex sequences of AJAX calls without using callbacks or chaining promises together using then() methods. Perhaps an example will clear up any confusion.

Let's say we have an application with two tables (Table #1 and Table #2) and we want a script  that will purge Table #2 of all records and then copy all records returned from a query of Table #1 into Table #2. But since we want to emphasize that this technique can deal with any number of API calls we will purposely copy the records individually using multiple calls to API_AddRecord rather than using one call to API_ImportFromCSV.

So visit the following application and paste the code below into the console:

Async / Await
https://haversineconsulting.quickbase.com/db/bm3mnhpzq

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=598

If you look closely at the code you will see we wrote a function named process() that was called like this:

process(dbidTable1, qid1, dbidTable2);

However, process() was not a normal function as it has the new keyword async in front of its definition:

async function process(dbid1, qid1, dbid2) {
  //step 1 - Purge all records in Table 2
  //step 2 - Query all records in Table 1
  //step 3 - Loop over all records from step 2 and add record to Table 2
}

What this async keyword does is allow the function to pause occasionally at points in the code where an await keyword is used to indicate that we are waiting for the promise associated with an AJAX call to complete and return its result. As a consequence you will see several instances of await in the script similar to the following:

//step 1 - Purge all records in Table 2 var xml1 = await Promise.resolve(
  $.get(dbid2, {
    act: "API_PurgeRecords",
    qid: "1"
  })
);

Note there are no callbacks, then() methods or unnecessary indentation in the code. In fact, the code appears to read similar to synchronous code with one line of code following another in linear execution sequence.

I will have more to say about this technique in subsequent posts but this Async / Await Technique blows the doors off all prior asynchronous coding paradigms and it makes scripting QuickBase very easy.