Callback, Promise, Async, and Await in TypeScript
I'm going to expand the explanation of JS Async from W3Schools by giving a simple example in TypeScript. I'm going to convert callbacks to promise/async/await functions.
1
2
3
4
5
6
7
8
9
10
11
12
13
const c = (f: Function) => {
setTimeout(() => {
f('Callback 1');
setTimeout(() => {
f('Callback 2');
setTimeout(() => {
f('Callback 3');
}, 1000);
}, 1000);
}, 1000);
};
c((text: string) => console.log(text));
The setTimeout has three parameters; function, milliseconds, and infinity arguments. In a function parameter, we printed Callback n and executed the setTimeout again. We created three-level nested functions. Every level has a delay of 1000 milliseconds or 1 second.
We can try to execute the code above in our local and see the result. The Callback 1 appeared then waited one second then Callback 2 appeared then waited for another second for Callback 3.
Maybe you think that nested callbacks are ugly because it has many levels. We can break it by using promise/async/await functions.
1
2
3
4
5
6
7
8
9
10
11
const delay = (ms: number) => new Promise(f => setTimeout(f, ms));
const p = async (f: Function) => {
await delay(1000);
f('Promise 1');
await delay(1000);
f('Promise 2');
await delay(1000);
f('Promise 3');
};
p((text: string) => console.log(text));
We created a Promise function called delay that has a setTimeout inside. We put await in front of delay and make the p function an async function. The await only works in async functions. The delay function can work with await syntax because of the Promise.
It produced the same intuition as the callbacks above. Try to remove the async and await syntaxes and you will see it prints responses at the same time.
Callback, await, and async are mostly used to fetch data from REST APIs. They are used when it is necessary to wait for the result of functions. I used the setTimeout to make a delay because I thought it was a good example of replicating those conditions. You can get these examples at https://github.com/aristorinjuang/ts-async.