3 Practical Examples of TypeScript Async/Await

Understanding TypeScript Async/Await

Async/await is a powerful feature in TypeScript that makes it easier to work with asynchronous operations. It allows you to write cleaner and more readable code while handling promises. By using async before a function, you enable it to return a promise, and await lets you pause the execution until the promise is resolved. Let’s dive into three practical examples to illustrate how you can effectively use async/await in your TypeScript projects.

Example 1: Fetching Data from an API

In this example, we’ll create a function that fetches data from a public API using async/await. This is a common use case when working with web applications that need to retrieve data from external sources.

async function fetchUserData(userId: number): Promise<void> {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

fetchUserData(1);

In this code snippet, we define an async function fetchUserData that takes a userId as an argument. It fetches user data from the JSON Placeholder API. We handle potential errors using a try/catch block, which is crucial for maintaining the robustness of your application.

Example 2: Reading a File Asynchronously

This example demonstrates how to read a file asynchronously using the fs module in Node.js. This is particularly useful when you want to read files without blocking the execution of your program.

import { promises as fs } from 'fs';

async function readFileContent(filePath: string): Promise<void> {
    try {
        const data = await fs.readFile(filePath, 'utf8');
        console.log('File Content:', data);
    } catch (error) {
        console.error('Error reading file:', error);
    }
}

readFileContent('./example.txt');

Here, we import the fs module and create an async function readFileContent that reads the content of a file specified by filePath. Similar to the previous example, we use a try/catch block to handle any errors that may occur during the file reading process.

Example 3: Simulating a Delay with Promises

In this example, we will create a function that simulates a delay using promises. This is useful in scenarios where you want to delay an operation, such as showing a loading spinner before fetching data.

function delay(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedGreeting(): Promise<void> {
    console.log('Waiting for 2 seconds...');
    await delay(2000);
    console.log('Hello after 2 seconds!');
}

delayedGreeting();

In this example, we define a delay function that returns a promise which resolves after a specified number of milliseconds. The delayedGreeting function uses await to pause execution for 2 seconds before logging a greeting message. This showcases how async/await can be used to manage timing in your applications.

Conclusion

These examples of TypeScript async/await examples illustrate how to handle asynchronous operations in a straightforward and effective manner. Whether you’re fetching data from an API, reading files, or managing delays, using async/await can make your code cleaner and easier to understand.