Managing Errors in Async Operations: TypeScript's Async/Await and Rejection Handling

In TypeScript, async/await provides a cleaner way to work with asynchronous operations (operations that take time to complete) compared to raw Promises. However, there might be scenarios where your async function encounters an error and needs to be rejected. Here's how to handle rejection in this context:

Throwing Exceptions within Async Functions:

• The most common approach is to throw an Error object or any custom error type within your async function. When an exception is thrown, the async function's execution is interrupted, and the rejection is propagated to the code that awaits its result.
• Example:

async function fetchData(url: string): Promise<string> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Failed to fetch data: ${response.status}`);
    }
    return await response.text();
  } catch (error) {
    throw error; // Re-throw the error for handling in the calling code
  }
}

In this example, if the fetch operation fails or the response status code indicates an error, an Error object is thrown. This triggers rejection, which can be caught using a try...catch block in the code that awaits fetchData.

Using Promise.reject (Less Common):

• While less common, you can explicitly use Promise.reject to create a rejected Promise object within your async function.
• This approach is typically used when you need to create a specific rejection reason or object that might not be captured by throwing an exception.

async function validateInput(data: any): Promise<void> {
  if (!isValid(data)) {
    return Promise.reject(new ValidationError('Invalid input provided'));
  }
}

Here, if the isValid check fails, Promise.reject is used to create a rejected Promise with a custom ValidationError object.

Error Handling with try...catch:

• When you call an async function using await, you can use a try...catch block to handle potential rejections:

try {
  const data = await fetchData('https://api.example.com/data');
  console.log(data);
} catch (error) {
  console.error('Error fetching data:', error);
  // Handle the error appropriately (e.g., display an error message to the user)
}

In this code, if fetchData throws an error or rejects a Promise, the catch block will capture the error object (error) and allow you to handle it gracefully, such as logging the error or providing error feedback to the user.

Key Points:

• Throwing exceptions is generally the preferred way for asynchronous rejection in TypeScript's async/await syntax.
• Promise.reject allows for more control over the rejection reason, but it's less frequently used.
• Always use try...catch blocks to handle potential rejections when using await.

async function createUser(username: string, password: string): Promise<User> {
  if (username.length < 6) {
    throw new Error('Username must be at least 6 characters long');
  }

  // Simulate asynchronous database interaction
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
  });

  if (!response.ok) {
    throw new Error(`Failed to create user: ${response.status}`);
  }

  return await response.json(); // Parse the JSON response into a User object
}

In this example, the createUser function rejects with an appropriate error message if the username is too short. It also checks for potential network errors during the asynchronous database interaction.

Handling Timeouts:

async function getQuote(url: string, timeout: number): Promise<string> {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId); // Clear the timeout if successful

    if (!response.ok) {
      throw new Error(`Failed to fetch quote: ${response.status}`);
    }
    return await response.text();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('Quote request timed out');
    } else {
      throw error; // Re-throw other errors
    }
  } finally {
    clearTimeout(timeoutId); // Ensure timeout is always cleared
  }
}

This example demonstrates how to handle timeouts using an AbortController and a finally block to ensure the timeout is always cleared, even on rejections or successful completion.

1. Using Custom Rejection Objects:

• While throwing exceptions is common, you can create custom rejection objects that hold more specific information about the error. This can be useful for more detailed error handling in the calling code.

interface DataFetchError {
  status: number;
  message: string;
}

async function fetchData(url: string): Promise<string> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw {
        status: response.status,
        message: `Failed to fetch data: ${response.status}`,
      } as DataFetchError;
    }
    return await response.text();
  } catch (error) {
    throw error;
  }
}

Here, a DataFetchError interface is defined to encapsulate specific error details. The function throws this object when a fetch error occurs, allowing the calling code to access the status and message properties for more informative handling.

1. Early Returning from Async Functions (Less Common):

• In specific scenarios, you might consider early returning from the async function to indicate a rejection-like behavior. However, this approach can make error handling less explicit and is generally not recommended as a primary rejection mechanism.

async function validateAndProcessData(data: any): Promise<void> {
  if (!isValid(data)) {
    console.error('Invalid data provided');
    return; // Early return to signal rejection
  }
  // Process valid data (not shown)
}

In this example, if the data is invalid, the function simply logs an error and returns early. While this could be considered rejection-like, it's less clear and lacks the benefits of using exceptions or Promise.reject for error propagation.