TypeScript Promises and Async/Await
In modern JavaScript, asynchronous programming is essential for handling tasks like fetching data from an API, reading a file, or any other operation that takes time to complete. TypeScript, as a superset of JavaScript, offers robust support for handling asynchronous operations using Promises and the more recent async/await syntax.
Understanding Asynchronous Programming
What is Asynchronous Programming?
Asynchronous programming is a programming paradigm that enables tasks to be executed concurrently, allowing programs to continue executing while waiting for certain operations to complete. This is particularly useful for I/O-bound tasks such as fetching data from a server or reading files.
Callbacks
Callbacks are a common mechanism for handling asynchronous operations in JavaScript and TypeScript. A callback function is passed as an argument to an asynchronous function and is executed once the operation completes.
Example
function fetchData(callback: (data: any) => void) {
setTimeout(() => {
const data = 'Async Data';
callback(data);
}, 1000);
}
fetchData((data) => {
console.log('Data received:', data);
});
Explanation:
- The
fetchDatafunction simulates an asynchronous operation usingsetTimeout. - The callback function is executed once the data is received.
Introduction to Promises in TypeScript
What is a Promise?
A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises allow you to handle asynchronous operations in a more elegant way than using callbacks.
A Promise can be in one of three states:
- Pending: The initial state, neither fulfilled nor rejected.
- Fulfilled: The operation completed successfully.
- Rejected: The operation failed.
Basic Promise Syntax
Here’s how you create a basic promise in TypeScript:
let myPromise: Promise<string> = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Operation was successful!");
} else {
reject("Operation failed.");
}
});
In the example above, the promise will call either the resolve function (indicating success) or the reject function (indicating failure) depending on the logic inside.
Consuming a Promise with .then() and .catch()
To handle the result of a promise, you can use .then() for success and .catch() for errors.
myPromise
.then((message: string) => {
console.log(message); // Output: Operation was successful!
})
.catch((error: string) => {
console.log(error); // If rejected, this will log: Operation failed.
});
Example with Output
Let’s expand on this with an example that mimics a network request.
function fetchData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
let success = true;
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Failed to fetch data.");
}
}, 2000); // Simulate a 2-second delay
});
}
fetchData()
.then((data) => console.log(data))
.catch((error) => console.error(error));
Output (after 2 seconds):
Data fetched successfully!
Explanation:
fetchData()returns a promise that resolves after 2 seconds. Ifsuccessis true, it resolves with the message “Data fetched successfully!”. Otherwise, it rejects with “Failed to fetch data.”- The
.then()method handles the successful resolution, and.catch()deals with any errors.
Advanced Promises: Promise.all and Promise.race
Promise.all()
The Promise.all() method allows you to run multiple promises in parallel and wait until all of them are resolved or any one of them is rejected. This is useful when you need to wait for multiple asynchronous operations to complete.
Example:
let promise1 = Promise.resolve(100);
let promise2 = Promise.resolve(200);
let promise3 = Promise.resolve(300);
Promise.all([promise1, promise2, promise3])
.then((values) => {
console.log(values); // Output: [100, 200, 300]
});
Promise.race()
Promise.race() runs multiple promises concurrently but only returns the result of the first one that settles (whether it’s resolved or rejected).
Example:
let slowPromise = new Promise((resolve) => setTimeout(resolve, 5000, "Slow"));
let fastPromise = new Promise((resolve) => setTimeout(resolve, 1000, "Fast"));
Promise.race([slowPromise, fastPromise])
.then((value) => {
console.log(value); // Output: Fast (since the fast promise resolves first)
});
Introduction to Async/Await in TypeScript
What is Async/Await?
Async/Await is a modern syntax that simplifies working with promises. Instead of using .then() and .catch(), you can write asynchronous code that looks like synchronous code. async functions always return a promise, and await pauses the execution of the function until the promise is resolved or rejected.
Using Async/Await
Let’s rewrite the earlier fetchData example using async/await.
async function fetchDataAsync(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
let success = true;
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Failed to fetch data.");
}
}, 2000);
});
}
async function getData() {
try {
const data = await fetchDataAsync();
console.log(data); // Output: Data fetched successfully!
} catch (error) {
console.error(error);
}
}
getData();
Explanation:
async function: Marks a function as asynchronous, meaning it returns a promise.await: Pauses execution inside thegetDatafunction until thefetchDataAsync()promise is resolved or rejected.try/catch: Used to handle errors in async/await, replacing.catch()in promises.
Output (after 2 seconds):
Data fetched successfully!
Error Handling in Async/Await
Error handling in async/await is done using try/catch blocks, making it more intuitive than using .catch() with promises.
Example:
async function faultyFetchData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject("Failed to fetch data.");
}, 1000);
});
}
async function getDataWithErrorHandling() {
try {
const data = await faultyFetchData();
console.log(data);
} catch (error) {
console.error("Error:", error); // Output: Error: Failed to fetch data.
}
}
getDataWithErrorHandling();
Explanation:
- In the
faultyFetchData()function, the promise is rejected after 1 second. - The
catchblock ingetDataWithErrorHandling()catches the error and logs it.
Output:
Error: Failed to fetch data.
Concurrency with Async/Await
One common misconception is that using await runs all asynchronous functions sequentially. However, you can still run them concurrently by using Promise.all().
Example:
async function getDataConcurrently() {
const promise1 = fetchDataAsync();
const promise2 = fetchDataAsync();
const [result1, result2] = await Promise.all([promise1, promise2]);
console.log(result1, result2);
}
getDataConcurrently();
Explanation:
- Instead of awaiting each function one by one,
Promise.all()allows both promises to be resolved concurrently, reducing total execution time.
Output (after 2 seconds):
Data fetched successfully! Data fetched successfully!
Advanced Async/Await Techniques
Chaining Async/Await Calls
Just like promises, you can chain multiple asynchronous operations with async/await, making it easier to handle dependent operations.
async function getBookDetails() {
const book = await fetchBook();
const author = await fetchAuthor(book.authorId);
const reviews = await fetchReviews(book.id);
console.log(`Book: ${book.title}, Author: ${author.name}, Reviews: ${reviews.length}`);
}
getBookDetails();
In this example, fetchBook, fetchAuthor, and fetchReviews are all asynchronous operations that depend on the result of the previous operation.
We explored Promises and async/await in TypeScript, from basic concepts to advanced techniques. Promises provide a cleaner way to handle asynchronous tasks than traditional callbacks, and async/await simplifies this further by making asynchronous code look synchronous. Happy coding !❤️