What happens if an awaited promise is rejected and there’s no try/catch?

When dealing with asynchronous operations in JavaScript, particularly when using the `async/await` syntax, it's crucial to understand how promise rejections are handled. If an awaited promise is rejected and there is no `try/catch` block to handle the error, the rejection will propagate up the call stack. This can lead to unhandled promise rejections, which can crash the application or result in unexpected behavior.

To illustrate this concept, let's break down the behavior of unhandled promise rejections and explore best practices for managing errors in asynchronous code.

Understanding Promise Rejections

A promise in JavaScript can be in one of three states: pending, fulfilled, or rejected. When a promise is rejected, it means that the operation failed, and it can provide a reason for the failure. If you use `await` to wait for a promise to resolve, and that promise is rejected, the error will throw an exception. Without proper error handling, this exception can lead to unhandled promise rejections.

Example of Unhandled Rejection

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
}

async function main() {
    const result = await fetchData(); // If fetchData fails, this will throw an error
    console.log(result);
}

main();

In the above example, if the `fetch` call fails (for instance, due to a network error or a 404 response), the rejection will propagate to the `main` function. If there is no `try/catch` block in place, the promise returned by `main` will be rejected, and you may see a warning in the console about an unhandled promise rejection.

Best Practices for Error Handling

To avoid unhandled promise rejections, it is essential to implement proper error handling in your asynchronous functions. Here are some best practices:

• Use try/catch Blocks: Wrap your awaited calls in a `try/catch` block to handle errors gracefully.
• Return Errors: Instead of throwing errors, consider returning error objects that can be handled by the caller.
• Global Error Handling: Implement a global error handler for unhandled promise rejections using `process.on('unhandledRejection', handler)` in Node.js or window's `unhandledrejection` event in the browser.
• Logging: Log errors to an external service for monitoring and debugging purposes.

Example with Error Handling

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error; // Rethrow if you want to handle it further up
    }
}

async function main() {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error('Error in main:', error);
    }
}

main();

Common Mistakes

When working with promises and async/await, developers often make several common mistakes that can lead to unhandled rejections:

• Neglecting Error Handling: Forgetting to include `try/catch` blocks around awaited calls is a frequent oversight.
• Ignoring Promise Rejections: Not handling promise rejections in functions that return promises can lead to unhandled rejections.
• Assuming All Promises Resolve: Assuming that all asynchronous operations will succeed without considering the possibility of failure.
• Overusing Global Handlers: Relying solely on global error handlers instead of implementing localized error handling can make debugging difficult.

In summary, understanding how to handle rejected promises is vital for building robust and error-resistant applications. By implementing proper error handling strategies, you can ensure that your application behaves predictably even in the face of errors, enhancing both user experience and maintainability.