Async await basic tutorials and examples

Async await basic tutorials and examples

This tutorial explains async and awaits tutorials and examples.

Async functions are used to achieve asynchronous programming.

async functions always return a promise. If the function is not returning the promise, It wraps the result in a promise

How to declare async functions in multiple ways

Async functions are used to do asynchronous functions. It pauses the current execution and runs the execution in a separate queue called the event queue. In Real-time, Async function does call API processing

  • async normal functions function are declared with the keyword async. It is a normal function
async function getMessage() {
return "Welcome";
}

which is equal to

async function getMessage() {
  return Promise.resolve("Welcome");
}
  • async function anonymous expressions Async functions are also declared anonymous and have no name. These can be assigned a variable
const variable = async function () {
  // do something
};

calling Async function returns always Promise. You can explicitly return a promise or value that wrapped with a value

console.log(getMessage())
  • Async Arrow functions examples

Arrow functions declared assigned to javascript variables. It is declared with either arguments or without arguments Async Arrow function without arguments

const getMessage = async () => {
console.log("Hello ")
}

Async with single arguments. Single arguments parenthesis are optional

const getMessage = async (msg) => {
console.log("Hello ",msg)
}
or
const getMessage = async msg => {
console.log("Hello ",msg)
}

Multiple arguments to arrow async functions

const getMessage = async (msg1,msg2) => {
console.log("Hello ",msg)
}
  • Async function also declared with static
static myfunc = async () => {
console.log("static function ")
}

How to Call async functions

Async functions are asynchronous that always return Promise.

Calling the async function always returns Promise.

  • using await keyword async functions are called with the await keyword.

await is waiting for a function to finish its execution. await only called in an async function.

async function getMessage() {
return "Welcome";
}
console.log(getMessage())
async function callMessage() {
const result = await getMessage();
console.log(result); // will print "welcome"
}

callMessage()

If you called await in without async functions, It throws below error

async function getMessage() {
  return "Welcome";
}
console.log(getMessage())
 function callMessage() {
  const result = await getMessage();
  console.log(result); // will print "Hello world!"
}

callMessage()

SyntaxError: await is only valid in async functions and the top-level bodies of modules

  • How to call async functions in synchronized functions

You have to use then catch block in synchronized funcitons

then() is used catch successfully resolved promises

async function getMessage() {
return "Welcome";
}
async function callMessage() {
getMessage()
.then(data=>console.log("success",data))
.catch(error=>console.log("error: ",error))
}

callMessage()// Prints success Welcome
  • async functions throws an error

For some reason, async functions throws an error, catch block is called with an error catching

async function getMessage() {
throw "failed";
}
async function callMessage() {
getMessage()
.then(data=>console.log(data))
.catch(error=>console.log("error",error))
}

callMessage() // error failed
  • async functions reject promise, not returning it

In this example, async functions is completed with Promise reject.

Promise is rejecting, but not returning it

async function getMessage() {
  Promise.reject("fail");
}
async function callMessage() {
  getMessage()
    .then((data) => console.log("success", data))
    .catch((error) => console.log("error", error));
}

callMessage();

Above code throws

**[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block or by rejecting a promise which was not handled with .catch(). The promise was rejected with the reason "fail".] {
  code: 'ERR_UNHANDLED_REJECTION'**
success undefined

node:internal/process/promises:279
triggerUncaughtException(err, true /_ fromPromise _);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block or by rejecting a promise which was not handled with .catch(). The promise was rejected with the reason "fail".] {
code: 'ERR_UNHANDLED_REJECTION'
}

It calls a catch block with an undefined result.

  • async functions returns rejected promise

catch function call back is called with an error

async function getMessage() {
return Promise.reject("fail")
}
async function callMessage() {
getMessage()
.then(data=>console.log("success",data))
.catch(error=>console.log("error",error))
}

callMessage();

Output:

error fail