Javascript - Await and Async Syntax

About

await and async is the second promise syntax that permits to manipulate promise.

The async/await syntax is part of ECMAScript 2017 and reduces the callback nesting find in the chaining syntax.

Example

• The promise function addOne that will add one asynchronously.

addOne = async function(x){
   return x+1;
};

• The async syntax with a Immediately invoked function expression (IIFE)

// Function declared as async so await can be used
(async () => {
    // A aysnc function call returns a promise
    promise = addOne(0)
    //
    let a;
    try {
       // You unwrapp the promise with the 'await' keyword 
       // You get the value (or an error is thrown)
        a = await promise;
    } catch (e) {
       // You catch the error
       console.log("Error! "+e);
    }
    //
    // Tip And you can have the creation of the promise and the await call on the same line
    a = await addOne(a);
    console.log("The value of a is now "+a);
})();

Concept

async/await is a promises syntax handling where:

• async returns a promise by declaring a executor function
• await:
  • unwraps a promise and either:
    • returns the return value the promise was resolved with
    • or throws an error if the promise was rejected.
  • should be used within an async function (Chrome now seems to support top level await)
• error handling is done with try/catch block (promise chaining has a catch function)

The async / await syntax reduce the callback nesting.

Management

Promise creation

The return value of an async function is always a promise.

async function fn(x){
   if (x) {
     throw new Error("Error !");
   } else {
      return "All good";
   }
};

// The return value of an ''async'' function is always a promise. 
v = fn();
console.log("We go back a "+v.constructor);

Fulfillment

Get the resolved value

addOne = async function(x){
   return x + 1;
};

(async () => {
	const a = await addOne(0);
	console.log("The value after await is "+a);
})();

Failure

With a try/catch block.

failBad = async function(){
   throw new Error("Bad failure")
};

(async () => {
    try {
	const a = await failBad(0);
	console.log("The value after await is "+a);
   } catch (e) {
       console.log("Failure !!! with the message ("+e.message+")");
   }
})();

Example

Async fetching

One

// This function returns a fetch that returns a promise
// Don't return any other type of value otherwise the wait will have no effect
function wait(sec,name) {
   if (typeof sec === undefined){
      sec = 1;
   }
   if (typeof name === undefined){
      name = 'Default Promise Name';
   }
   log(name+": Waiting "+sec+" seconds");

   return fetch("https://gerardnico.com/wait.php?sleep="+sec)
   .then(function(response) {
        status = response.status;
        log(name+": has waited "+sec+" seconds and returned (Statuscode: "+response.status+")");
        return status;
    })

}

function log(txt){
   now = new Date(Date.now());
   console.log(now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+" - "+txt);
}
( async () => {
    log("Main: Creating promises");
    promise = wait(5, "Promise");
    log("Main: Await promise");
    let returnValue = await promise;
    log("Main: We got a return value ("+returnValue+")");
}
)();

Many

Async fetching

// This function returns a fetch that returns a promise
// Don't return any other type of value otherwise the wait will have no effect
function wait(sec,name) {
   if (typeof sec === undefined){
      sec = 1;
   }
   if (typeof name === undefined){
      name = 'Default Promise Name';
   }
   log(name+": Waiting "+sec+" seconds");

   return fetch("https://gerardnico.com/wait.php?sleep="+sec)
   .then(function(response) {
        status = response.status;
        log(name+": has waited "+sec+" seconds and returned (Statuscode: "+response.status+")");
        return status;
    })

}

function log(txt){
   now = new Date(Date.now());
   console.log(now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+" - "+txt);
}

log("Main: Creating promises");
let promises = [];
promises.push(wait(1, "Promise 1"));
promises.push(wait(5, "Promise 5"));
log("Main: Promise all promise");

// Promise create another thread and let the script execution continue
Promise
    .all(promises)
    .then(results=> log("PromiseAll: All promises has returned with "+results.length+" results"));
log("Main: End of the script will be fired immediately !");