JavaScript async Complete Tutorial

In this section, we will learn what the async is and how to use it in JavaScript.

Note: we’re assuming you’re already familiar with the JavaScript Promise.

JavaScript async Function

The async functions are built on top of Promises and they provide syntax for writing asynchronous code using the same familiar flow control structure we use when writing synchronous code (Like `for` loops, `if` statements, `try/catch/finally`, calling functions and waiting for their results, etc.)

JavaScript async Function Syntax

An async function is declared by adding the `async` keyword in front of a function. This keyword can be used on function declaration, function expression, arrow function, and methods.

Example:

async function foo() {}

let bar = async function() {};

let baz = async () => {};

class Qux {

async qux() {}

}

Note: the class and methods are covered in later sections.

JavaScript await Statement

You should know that just by adding the `async` keyword to a function, that function won’t act asynchronously! It’s mainly the `await` keyword that turns an operation in the target `async` function into asynchronous.

The `await` keyword is explained in the next section, but before getting into that section, there are a couple of notes that we should know about an `async function`.

An async function always returns a Promise object. Even when we don’t explicitly return a value from a function, it will return a Promise object that is settled into `resolve` with the value `undefined`.

This means we can create handlers for an `async function` via either `then or catch` methods.

Example: creating async function in JavaScript

async function func(){
  
}
console.log(func());
const prom= func();
prom.then(resolve=>{
  console.log("In the resolve handler");
  console.log(resolve);
})

Output:

Promise {<fulfilled>: undefined}

In the resolve handler

undefined

As you can see, every time we call the `func()` it will return a resolved Promise object.

JavaScript async function and the return statement

We can use the `return` statement in an `async function` as well, however the function still returns a Promise object that is settled into resolve but it will use the value of the `return` keyword as the value of the resolved Promise that was returned from the function.

Example: creating async function with return statement

async function func(){
  return [1,2,3,4]
}
console.log(func());
const prom= func();
prom.then(resolve=>{
  console.log("In the resolve handler");
  console.log(resolve);
})

Output:

Promise {<fulfilled>: Array(4)}

In the resolve handler

(4) [1, 2, 3, 4]

As you can see, the returned Promise object from the `func () ` function has the array-value of the `return` statement as its resolved value. And we can simply access this array in the handler of the resolved Promise.

JavaScript async Function and Errors

If anything went wrong in an `async function` and an error is thrown, there are two cases that can happen here:

1- We can handle that error via the `try catch` statement in the function itself and finally return a resolved Promise.

Example: handling errors in an async function

async function func(){
  try{
    throw new Error("Simple Error");
  }catch(error){
    console.log("In the body of the catch block");
    console.log(error.message);
  }
}
const prom= func();
prom.then(resolve=>{
  console.log("In the resolve handler");
  console.log(resolve);
})

Output:

In the body of the catch block

Simple Error

In the resolve handler

undefined

2- If the error is not handled correctly in the function, the returned value from the `async function` will be a Rejected Promise object. So we can use the `catch` method in the handlers to handle such error. (The created error object will be used as the reason for the rejection).

Example: handling errors in async functions using Promise catch blocks

async function func(){
  throw new Error("Simple Error");
}
const prom= func();
prom.then(resolve=>{
  console.log("In the resolve handler");
  console.log(resolve);
}).catch(reject=>{
  console.log("In the reject handler");
  console.log(reject);
})

Output:

In the reject handler

Error: Simple Error

In the body of the `func()` we didn’t handle the error via the `try/catch` block and so as a result, the function returned a Promise object that is settled into the `rejection`. So the rejection handler of this Promise will be executed.

JavaScript async function with Promise object

Besides the auto-created Promise in the `async functions` we can also manually create a Promise object and return that as the return value of the function.

Example: creating promise object in an async function

async function func(){
  return new Promise ((resolve,reject)=>{
    setTimeout(()=>{
      resolve("Done after 3 seconds");
    },3000)
  })
}
func().then(resolve=>{
  console.log("In the resolve handler");
  console.log(resolve);
}).catch(reject=>{
  console.log("In the reject handler");
  console.log(reject);
})

Output:

In the resolve handler

Done after 3 seconds

Alright, that’s it for this section. In the next section, we will explain how the `await` keyword is used in the `async` functions.

More to Read:

JavaScript await statement Tutorial

Leave a Reply