Motivation

Log after every second three times results in a callback hell:

const main = () => {
  setTimeout(() => {
    console.log('1s');
    setTimeout(() => {
      console.log('2s');
      setTimeout(() => {
        console.log('3s');
      }, 1000);
    }, 1000);
  }, 1000);
};

main();

With Async Await

const delay = (ms: number) => new Promise(res => setTimeout(res, ms));

const mainAsync = async () => {
  await delay(1000);
  console.log('1s');
  await delay(1000);
  console.log('2s');
  await delay(1000);
  console.log('3s');
};

mainAsync();

Transcript

00:00

Here we have a simple JavaScript function that logs out the text, hello World, and then we invoke it. Now, if you run this code, you can see it works as expected, logging out the text. Hello World. Now your mission should choose to accept it is to log out the text one s after one seconds, then two s after two seconds and three s after three seconds, you might be tempted to do this using set timeout, for example, Hey, we have a timeout of a thousand milliseconds, also known as one second. And then we log out the text one s. Now, if you continue on this path, you end up

00:33

with this chain of set timeouts for one second and then the two seconds, and then the three second. And you might think that you can unwrap this by moving the set time out externally and setting up set timeout for two seconds and three seconds upfront. But if you wanna start the timeout only after the console log is complete, you will have to do this chain where you do the console log statement and then set up a new set timeout. Now, in terms of functionality, you have achieved your objective that it does log out one s after one seconds, two s after two seconds, and then three s after three seconds.

01:06

However, in terms of code with JavaScript, we can do a bit better. The key to better asynchronous programming and JavaScript is Async awai. We start off by creating a main function, and the only difference between this function and the function we created before is the JavaScript async keyword before the function body Async Aate works on top of JavaScript promises. Now, for our requirement of flogging stuff after a particular time, we want a promise that resolves after a particular amount of time. We create a utility function called delay specifically

01:40

for creating such promises. The delay function takes a duration in milliseconds and then returns a new promise created using the promise constructor, and then uses the resolver for the promise to resolve the promise after the given milliseconds internally using set timeout. Now, once we have this delay function, we can use it to create a promise that resolves after a particular amount of time. For example, one that resolves after a thousand milliseconds, also known as one second, and then a wait for it to get resolved and then log out some text, for example one s.

02:16

And once this log is complete, we can again create a promise for one second and then await it, log out two s, then create a third promise for one second and await it and log out three s. Now, in terms of functionality, this code behaves exactly the same as the code we wrote with set timeout logging out the seconds after appropriate durations. I guess there is no doubt in anyone's mind comparing the two codes side by side that the Async Await version is so much cleaner than the nested set timeouts. Now, as far as type strip is concerned,

02:48

it support the JavaScript Async Coate out of the box, and you can simply use it in your TypeScript source code as we have been doing throughout this lesson. You can even set your target to ES five and TypeScript will transpire this into something that can be run on an alter browser.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

Async Await

Subscription Required

Motivation

With Async Await

Transcript

Professional TypeScript Masterclass