A S Md Ferdousul Haque
By A S Md Ferdousul Haque

JavaScript Promise Async/Await Functions

JavaScript Promise Async/Await Functions

Promise Async/Await Functions

In javascript there are 2 ways to tame the asynchronous beast. You need to use the following Functions:

  • Promise (then/catch) introduced in ES6

  • Async/Await introduced in ES7

These 2 syntaxes gives exactly same underlying functionality, however the readability and scope is different. We will explore how they helps us in generating maintainable code, while other functions make chaos :boom: .

In this snippet we will see in example how we can relate the daily household task into JS understanding.

JavaScript runs code line by line, moving to the next line of code only after the previous one has been executed. But executing code like this can only take us so far. Sometimes, we need to perform tasks that take a long or unpredictable amount of time to complete: fetching data or triggering side-effects via an API, for example.

Rather than letting these tasks block JavaScript’s main thread, the language allows us to run certain tasks in parallel. ES6 saw the introduction of the Promise object as well as new methods to handle the execution of these Promises: then, catch, and finally. But a year later, in ES7, the language added another approach and two new keywords: async and await.

In my opinion, unless a library or legacy codebase forces you to use then/catch, the better choice for readability and maintainability is async/await. To demonstrate that, we’ll use both syntaxes to solve the daily household tasks.

then, catch And finally

then and catch and finally are methods of the Promise object, and they are chained one after the other. Each takes a callback function as its argument and returns a Promise.

As example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// First you need to buy some vegges from grocery

const grocery = new Promise(

  (resolve, reject) => {

    if(shopOpen){

      resolve('buy the grocery');

    }else{

      reject('it is a holiday, shop closed');

    }

  }

);



// Then you need to chop the vegges into pieces

const chopping = new Promise(

  (resolve, reject) => {

    resolve('vegges are chopped');

  }

);



// Finally you can cook the food

const cooking = new Promise(

  (resolve, reject) => {

    resolve('food is ready');

  }

);

Using then, catch and finally, we could perform a series of actions based on whether the Promise is resolved (then) or rejected (catch) — while finally allows us to execute code once the Promise is settled, regardless of whether it was resolved or rejected:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


// Let's do cooking



grocery

  .then((value) => {

    chopping

      .then((value) => {

          cooking

            .then((value) => {

              // Food

            })

      })

  }).catch((error) => {

    // it is a holiday, shop closed

  })

  .finally(() => {

    // take water

  });



async And await

By contrast, async and await are keywords which make synchronous-looking code asynchronous. We use async when defining a function to signify that it returns a Promise. Notice how the placement of the async keyword depends on whether we’re using regular functions or arrow functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19


async function doSomethingAsynchronous() {

  // logic

}



const doSomethingAsynchronous = async () => {

  // logic

};



await, meanwhile, is used before a Promise. It pauses the execution of an asynchronous function until the Promise is resolved. For example, to await our grocery above, we could write:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


const grocery = async () {

  try {

    const value = await 'buy the grocery';

    return value

  } catch (e) {

    const value = await 'it is a holiday, shop closed';

    return value

  }

}



Then you can still use the same pattern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


// Let's do cooking



grocery

  .then((value) => {

    // Do Something

  }).catch((error) => {

    // it is a holiday, shop closed

  })

  .finally(() => {

    // take water

  });