Asynchronous Typescript Code Examples • luminary.blog

Functions

Function

1
function printMessage(message: string) {
2
  console.log(message);
3
}
4

5
// usage
6
printMessage("Function");

1
# output
2
Function

Arrow Function

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
// usage
6
printMessage("Arrow Function");

1
# output
2
Arrow Function

Calling One Function from Another

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
const getMessage = () => {
6
  const message = "Function Calling Another Function";
7
  printMessage(message);
8
};
9

10
// usage
11
getMessage();

1
# output
2
Function Calling Another Function

Async Function

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
const getMessageAsync = () => {
6
  const message = "Async Function";
7
  setTimeout(() => {
8
    printMessage(message);
9
  }, 1000);
10
};
11

12
// usage
13
console.log("start");
14
getMessageAsync(); // prints after 1000 milliseconds
15
console.log("end");

1
# output
2
start
3
end
4
Async Function

Async Function With a Callback

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
const getMessageWithCallback = (callback: Function) => {
6
  const message = "Async Function with a Callback Function";
7
  setTimeout(() => {
8
    callback(message);
9
  }, 1000);
10
};
11

12
// usage
13
getMessageWithCallback((message: string) => {
14
  printMessage(message);
15
});
16

17
// usage 2
18
getMessageWithCallback(printMessage);

1
# output
2
Async Function with a Callback Function

Async Function With a Callback and a Variable

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
const getMessageWithVariables = (message: string, callback: Function) => {
6
  setTimeout(() => {
7
    callback(message);
8
  }, 1000);
9
};
10

11
// usage
12
getMessageWithVariables(
13
  "Async Function with a Callback Function and a Variable",
14
  (message: string) => printMessage(message)
15
);
16

17
// usage 2
18
getMessageWithVariables(
19
  "Async Function with a Callback Function and a Variable",
20
  printMessage
21
);

1
# output
2
Async Function with a Callback Function and a Variable

Promises

Simple Example

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
const getMessagePromise = (message: string): Promise<string> => {
6
  return new Promise((resolve, reject) => {
7
    setTimeout(() => {
8
      resolve(message);
9
      reject(new Error("Promise Error"));
10
    }, 1000);
11
  });
12
};
13

14
// usage
15
getMessagePromise("Async Function Returning A Promise").then(
16
  (message: string) => {
17
    printMessage(message);
18
  }
19
);
20

21
// usage 2
22
getMessagePromise("Async Function Returning A Promise").then(printMessage);

1
# output
2
Async Function Returning A Promise

Complete Example

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
const trueFalse = (): boolean => {
6
  return Math.random() < 0.5;
7
};
8

9
const getMessagePromiseFull = (message: string) => {
10
  return new Promise((resolve, reject) => {
11
    setTimeout(() => {
12
      trueFalse() ? resolve(message) : reject(new Error("Message Error"));
13
    }, 1000);
14
  });
15
};
16

17
// usage
18
getMessagePromiseFull(
19
  "Async Function Returning a Promise with a Message or an Error"
20
)
21
  .then((message) => printMessage(<string>message))
22
  .catch((err) => console.log(err.message))
23
  .finally(() => console.log(`Promise resolved`));

1
# output
2
Async Function Returning a Promise with a Message or an Error
3
Promise Resolved

Division Example

1
const printResult = (result: number) => {
2
  console.log(result);
3
};
4

5
const divide = (a: number, b: number): Promise<number> => {
6
  return new Promise((resolve, reject) => {
7
    setTimeout(() => {
8
      if (b === 0) reject(new Error("Division Error!"));
9
      resolve(a / b);
10
    }, 1000);
11
  });
12
};
13

14
// usage - success
15
divide(4, 2)
16
  .then(printResult)
17
  .catch((err) => console.log(err.message))
18
  .finally(() => console.log("Operation Complete")); // optional
19

20
// usage - error
21
divide(1, 0)
22
  .then(printResult)
23
  .catch((err) => console.log(err.message))
24
  .finally(() => console.log("Operation Complete")); // optional

1
# output for (4, 2)
2
2
3
Operation Complete
4

5
# output for (1, 0)
6
Division Error
7
Operation Complete

Async / Await

