Javascript - Await and Async Syntax

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > ECMAScript - Grammar Standard

1 - About

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

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

3 - Example

addOne = async function(x){
   return x+1;
};
// 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);
})();

Advertising

4 - 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.

5 - Management

5.1 - 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);

Advertising

6 - Fulfillment

6.1 - 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);
})();

6.2 - 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+")");
   }
})();

7 - Example

7.1 - Async fetching

7.1.1 - 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+")");
}
)();

7.1.2 - Many

7.2 - 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 !");

Advertising
web/javascript/es/await.txt · Last modified: 2019/06/19 12:26 by gerardnico