How do you handle multiple promises with async / await?

Handling multiple promises in JavaScript can be complex, especially when using async/await syntax. This approach allows for cleaner and more readable asynchronous code compared to traditional promise chaining. In this response, I will outline how to effectively manage multiple promises using async/await, provide practical examples, and highlight best practices and common pitfalls.

Understanding Async/Await

Async/await is a syntactical sugar built on top of promises, making asynchronous code look and behave like synchronous code. The `async` keyword is used to define an asynchronous function, while the `await` keyword is used to pause the execution of the function until the promise is resolved or rejected.

Basic Syntax

async function exampleFunction() {
    const result = await someAsyncOperation();
    console.log(result);
}

Handling Multiple Promises

When dealing with multiple promises, there are several strategies to consider. The most common methods are using `Promise.all`, `Promise.allSettled`, and handling promises sequentially.

Using Promise.all

When you want to run multiple promises in parallel and wait for all of them to resolve, you can use `Promise.all`. This method takes an array of promises and returns a single promise that resolves when all of the promises have resolved.

async function fetchData() {
    const promise1 = fetch('https://api.example.com/data1');
    const promise2 = fetch('https://api.example.com/data2');
    const promise3 = fetch('https://api.example.com/data3');

    try {
        const results = await Promise.all([promise1, promise2, promise3]);
        const data = await Promise.all(results.map(result => result.json()));
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

Using Promise.allSettled

If you need to wait for all promises to settle (either resolved or rejected) and handle their results accordingly, `Promise.allSettled` is the way to go. This method returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describe the outcome of each promise.

async function fetchData() {
    const promise1 = fetch('https://api.example.com/data1');
    const promise2 = fetch('https://api.example.com/data2');
    const promise3 = fetch('https://api.example.com/data3');

    const results = await Promise.allSettled([promise1, promise2, promise3]);

    results.forEach((result, index) => {
        if (result.status === 'fulfilled') {
            console.log(`Promise ${index + 1} resolved with data:`, result.value);
        } else {
            console.error(`Promise ${index + 1} rejected with error:`, result.reason);
        }
    });
}

Handling Promises Sequentially

In some cases, you may need to handle promises sequentially, where each promise depends on the result of the previous one. In this case, you can simply await each promise one after the other.

async function fetchSequentialData() {
    try {
        const data1 = await fetch('https://api.example.com/data1');
        const jsonData1 = await data1.json();
        
        const data2 = await fetch(`https://api.example.com/data2/${jsonData1.id}`);
        const jsonData2 = await data2.json();
        
        console.log(jsonData2);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

Best Practices

• Always handle errors using try/catch blocks to prevent unhandled promise rejections.
• Use `Promise.all` when you can run promises in parallel to improve performance.
• Use `Promise.allSettled` when you need to know the outcome of all promises, regardless of their success or failure.
• Be cautious with sequential promise handling, as it can lead to performance bottlenecks.

Common Mistakes

• Forgetting to use await when calling an async function, which can lead to unexpected behavior.
• Not handling promise rejections, which can cause the application to crash.
• Using `Promise.all` with promises that may reject, leading to unhandled rejections if one of the promises fails.

In conclusion, managing multiple promises with async/await can greatly enhance the readability and maintainability of your code. By understanding the different methods available and following best practices, you can effectively handle asynchronous operations in your applications.