Example 1

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
const trueFalse = (): boolean => {
6
  return Math.random() < 0.5;
7
};
8

9
const getMessagePromiseFull = (message: string) => {
10
  return new Promise((resolve, reject) => {
11
    setTimeout(() => {
12
      trueFalse() ? resolve(message) : reject(new Error("Message Error"));
13
    }, 1000);
14
  });
15
};
16

17
const getMessages = async () => {
18
  try {
19
    const message1 = await getMessagePromiseFull("Promise Example Message 1");
20
    console.log(message1);
21
    const message2 = await getMessagePromiseFull("Promise Example Message 2");
22
    console.log(message2);
23
  } catch (err: any) {
24
    console.log("Error:", err.message);
25
  }
26
};
27

28
// usage
29
getMessages();

1
# output
2
Error: Message Error
3

4
# output
5
Promise Example Message 1
6
Error: Message Error
7

8
# output
9
Promise Example Message 1
10
Promise Example Message 2

Division Example

1
const printResult = (result: number) => {
2
  console.log(result);
3
};
4

5
const printOddEven = (value: number) => {
6
  value % 2 === 0
7
    ? console.log("Result is even")
8
    : console.log("Result is odd");
9
};
10

11
const divide = (a: number, b: number): Promise<number> => {
12
  return new Promise((resolve, reject) => {
13
    setTimeout(() => {
14
      if (b === 0) reject(new Error("Division Error!"));
15
      resolve(a / b);
16
    }, 1000);
17
  });
18
};
19

20
const addOne = (a: number): Promise<number> => {
21
  return new Promise((resolve, reject) => {
22
    setTimeout(() => {
23
      resolve(a + 1);
24
    }, 1000);
25
  });
26
};
27

28
const calculate = async (a: number, b: number) => {
29
  try {
30
    const division = await divide(a, b);
31
    const result = await addOne(division);
32
    printResult(result);
33
    printOddEven(result);
34
  } catch (err) {
35
    console.log(err.message);
36
  }
37
};
38

39
// usage
40
calculate(4, 2);

1
# output
2
3
3
Result is odd

Division Example with Return

1
const printResult = (result: number) => {
2
  console.log(result);
3
};
4

5
const printOddEven = (value: number) => {
6
  value % 2 === 0
7
    ? console.log("Result is even")
8
    : console.log("Result is odd");
9
};
10

11
const divide = (a: number, b: number): Promise<number> => {
12
  return new Promise((resolve, reject) => {
13
    setTimeout(() => {
14
      if (b === 0) reject(new Error("Division Error!"));
15
      resolve(a / b);
16
    }, 1000);
17
  });
18
};
19

20
const addOne = (a: number): Promise<number> => {
21
  return new Promise((resolve, reject) => {
22
    setTimeout(() => {
23
      resolve(a + 1);
24
    }, 1000);
25
  });
26
};
27

28
const calculate = async (a: number, b: number): Promise<number> => {
29
  const division = await divide(a, b);
30
  const result = await addOne(division);
31
  return result;
32
};
33

34
// usage
35
calculate(4, 2)
36
  .then((result) => {
37
    printResult(result);
38
    printOddEven(result);
39
  })
40
  .catch((err) => console.log(err.message))
41
  .finally(() => console.log("Operation Complete."));

1
# output
2
3
3
Result is odd
4
Operation Complete.

RxJS

Observable

An Observable represents a stream of data or events over time.

1
import { Observable } from 'rxjs';
2

3
const observable = new Observable<number>((subscriber) => {
4
  subscriber.next(1);
5
  subscriber.next(2);
6
  subscriber.next(3);
7
  setTimeout(() => {
8
    subscriber.next(4);
9
    subscriber.complete();
10
  }, 1000);
11
});

Subscriber

A Subscriber is an object that listens to an Observable and reacts to the values emitted by the Observable.

1
const subscriber = {
2
  next: (value: number) => console.log('Value:', value),
3
  error: (err: any) => console.error('Error:', err),
4
  complete: () => console.log('Complete'),
5
};
6

7
// usage
8
observable.subscribe(subscriber);

1
# output
2
Value: 1
3
Value: 2
4
Value: 3
5
Value: 4
6
Complete

Operators

Operators are functions that transform, filter, or combine Observables.

1
import { from, map, filter } from 'rxjs';
2

3
const numbers = from([1, 2, 3, 4, 5]);
4

5
const squaredEvenNumbers = numbers.pipe(
6
  filter(x => x % 2 === 0),
7
  map(x => x * x)
8
);
9

10
squaredEvenNumbers.subscribe(x => console.log('Squared Even Number:', x));

1
# output
2
Squared Even Number: 4
3
Squared Even Number: 16

Error Handling

Promises

1
function fetchData(shouldSucceed: boolean): Promise<string> {
2
  return new Promise((resolve, reject) => {
3
    setTimeout(() => {
4
      if (shouldSucceed) {
5
        resolve("Data fetched successfully");
6
      } else {
7
        reject(new Error("Failed to fetch data"));
8
      }
9
    }, 1000);
10
  });
11
}
12

13
fetchData(true)
14
  .then((data) => {
15
    console.log(data);
16
  })
17
  .catch((error) => {
18
    console.error(error.message);
19
  });
20

21
fetchData(false)
22
  .then((data) => {
23
    console.log(data);
24
  })
25
  .catch((error) => {
26
    console.error(error.message); // Output: Failed to fetch data
27
  });

1
# output (success)
2
Data fetched successfully
3

4
# output (failure)
5
Failed to fetch data

Async/Await

1
async function fetchData(shouldSucceed: boolean): Promise<string> {
2
  return new Promise((resolve, reject) => {
3
    setTimeout(() => {
4
      if (shouldSucceed) {
5
        resolve("Data fetched successfully");
6
      } else {
7
        reject(new Error("Failed to fetch data"));
8
      }
9
    }, 1000);
10
  });
11
}
12

13
async function main() {
14
  try {
15
    const data = await fetchData(true);
16
    console.log(data);
17
  } catch (error: any) {
18
    console.error(error.message);
19
  }
20

21
  try {
22
    const data = await fetchData(false);
23
    console.log(data);
24
  } catch (error: any) {
25
    console.error(error.message); // Output: Failed to fetch data
26
  }
27
}
28

29
main();

1
# output (success)
2
Data fetched successfully
3

4
# output (failure)
5
Failed to fetch data

Concurrent Operations

1
async function fetchUserData(userId: number): Promise<string> {
2
  return new Promise((resolve) => {
3
    setTimeout(() => {
4
      resolve(`User data for ${userId}`);
5
    }, 500);
6
  });
7
}
8

9
async function fetchOrderData(orderId: number): Promise<string> {
10
  return new Promise((resolve) => {
11
    setTimeout(() => {
12
      resolve(`Order data for ${orderId}`);
13
    }, 750);
14
  });
15
}
16

17
async function main() {
18
  const [userData, orderData] = await Promise.all([
19
    fetchUserData(123),
20
    fetchOrderData(456),
21
  ]);
22

23
  console.log(userData); // Output: User data for 123
24
  console.log(orderData); // Output: Order data for 456
25
}
26

27
main();

1
# output
2
User data for 123
3
Order data for 456

Cancellation of Async Operations

1
async function fetchData(signal: AbortSignal): Promise<string> {
2
  return new Promise((resolve, reject) => {
3
    const timeoutId = setTimeout(() => {
4
      resolve("Data fetched successfully");
5
    }, 1000);
6

7
    signal.addEventListener("abort", () => {
8
      clearTimeout(timeoutId);
9
      reject(new Error("Fetch cancelled"));
10
    });
11
  });
12
};
13

14
async function main() {
15
  const controller = new AbortController();
16
  const signal = controller.signal;
17

18
  const fetchPromise = fetchData(signal);
19

20
  setTimeout(() => {
21
    controller.abort(); // Cancel the fetch after 500ms
22
  }, 500);
23

24
  try {
25
    const data = await fetchPromise;
26
    console.log(data);
27
  } catch (error: any) {
28
    console.error(error.message); // Output: Fetch cancelled
29
  }
30
}
31

32
main();

1
# output
2
Fetch cancelled

← Best Async Document for Typescript

Eclipsed Attention and the Future of Long-Context LLMs →