In this article, you will learn the differences between these two approaches, when to use each one, and how to make the right choice for your specific use case.

Here’s what we’ll cover:

1. What Are Asynchronous Operations?

2. What Are Promises?

3. What Is Async/Await?

4. Practical Examples: Promises vs Async/Await

5. When to Use Promises

6. When to Use Async/Await

7. Performance Considerations

8. Error Handling Patterns

9. Best Practices

10. Making the Right Choice

11. Conclusion

What Are Asynchronous Operations?

Before explaining what Promises and Async/Await mean, it is important to understand what asynchronous operations are.

Synchronous operations execute one after another, blocking the next operation until the current one completes. Here’s an example in JavaScript:

console.log("First");
console.log("Second");
console.log("Third");

// Output:
// First
// Second
// Third

Asynchronous operations, on the other hand, can start an operation and continue executing other code while waiting for the first operation to complete. Here’s an example in JavaScript:

console.log("First");

setTimeout(() => {
    console.log("Second (after 2 seconds)");
}, 2000);

console.log("Third");

// Output:
// First
// Third
// Second (after 2 seconds)

In this example, setTimeout() is an asynchronous function that schedules code to run after a specified delay without blocking the execution of subsequent code.

What Are Promises?

A Promise is a JavaScript object that represents the eventual completion (or failure) of an asynchronous operation. Think of it as a placeholder for a value that will be available in the future.

Promise States

A Promise can be in one of three states:

1. Pending: The initial state – the operation hasn't been completed yet

2. Fulfilled (Resolved): The operation completed successfully

3. Rejected: The operation failed

Basic Promise Syntax

Here's how you create and use a basic Promise:

// Creating a Promise
const myPromise = new Promise((resolve, reject) => {
    // Simulate an asynchronous operation
    setTimeout(() => {
        const success = true;

        if (success) {
            resolve("Operation completed successfully!");
        } else {
            reject("Operation failed!");
        }
    }, 2000);
});

// Using the Promise
myPromise
    .then((result) => {
        console.log(result); // "Operation completed successfully!"
    })
    .catch((error) => {
        console.log(error);
    });

Let's break down this code:

• new Promise() creates a new Promise object

• The Promise constructor takes a function with two parameters: resolve and reject

• resolve() is called when the operation succeeds

• reject() is called when the operation fails

• .then() handles the successful case

• .catch() handles the error case

Chaining Promises

Promise chaining is a powerful technique that allows you to link multiple asynchronous operations together in a sequence. When you want to perform multiple operations where each depends on the result of the previous one, promise chaining provides an elegant solution. You can chain multiple Promises together using .then():

function fetchUserData(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ id: userId, name: "John Doe" });
        }, 1000);
    });
}

function fetchUserPosts(user) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve([
                { title: "Post 1", author: user.name },
                { title: "Post 2", author: user.name }
            ]);
        }, 1000);
    });
}

// Chaining Promises
fetchUserData(123)
    .then((user) => {
        console.log("User:", user);
        return fetchUserPosts(user);
    })
    .then((posts) => {
        console.log("Posts:", posts);
    })
    .catch((error) => {
        console.log("Error:", error);
    });

In this example:

• fetchUserData() returns a Promise that resolves with user information

• fetchUserPosts() returns a Promise that resolves with the user's posts

• We chain these operations using .then()

• Each .then() receives the resolved value from the previous Promise

Downsides of Promise Chaining:

While promise chaining is powerful, it does have some potential drawbacks:

1. "Callback Hell" in disguise: Complex chains can become difficult to read and debug, especially with nested logic

2. Complex error handling: Each step in the chain needs proper error handling, and errors can propagate in unexpected ways

3. Debugging challenges: Stack traces through promise chains can be harder to follow

4. Mixing synchronous and asynchronous logic: It can be tempting to put synchronous operations inside .then() blocks, which can lead to confusion

What Is Async/Await?

Async/Await is syntactic sugar built on top of Promises. It allows you to write asynchronous code that looks and behaves more like synchronous code, making it easier to read and understand.

Basic Async/Await Syntax

Here's the same Promise example rewritten using Async/Await:

// Creating an async function
async function performOperation() {
    try {
        const result = await myPromise;
        console.log(result); // "Operation completed successfully!"
    } catch (error) {
        console.log(error);
    }
}

performOperation();

Let's break down this code:

• The async keyword before a function declaration makes it an asynchronous function

• The await keyword pauses the function execution until the Promise resolves

• The try/catch blocks handle errors, similar to .catch() in Promises

Converting Promise Chains to Async/Await

Here's the previous chaining example using Async/Await:

async function getUserDataAndPosts(userId) {
    try {
        const user = await fetchUserData(userId);
        console.log("User:", user);

        const posts = await fetchUserPosts(user);
        console.log("Posts:", posts);

        return posts;
    } catch (error) {
        console.log("Error:", error);
        throw error; // Re-throw the error if needed
    }
}

getUserDataAndPosts(123);

This code is much more readable and follows a linear flow that's easier to understand.

Practical Examples: Promises vs Async/Await

Let's compare both approaches with real-world scenarios.

Example 1: Making API Calls

Using Promises:

function fetchDataWithPromises() {
    fetch('https://jsonplaceholder.typicode.com/users/1')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(user => {
            console.log('User data:', user);
            return fetch(`https://jsonplaceholder.typicode.com/users/${user.id}/posts`);
        })
        .then(response => response.json())
        .then(posts => {
            console.log('User posts:', posts);
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

Using Async/Await:

async function fetchDataWithAsyncAwait() {
    try {
        const userResponse = await fetch('https://jsonplaceholder.typicode.com/users/1');

        if (!userResponse.ok) {
            throw new Error('Network response was not ok');
        }

        const user = await userResponse.json();
        console.log('User data:', user);

        const postsResponse = await fetch(`https://jsonplaceholder.typicode.com/users/${user.id}/posts`);
        const posts = await postsResponse.json();
        console.log('User posts:', posts);

    } catch (error) {
        console.error('Error:', error);
    }
}

The Async/Await version is more readable and follows a natural top-to-bottom flow.

Example 2: Handling Multiple Asynchronous Operations

Using Promises:

function processMultipleOperations() {
    const promise1 = fetch('https://jsonplaceholder.typicode.com/users/1');
    const promise2 = fetch('https://jsonplaceholder.typicode.com/users/2');
    const promise3 = fetch('https://jsonplaceholder.typicode.com/users/3');

    Promise.all([promise1, promise2, promise3])
        .then(responses => {
            return Promise.all(responses.map(response => response.json()));
        })
        .then(users => {
            console.log('All users:', users);
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

Using Async/Await:

async function processMultipleOperationsAsync() {
    try {
        const promise1 = fetch('https://jsonplaceholder.typicode.com/users/1');
        const promise2 = fetch('https://jsonplaceholder.typicode.com/users/2');
        const promise3 = fetch('https://jsonplaceholder.typicode.com/users/3');

        const responses = await Promise.all([promise1, promise2, promise3]);
        const users = await Promise.all(responses.map(response => response.json()));

        console.log('All users:', users);
    } catch (error) {
        console.error('Error:', error);
    }
}

Both approaches use Promise. all() to wait for multiple operations to complete simultaneously.

When to Use Promises

Promises are still useful in several scenarios:

1. Working with Existing Promise-Based APIs

Popular libraries like Axios, fetch(), and many Node.js modules return Promises.

How to identify promise-based APIs:

• The function returns an object with .then() and .catch() methods

• The documentation mentions "returns a Promise"

• The function doesn't require a callback parameter

Many libraries and APIs return Promises directly:

// Axios library returns Promises
axios.get('/api/users')
    .then(response => response.data)
    .then(users => console.log(users))
    .catch(error => console.error(error));

// fetch() API returns Promises
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));

// Node.js fs.promises returns Promises
import { readFile } from 'fs/promises';
readFile('./config.json', 'utf8')
    .then(data => JSON.parse(data))
    .then(config => console.log(config));

2. Functional Programming Patterns

Promises are immutable objects that represent future values, making them perfect for functional programming approaches. They can be easily composed, chained, and transformed without side effects. The .then() method essentially maps over the future value, similar to how Array.map() works with collections.

Promises work well with functional programming approaches because they are composable and can be easily passed around as first-class objects:

// Functional composition with Promises
const processUsers = (userIds) => {
    return Promise.all(
        userIds.map(id => fetchUser(id))  // Transform each ID to a Promise
    )
    .then(users => users.filter(user => user.active))  // Filter active users
    .then(activeUsers => activeUsers.map(user => user.email));  // Extract emails
};

// Pipeline approach
const createUserPipeline = (userId) => {
    return fetchUser(userId)
        .then(validateUser)
        .then(enrichUserData)
        .then(formatUserResponse)
        .then(logUserActivity);
};

// Composing multiple Promise-returning functions
const compose = (...fns) => (value) => 
    fns.reduce((promise, fn) => promise.then(fn), Promise.resolve(value));

const userProcessor = compose(
    fetchUser,
    validateUser,
    enrichUserData,
    saveUser
);

3. Creating Reusable Promise Utilities

Reusable promise utilities are helper functions that abstract common asynchronous patterns into reusable components. They're particularly useful for cross-cutting concerns like retries, timeouts, rate limiting, and caching. These utilities can be used across different parts of your application without being tied to specific business logic.

When they're useful:

• When you need the same asynchronous pattern in multiple places

• For handling common failure scenarios (network timeouts, retries)

• When building middleware or interceptors

• For performance optimizations like batching or debouncing

// Timeout utility
function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// Retry utility with exponential backoff
function retry(fn, retries = 3, delay = 1000) {
    return fn().catch(error => {
        if (retries > 0) {
            console.log(`Retrying... ${retries} attempts left`);
            return timeout(delay).then(() => retry(fn, retries - 1, delay * 2));
        }
        throw error;
    });
}

// Rate limiting utility
function rateLimit(fn, maxCalls, timeWindow) {
    let calls = [];

    return function(...args) {
        const now = Date.now();
        calls = calls.filter(time => now - time < timeWindow);

        if (calls.length >= maxCalls) {
            const waitTime = timeWindow - (now - calls[0]);
            return timeout(waitTime).then(() => fn.apply(this, args));
        }

        calls.push(now);
        return fn.apply(this, args);
    };
}

// Usage examples
const apiCall = () => fetch('/api/data').then(r => r.json());
const resilientApiCall = retry(apiCall, 3);
const rateLimitedApiCall = rateLimit(apiCall, 5, 60000); // 5 calls per minute

When to Use Async/Await

Async/Await is preferred in most modern JavaScript applications. It has various advantages over Promises, such as:

1. Improved readability: Code reads like synchronous code, making it easier to understand the flow

2. Better debugging: Stack traces are cleaner and easier to follow

3. Simplified error handling: Single try/catch block can handle multiple async operations

4. Reduced nesting: Eliminates the "pyramid of doom" that can occur with promise chains

5. Easier testing: Async functions are easier to test and mock

6. Better IDE support: Better autocomplete and type inference in modern editors

Let’s look at some examples that demonstrate when async/await would be a better choice.

1. Sequential Operations

When you need to perform operations one after another:

async function processUserData(userId) {
    try {
        const user = await fetchUser(userId);
        const preferences = await fetchUserPreferences(user.id);
        const recommendations = await generateRecommendations(user, preferences);

        return {
            user,
            preferences,
            recommendations
        };
    } catch (error) {
        console.error('Failed to process user data:', error);
        throw error;
    }
}

Why this is better than promises: With promise chaining, you'd need to nest .then() calls or return values through the chain, making it harder to track data flow.

2. Complex Error Handling

Async/await allows you to use familiar try/catch syntax and handle errors at the exact point where they might occur. You can have multiple try/catch blocks for different error scenarios, and the error handling logic is co-located with the code that might throw the error.

async function complexOperation(data) {
    try {
        // First level: preprocessing errors
        const processedData = await preprocessData(data);

        try {
            // Second level: critical operation errors
            const result = await performCriticalOperation(processedData);
            return result;
        } catch (criticalError) {
            // Handle critical operation errors specifically
            console.error('Critical operation failed:', criticalError);

            // We can make decisions based on the error type
            if (criticalError.code === 'TEMPORARY_FAILURE') {
                console.log('Attempting fallback operation...');
                const fallbackResult = await performFallbackOperation(processedData);
                return fallbackResult;
            } else {
                // Re-throw if it's not recoverable
                throw new Error(`Critical failure: ${criticalError.message}`);
            }
        }

    } catch (preprocessError) {
        // Handle preprocessing errors differently
        console.error('Preprocessing failed:', preprocessError);

        // We can inspect the error and decide how to handle it
        if (preprocessError.code === 'INVALID_DATA') {
            throw new Error('Invalid input data provided');
        } else {
            throw new Error('Unable to process data');
        }
    }
}

Explanation of the code:

• The outer try/catch handles preprocessing errors

• The inner try/catch specifically handles critical operation errors

• Each error handler can make different decisions based on error types

• The code clearly shows the error-handling strategy at each level

• You can easily add logging, metrics, or recovery logic at each level

3. Conditional Asynchronous Logic

Async/await makes it natural to use standard control flow (if/else, loops, switch statements) with asynchronous operations. This is much cleaner than trying to implement conditional logic within promise chains.

async function smartUserProcess(userId) {
    try {
        // First, get the user data
        const user = await fetchUser(userId);
        console.log(`Processing user: ${user.name} (Premium: ${user.isPremium})`);

        // Make decisions based on the async result
        if (user.isPremium) {
            console.log('User is premium - fetching premium features');

            // Premium users get additional data
            const premiumData = await fetchPremiumFeatures(user.id);

            // We can make further decisions based on premium data
            if (premiumData.analyticsEnabled) {
                console.log('Analytics enabled - generating premium analytics');
                const analytics = await generatePremiumAnalytics(user, premiumData);
                return { user, premiumData, analytics };
            } else {
                return { user, premiumData };
            }

        } else {
            console.log('User is basic - fetching basic features');

            // Basic users get different treatment
            const basicData = await fetchBasicFeatures(user.id);

            // Check if user qualifies for upgrade prompts
            if (basicData.usageLevel > 0.8) {
                console.log('User has high usage - checking upgrade eligibility');
                const upgradeOffer = await checkUpgradeEligibility(user);
                return { user, basicData, upgradeOffer };
            } else {
                return { user, basicData };
            }
        }
    } catch (error) {
        console.error('User processing failed:', error);

        // Even error handling can be conditional
        if (error.code === 'USER_NOT_FOUND') {
            throw new Error('User does not exist');
        } else if (error.code === 'NETWORK_ERROR') {
            throw new Error('Network connectivity issue');
        } else {
            throw error;
        }
    }
}

Explanation of the code:

• We await the user fetch and immediately use the result in an if statement

• Each branch of the conditional can perform different async operations

• We can nest conditions naturally (like checking analyticsEnabled)

• Standard control flow works seamlessly with async operations

• Error handling can also be conditional based on error types

• The code reads like synchronous code but handles async operations correctly

Performance Considerations

Understanding the performance implications of different asynchronous patterns is crucial for building efficient JavaScript applications. The main performance consideration is whether your asynchronous operations can run in parallel or must be executed sequentially.

When working with multiple asynchronous operations, you have two main execution patterns: sequential (one after another) and parallel (multiple operations at the same time). The choice between these patterns can significantly impact your application's performance and user experience.

Sequential vs Parallel Execution

Sequential Execution (slower but sometimes necessary):

Sequential execution means waiting for each operation to complete before starting the next one. This is slower but necessary when operations depend on each other.

// This takes ~3 seconds total (1 + 1 + 1)
async function sequentialOperations() {
    console.time('Sequential Operations');

    const result1 = await operation1(); // 1 second - must complete first
    console.log('Operation 1 completed:', result1);

    const result2 = await operation2(); // 1 second - starts after operation1
    console.log('Operation 2 completed:', result2);

    const result3 = await operation3(); // 1 second - starts after operation2
    console.log('Operation 3 completed:', result3);

    console.timeEnd('Sequential Operations');
    return [result1, result2, result3];
}

Use sequential execution when:

• Each operation depends on the result of the previous one

• You need to process results in a specific order

• Operations must be rate-limited (for example, API calls with rate limits)

• You want to avoid overwhelming external services

Parallel Execution (faster when possible):

Parallel execution means starting all operations at the same time and waiting for all of them to complete. This is much faster when operations are independent.

// This takes ~1 second total (all operations run simultaneously)
async function parallelOperations() {
    console.time('Parallel Operations');

    // Start all operations immediately - they run concurrently
    const promise1 = operation1(); // starts immediately
    const promise2 = operation2(); // starts immediately  
    const promise3 = operation3(); // starts immediately

    console.log('All operations started, waiting for completion...');

    // Wait for all operations to complete
    const [result1, result2, result3] = await Promise.all([
        promise1,
        promise2,
        promise3
    ]);

    console.log('All operations completed');
    console.timeEnd('Parallel Operations');
    return [result1, result2, result3];
}

Use parallel execution when:

• Operations are independent of each other

• You want to minimize total execution time

• Dealing with I/O operations (file reads, API calls, database queries)

• The order of completion doesn't matter

Advanced Example - Mixed Approach:

Sometimes you need a combination of both approaches:

javascriptasync function mixedApproach(userIds) {
    console.time('Mixed Approach');

    // Step 1: Fetch all users in parallel (they're independent)
    console.log('Fetching users in parallel...');
    const users = await Promise.all(
        userIds.map(id => fetchUser(id))
    );

    // Step 2: Process each user sequentially (to avoid overwhelming the recommendation service)
    console.log('Processing users sequentially...');
    const results = [];
    for (const user of users) {
        const preferences = await fetchUserPreferences(user.id);
        const recommendations = await generateRecommendations(user, preferences);
        results.push({ user, preferences, recommendations });

        // Small delay to be respectful to the API
        await new Promise(resolve => setTimeout(resolve, 100));
    }

    console.timeEnd('Mixed Approach');
    return results;
}

Use Promise.all() when operations can run independently and simultaneously.

Error Handling Patterns

Proper error handling is crucial for building robust applications. Different asynchronous patterns offer different approaches to error handling, each with their own advantages and use cases.

Error handling in asynchronous JavaScript can be challenging because errors can occur at different points in the execution flow. Understanding how to properly catch, handle, and recover from errors in both Promise and async/await patterns is essential for building reliable applications.

Promise Error Handling:

With Promises, errors are handled using the .catch() method. This approach provides fine-grained control over error handling at different points in the chain.

function promiseErrorHandling() {
    return fetchData()
        .then(data => {
            console.log('Data fetched successfully');
            return processData(data);
        })
        .then(result => {
            console.log('Data processed successfully');
            return saveResult(result);
        })
        .then(savedResult => {
            console.log('Result saved successfully');
            return savedResult;
        })
        .catch(error => {
            console.error('Error occurred in the chain:', error);

            // Handle different types of errors
            if (error.name === 'NetworkError') {
                console.log('Network issue detected, attempting retry...');
                return retryOperation();
            } else if (error.name === 'ValidationError') {
                console.log('Data validation failed:', error.message);
                return handleValidationError(error);
            } else if (error.name === 'StorageError') {
                console.log('Storage operation failed, using fallback');
                return saveToFallbackStorage(error.data);
            } else {
                console.log('Unknown error type:', error);
                throw error; // Re-throw if we can't handle it
            }
        });
}

Here’s what’s going on in this code:

• The .catch() method catches any error that occurs in the entire chain

• You can inspect the error object to determine the appropriate response

• Returning a value from .catch() recovers from the error

• Throwing an error or not returning anything propagates the error further

• The error handler has access to the original error context

Async/Await Error Handling

With async/await, errors are handled using try/catch blocks, which provide more familiar and flexible error-handling patterns.

async function asyncAwaitErrorHandling() {
    try {
        console.log('Starting data processing...');

        const data = await fetchData();
        console.log('Data fetched successfully');

        const result = await processData(data);
        console.log('Data processed successfully');

        const savedResult = await saveResult(result);
        console.log('Result saved successfully');

        return savedResult;

    } catch (error) {
        console.error('Error occurred during processing:', error);

        // Handle different types of errors with more complex logic
        if (error.name === 'NetworkError') {
            console.log('Network issue detected');

            // We can use async operations in error handling
            const retryCount = await getRetryCount();
            if (retryCount < 3) {
                console.log(`Retrying... (attempt ${retryCount + 1})`);
                await incrementRetryCount();
                return await retryOperation();
            } else {
                console.log('Max retries reached, switching to offline mode');
                return await switchToOfflineMode();
            }

        } else if (error.name === 'ValidationError') {
            console.log('Data validation failed:', error.message);

            // Handle validation errors with user feedback
            await logValidationError(error);
            return handleValidationError(error);

        } else if (error.name === 'StorageError') {
            console.log('Storage operation failed');

            // Try multiple fallback options
            try {
                return await saveToFallbackStorage(error.data);
            } catch (fallbackError) {
                console.log('Fallback storage also failed, using cache');
                return await saveToCache(error.data);
            }

        } else {
            console.log('Unknown error type, logging for analysis');
            await logErrorForAnalysis(error);
            throw error; // Re-throw unknown errors
        }
    }
}

Here’s what’s going on in the code:

• The try/catch block handles all errors in the async function

• You can use await inside catch blocks for error recovery operations

• Multiple nested try/catch blocks can handle different scenarios

• Error handling code can be as complex as needed, including loops and conditions

• The error handling logic is co-located with the code that might throw

Advanced Error Pattern – Specific Error Handling:

javascriptasync function advancedErrorHandling(userId) {
    try {
        const user = await fetchUser(userId);

        try {
            const sensitiveData = await fetchSensitiveData(user.id);
            return { user, sensitiveData };
        } catch (sensitiveError) {
            // Handle sensitive data errors specifically
            if (sensitiveError.code === 'PERMISSION_DENIED') {
                console.log('User lacks permission for sensitive data');
                return { user, sensitiveData: null, reason: 'permission_denied' };
            } else {
                // For other sensitive data errors, we still want to return the user
                console.warn('Sensitive data unavailable:', sensitiveError.message);
                return { user, sensitiveData: null, reason: 'data_unavailable' };
            }
        }

    } catch (userError) {
        // Handle user fetching errors
        if (userError.code === 'USER_NOT_FOUND') {
            throw new Error(`User ${userId} does not exist`);
        } else if (userError.code === 'NETWORK_ERROR') {
            throw new Error('Unable to connect to user service');
        } else {
            throw new Error(`Failed to fetch user: ${userError.message}`);
        }
    }
}

Best Practices

Following these best practices will help you write more reliable, maintainable, and performant asynchronous JavaScript code.

Always Handle Errors

One of the most common mistakes in asynchronous JavaScript is forgetting to handle errors. When an async operation fails without proper error handling, it can lead to unhandled promise rejections, application crashes, or silent failures that are difficult to debug.

Don't do this:

javascript// Missing error handling - this is dangerous!
async function badExample() {
    const data = await fetchData(); // What if this fails?
    const processed = await processData(data); // What if this fails?
    return await saveData(processed); // What if this fails?
}

// Usage - user has no idea if something went wrong
const result = await badExample();
console.log(result); // Could be undefined or cause a crash

Why this is problematic:

• If fetchData() fails, the entire function crashes

• The caller has no way to know what went wrong

• In production, this could lead to a poor user experience

• Debugging becomes much harder without proper error context

Do this instead:

javascript// Proper error handling with context and recovery
async function goodExample() {
    try {
        console.log('Starting data processing...');

        const data = await fetchData();
        console.log('Data fetched successfully');

        const processed = await processData(data);
        console.log('Data processed successfully');

        const result = await saveData(processed);
        console.log('Data saved successfully');

        return result;
    } catch (error) {
        // Log the error with context
        console.error('Data processing failed:', {
            error: error.message,
            step: error.step || 'unknown',
            timestamp: new Date().toISOString()
        });

        // Re-throw with more context or handle appropriately
        throw new Error(`Data processing failed: ${error.message}`);
    }
}

// Usage - caller knows how to handle failures
try {
    const result = await goodExample();
    console.log('Success:', result);
} catch (error) {
    console.error('Failed to process data:', error.message);
    // Handle the error appropriately for your application
    showErrorToUser('Data processing failed. Please try again.');
}

Why this is better:

• Every async operation is wrapped in try/catch

• Errors are logged with useful context

• The caller receives meaningful error messages

• The application can gracefully handle failures

Use Promise.all() for Independent Operations

A common performance anti-pattern is making independent async operations run sequentially when they could run in parallel. This unnecessarily increases the total execution time.

Don't do this:

javascript// Sequential when it could be parallel - this is inefficient!
async function inefficient() {
    console.time('Inefficient Approach');

    // These operations are independent but run one after another
    const user = await fetchUser();        // 500ms
    const posts = await fetchPosts();      // 300ms  
    const comments = await fetchComments(); // 400ms
    // Total time: ~1200ms

    console.timeEnd('Inefficient Approach');
    return { user, posts, comments };
}

Why this is problematic:

• Each operation waits for the previous one to complete

• Total execution time is the sum of all individual times

• Network resources are underutilized

• Users experience unnecessary delays

This is particularly common when fetching data for a dashboard or page that needs multiple pieces of information. Developers often write the code sequentially without considering that these operations can run simultaneously.

Do this instead:

javascript// Parallel execution - much more efficient!
async function efficient() {
    console.time('Efficient Approach');

    // Start all operations simultaneously
    const userPromise = fetchUser();        // starts immediately
    const postsPromise = fetchPosts();      // starts immediately
    const commentsPromise = fetchComments(); // starts immediately

    // Wait for all to complete
    const [user, posts, comments] = await Promise.all([
        userPromise,
        postsPromise, 
        commentsPromise
    ]);
    // Total time: ~500ms (longest individual operation)

    console.timeEnd('Efficient Approach');
    return { user, posts, comments };
}

Advanced example with error handling:

javascriptasync function efficientWithErrorHandling() {
    try {
        console.log('Starting parallel data fetch...');

        // Start all operations and handle individual failures
        const results = await Promise.allSettled([
            fetchUser().catch(error => ({ error: error.message, type: 'user' })),
            fetchPosts().catch(error => ({ error: error.message, type: 'posts' })),
            fetchComments().catch(error => ({ error: error.message, type: 'comments' }))
        ]);

        // Process results and handle partial failures
        const [userResult, postsResult, commentsResult] = results;

        return {
            user: userResult.status === 'fulfilled' ? userResult.value : null,
            posts: postsResult.status === 'fulfilled' ? postsResult.value : [],
            comments: commentsResult.status === 'fulfilled' ? commentsResult.value : [],
            errors: results
                .filter(result => result.status === 'rejected' || result.value?.error)
                .map(result => result.reason || result.value?.error)
        };

    } catch (error) {
        console.error('Failed to fetch data:', error);
        throw error;
    }
}

Why this is better:

• Operations run in parallel, reducing total execution time

• Network and CPU resources are used more efficiently

• The application feels more responsive to users

• Can handle partial failures gracefully

Don't Mix Patterns Unnecessarily

Mixing Promise chains with async/await in the same function creates inconsistent code that's harder to read, debug, and maintain. It can also lead to subtle bugs and makes the code flow less predictable.

Avoid this:

javascript// Mixing async/await with .then() - this is confusing!
async function mixedPattern() {
    const data = await fetchData();

    // Suddenly switching to Promise chain style
    return processData(data).then(result => {
        console.log('Processing complete');
        return saveResult(result);
    }).then(savedResult => {
        return savedResult.id;
    }).catch(error => {
        console.error('Error in promise chain:', error);
        throw error;
    });
}

Why this is problematic:

• Inconsistent error handling patterns (try/catch vs .catch())

• Harder to follow the execution flow

• Different debugging experiences

• More opportunities for bugs

• Team members need to understand multiple patterns

This often happens when developers are working with existing Promise-based code and try to gradually introduce async/await without fully converting the function.

Do this instead:

javascript// Consistent async/await - much clearer!
async function consistentPattern() {
    try {
        const data = await fetchData();
        console.log('Data fetched');

        const result = await processData(data);
        console.log('Processing complete');

        const savedResult = await saveResult(result);
        console.log('Result saved');

        return savedResult.id;
    } catch (error) {
        console.error('Error in async function:', error);
        throw error;
    }
}

Alternative consistent Promise approach:

javascript// If you prefer Promises, be consistent with that too
function consistentPromisePattern() {
    return fetchData()
        .then(data => {
            console.log('Data fetched');
            return processData(data);
        })
        .then(result => {
            console.log('Processing complete');
            return saveResult(result);
        })
        .then(savedResult => {
            console.log('Result saved');
            return savedResult.id;
        })
        .catch(error => {
            console.error('Error in promise chain:', error);
            throw error;
        });
}

Use Descriptive Variable Names in Async Functions

javascript// Poor naming
async function process(id) {
    const d = await fetch(id);
    const r = await transform(d);
    return r;
}

// Better naming
async function processUserProfile(userId) {
    const userData = await fetchUserData(userId);
    const transformedProfile = await transformUserData(userData);
    return transformedProfile;
}

Handle Timeouts for Long-Running Operations

javascript// Add timeout wrapper for reliability
function withTimeout(promise, timeoutMs) {
    const timeout = new Promise((_, reject) => {
        setTimeout(() => reject(new Error('Operation timed out')), timeoutMs);
    });

    return Promise.race([promise, timeout]);
}

// Usage
async function reliableDataFetch(userId) {
    try {
        // Timeout after 5 seconds
        const userData = await withTimeout(fetchUserData(userId), 5000);
        return userData;
    } catch (error) {
        if (error.message === 'Operation timed out') {
            console.log('Request timed out, using cached data');
            return getCachedUserData(userId);
        }
        throw error;
    }
}

Making the Right Choice

Here's a decision framework to help you choose:

Choose Promises When:

• Working with libraries that return Promises

• Writing functional programming style code

• Creating utility functions that other code will chain

• You need fine-grained control over Promise behavior

• Working with existing Promise-based codebases

Choose Async/Await When:

• Writing new application code

• You need sequential operations with a clear flow

• Complex error handling is required

• Working with conditional asynchronous logic

• Code readability is a priority

• You're building modern JavaScript applications

Consider Both When:

• Using Promise.all(), Promise.race(), or Promise.allSettled()

• Building complex asynchronous flows

• You need both the power of Promises and the readability of Async/Await

Conclusion

Both Promises and Async/Await are powerful tools for handling asynchronous operations in JavaScript. Promises provide flexibility and fine-grained control, while Async/Await offers cleaner, more readable code that's easier to debug and maintain.

In modern JavaScript development, Async/Await is generally preferred for application code due to its readability and ease of use. However, understanding Promises is still crucial since Async/Await is built on top of them, and many libraries and APIs still use Promises directly.

The key is to understand both approaches and choose the one that best fits your specific use case, team preferences, and project requirements. Remember that you can always mix both approaches when it makes sense – use Async/Await for your main application logic and Promises for utility functions and library integrations.

By mastering both techniques very well, you will be well-equipped to handle any asynchronous programming challenge in JavaScript.

Table of Contents

1. What is a Promise?
2. Comparing Promises to Other Async Patterns
3. How to Create a Promise
4. How to Get the Result of a Promise
5. How to Handle Errors with then
6. Promise Chaining
7. How to Create Immediately Fulfilled or Rejected Promises
8. How to Use async and await
9. Promise Anti-Patterns
10. Summary

What is a Promise?

Let's begin by looking at what a Promise is.

In simple terms, a Promise is an object representing an asynchronous operation. This object can tell you when the operation succeeds, or when it fails.

When you call a Promise-based API, the function returns a Promise object that will eventually provide the result of the operation.

Promise states

During its lifetime, a Promise can be in one of three states:

• Pending: A Promise is pending while the operation is still in progress. It's in an idle state, waiting for the eventual result (or error).
• Fulfilled: The asynchronous task that returned the Promise completed successfully. A Promise is fulfilled with a value, which is the result of the operation.
• Rejected: If the asynchronous operation failed, the Promise is said to be rejected. A Promise is rejected with a reason. This typically is an Error object, but a Promise can be rejected with any value – even a simple number or string!

A Promise starts out in the pending state, then depending on the result, will transition to either the fulfilled or rejected state. A Promise is said to be settled once it reaches either the fulfilled or rejected state.

Of course, there is no guarantee that the asynchronous task will ever complete. It's completely possible for a Promise to remain in the pending state forever, though this would be because of a bug in the asynchronous task's code.

Comparing Promises to Other Async Patterns

Promises behave a little differently from other asynchronous patterns in JavaScript. Before diving deeper into Promises, let's briefly compare Promises to these other techniques.

Callback functions

A callback function is a function that you pass to another function. When the function you call has finished its work, it will execute your callback function with the result.

Imagine a function called getUsers which will make a network request to get an array of users. You can pass a callback function to getUsers, which will be called with the array of users once the network request is complete:

console.log('Preparing to get users');
getUsers(users => {
  console.log('Got users:', users);
});
console.log('Users request sent');

First, the above code will print "Preparing to get users". Then it calls getUsers which will initiate the network request. But JavaScript doesn't wait for the request to complete. Instead, it immediately executes the next console.log statement.

Later, once the users have been loaded, your callback will be executed and "Got users" will be printed.

Some callback-based APIs, such as many Node.js APIs, use error-first callbacks. These callback functions take two arguments. The first argument is an error, and the second is the result.

Typically, only one of these will have a value, depending on the outcome of the operation. This is similar to the fulfilled and rejected Promise states.

The trouble with callback APIs is that of nesting. If you need to make multiple asynchronous calls in sequence, you’ll end up with nested function calls and callbacks.

Imagine you want to read a file, process some data from that file, then write a new file. All three of these tasks are asynchronous and use an imaginary callback based API.

readFile('sourceData.json', data => {
    processData(data, result => {
        writeFile(result, 'processedData.json', () => {
            console.log('Done processing');
        });
    });
});

It gets even more unwieldy with error handling. Imagine these functions used error-first callbacks:

readFile('sourceData.json', (error, data) => {
    if (error) {
        console.error('Error reading file:', error);
        return;
    }

    processData(data, (error, result) => {
        if (error) {
            console.error('Error processing data:', error);
            return;
        }

        writeFile(result, 'processedData.json', error => {
            if (error) {
                console.error('Error writing file:', error);
                return;
            }

            console.log('Done processing');
        });
    });
});

Callback functions aren't typically used directly as an asynchronous mechanism in modern APIs, but as you'll soon see, they are the foundation for other types of asynchronous tools such as Promises.

Events

An event is something that you can listen for and respond to. Some objects in JavaScript are event emitters, which means you can register event listeners on them.

In the DOM, many elements implement the EventTarget interface which provides addEventListener and removeEventListener methods.

A given type of event can occur more than once. For example, you can listen for the click event on a button:

myButton.addEventListener('click', () => {
   console.log('button was clicked!'); 
});

Every time the button is clicked, the text "button was clicked!" will be printed to the console.

addEventListener itself accepts a callback function. Whenever the event occurs, the callback is executed.

An object can emit multiple types of events. Consider an image object. If the image at the specified URL is loaded successfully, the load event is triggered. If there was an error, this event is not triggered and instead the error event is triggered.

myImage.addEventListener('load', () => {
    console.log('Image was loaded');
});

myImage.addEventListener('error', error => {
   console.error('Image failed to load:', error); 
});

Suppose the image already completed loading before you added the event listener. What do you think would happen? Nothing! One drawback of event-based APIs is that if you add an event listener after an event, your callback won't be executed. This makes sense, after all – you wouldn't want to receive all past click events when you add a click listener to a button.

Now that we've explored callbacks and events, let's take a closer look at Promises.

How to Create a Promise

You can create a Promise using the new keyword with the Promise constructor. The Promise constructor takes a callback function that takes two arguments, called resolve and reject. Each of these arguments is a function provided by the Promise, which are used to transition the Promise to either the fulfilled or rejected state.

Inside your callback, you perform your asynchronous work. If the task is successful, you call the resolve function with the final result. If there was an error, you call the reject function with the error.

Here's an example of creating a Promise that wraps the browser's setTimeout function:

function wait(duration) {
    return new Promise(resolve => {
        setTimeout(resolve, duration);
    });
}

The resolve function is passed as the first argument to setTimeout. After the time specified by duration has passed, the browser calls the resolve function which fulfills the Promise.

Note: In this example, the delay before the resolve function is called may be longer than the duration passed to the function. This is because setTimeout does not guarantee execution at the specified time.

It's important to note that often times, you won't actually need to construct your own Promise by hand. You will typically be working with Promises returned by other APIs.

How to Get the Result of a Promise

We've seen how to create a Promise, but how do you actually get the result of the asynchronous operation? To do this, you call then on the Promise object itself. then takes a callback function as its argument. When the Promise is fulfilled, the callback is executed with the result.

Let's see an example of this in action. Imagine a function called getUsers that asynchronously loads a list of user objects and returns a Promise. You can get the list of users by calling then on the Promise returned by getUsers.

getUsers()
  .then(users => {
    console.log('Got users:', users);
  });

Just like with events or callback based APIs, your code will continue executing without waiting for the result. Some time later, when the users have been loaded, your callback is scheduled for execution.

console.log('Loading users');
getUsers()
  .then(users => {
    console.log('Got users:', users);
  });
console.log('Continuing on');

In the above example, "Loading users" will be printed first. The next thing that is printed will be "Continuing on", because the getUsers call is still loading the users. Later, you'll see "Got users" printed.

How to Handle Errors with then

We've seen how to use then to get the result provided to the Promise, but what about errors? What happens if we fail to load the user list?

The then function actually takes a second argument, another callback. This is the error handler. If the Promise is rejected, this callback is executed with the rejection value.

getUsers()
  .then(users => {
    console.log('Got users:', users);
  }, error => {
    console.error('Failed to load users:', error);  
  });

Since a Promise can only ever be either fulfilled or rejected, but not both, only one of these callback functions will be executed.

It's important to always handle errors when working with Promises. If you have a Promise rejection that isn't handled by an error callback, you'll get an exception in your console about an unhandled rejection, which can cause issues for your users at runtime.

Promise Chaining

What if you need to work with multiple Promises in series? Consider the earlier example where we loaded some data from a file, did some processing, and wrote the result to a new file. Suppose the readFile, processData, and writeFile functions used Promises instead of callbacks.

You might try something like this:

readFile('sourceData.json')
  .then(data => {
    processData(data)
      .then(result => {
        writeFile(result, 'processedData.json')
          .then(() => {
            console.log('Done processing');
          });
      });
  });

This doesn't look great, and we still have the nesting issue that we had with the callback approach. Thankfully, there is a better way. You can chain Promises together in a flat sequence.

To see how this works, let's look deeper at how then works. The key idea is this: the then method returns another Promise. Whatever value you return from your then callback becomes the fulfilled value of this new Promise.

Consider a getUsers function that returns a Promise that gets fulfilled with an array of user objects. Suppose we call then on this Promise, and in the callback, return the first user in the array (users[0]):

getUsers().then(users => users[0]);

This whole expression, then, results in a new Promise that will be fulfilled with the first user object!

getUsers()
  .then(users => users[0])
  .then(firstUser => {
    console.log('First user:', firstUser.username);
  });

This process of returning a Promise, calling then, and returning another value, resulting in another Promise, is called chaining.

Let's extend this idea. What if, instead of returning a value from the then handler, we returned another Promise? Consider again the file-processing example, where readFile and processData are both asynchronous functions that return Promises:

readFile('sourceData.json')
  .then(data => processData(data));

The then handler calls processData, returning the resulting Promise. As before, this returns a new Promise. In this case, the new Promise will become fulfilled when the Promise returned by processData is fulfilled, giving you the same value. So the code in the above example would return a Promise that will be fulfilled with the processed data.

You can chain multiple Promises, one after the other, until you get to the final value you need:

readFile('sourceData.json')
  .then(data => processData(data))
  .then(result => writeFile(result, 'processedData.json'))
  .then(() => console.log('Done processing'));

In the above example, the whole expression will result in a Promise that won't be fulfilled until after the processed data is written to a file. "Done processing!" will be printed to the console, and then the final Promise will become fulfilled.

Error handling in Promise chains

In our file-processing example, an error can occur at any stage in the process. You can handle an error from any step in the Promise chain by using the Promise's catch method.

readFile('sourceData.json')
  .then(data => processData(data))
  .then(result => writeFile(result, 'processedData.json'))
  .then(() => console.log('Done processing'))
  .catch(error => console.log('Error while processing:', error));

If one of the Promises in the chain is rejected, the callback function passed to catch will execute and the rest of the chain is skipped.

How to use finally

You might have some code you want to execute regardless of the Promise result. For example, maybe you want to close a database or a file.

openDatabase()
  .then(data => processData(data))
  .catch(error => console.error('Error'))
  .finally(() => closeDatabase());

How to use Promise.all

Promise chains let you run multiple tasks in sequence, but what if you want to run multiple tasks at the same time, and wait until they all complete? The Promise.all method lets you do just that.

Promise.all takes an array of Promises, and returns a new Promise. This Promise will be fulfilled once all of the other Promises are fulfilled. The fulfillment value is an array containing the fulfillment values of each Promise in the input array.

Suppose you have a function loadUserProfile that loads a user's profile data, and another function loadUserPosts that loads a user's posts. They both take a user ID as the argument. There's a third function, renderUserPage, that needs both the profile and list of posts.

const userId = 100;

const profilePromise = loadUserProfile(userId);
const postsPromise = loadUserPosts(userId);

Promise.all([profilePromise, postsPromise])
  .then(results => {
    const [profile, posts] = results;
    renderUserPage(profile, posts);
  });

What about errors? If any of the Promises passed to Promise.all is rejected with an error, the resulting Promise is also rejected with that error. If any of the other Promises are fulfilled, those values are lost.

How to use Promise.allSettled

The Promise.allSettled method works similarly to Promise.all. The main difference is that the Promise returned by Promise.allSettled will never be rejected.

Instead, it is fulfilled with an array of objects, whose order corresponds to the order of the Promises in the input array. Each object has a status property which is either "fulfilled" or "rejected", depending on the result.

If status is "fulfilled", the object will also have a value property indicating the Promise's fulfillment value. If status is "rejected", the object will instead have a reason property which is the error or other object the Promise was rejected with.

Consider again a getUser function that takes a user ID and returns a Promise that is fulfilled with the user having that ID. You can use Promise.allSettled to load these in parallel, making sure to get all users that were loaded successfully.

Promise.allSettled([
  getUser(1),
  getUser(2),
  getUser(3)
]).then(results => {
   const users = results
     .filter(result => result.status === 'fulfilled')
     .map(result => result.value);
   console.log('Got users:', users);
});

You can make a general purpose loadUsers function that loads users, in parallel, given an array of user IDs. The function returns a Promise that is fulfilled with an array of all users that were successfully loaded.

function getUsers(userIds) {
  return Promise.allSettled(userIds.map(id => getUser(id)))
    .then(results => {
      return results
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value);
    });
}

Then, you can just call getUsers with an array of user IDs:

getUsers([1, 2, 3])
    .then(users => console.log('Got users:', users));

How to Create Immediately Fulfilled or Rejected Promises

Sometimes, you may want to wrap a value in a fulfilled Promise. For example, maybe you have an asynchronous function that returns a Promise, but there is a base case where you know the value ahead of time and you don't need to do any asynchronous work.

To do this, you can call Promise.resolve with a value. This returns a Promise that is immediately fulfilled with the value you specified:

Promise.resolve('hello')
  .then(result => {
    console.log(result); // prints "hello"
  });

This is more or less equivalent to the following:

new Promise(resolve => {
   resolve('hello'); 
}).then(result => {
    console.log(result); // also prints "hello"
});

To make your API more consistent, you can create an immediately fulfilled Promise and return that in such cases. This way, the code that calls your function knows to always expect a Promise, no matter what.

For example, consider the getUsers function defined earlier. If the array of user IDs is empty, you could simply return an empty array because no users will be loaded.

function getUsers(userIds) {
  // immediately return the empty array
  if (userIds.length === 0) {
    return Promise.resolve([]);
  }

  return Promise.allSettled(userIds.map(id => getUser(id)))
    .then(results => {
      return results
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value);
    });
}

Another use for Promise.resolve is to handle the case where you are given a value that may or may not be a Promise, but you want to always treat it as a Promise.

You can safely call Promise.resolve on any value. If it was already a Promise, you'll just get another Promise that will have the same fulfillment or rejection value. If it was not a Promise, it will be wrapped in an immediately fulfilled Promise.

The benefit of this approach is you don't have to do something like this:

function getResult(result) {
  if (result.then) {
     result.then(value => {
         console.log('Result:', value);
     });
  } else {
      console.log('Result:', result);
  }
}

Similarly, you can create an immediately rejected Promise with Promise.reject. Returning once again to the getUsers function, maybe we want to immediately reject if the user ID array is null, undefined, or not an array.

function getUsers(userIds) {
  if (userIds == null || !Array.isArray(userIds)) {
    return Promise.reject(new Error('User IDs must be an array'));
  }

  // immediately return the empty array
  if (userIds.length === 0) {
    return Promise.resolve([]);
  }

  return Promise.allSettled(userIds.map(id => getUser(id)))
    .then(results => {
      return results
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value);
    });
}

How to use Promise.race

Just like Promise.all or Promise.allSettled, the Promise.race static method takes an array of Promises, and returns a new Promise. As the name implies, though, it works somewhat differently.

The Promise returned by Promise.race will wait until the first of the given Promises is fulfilled or rejected, and then that Promise will also be fulfilled or rejected, with the same value. When this happens, the fulfilled or rejected values of the other Promises are lost.

How to use Promise.any

Promise.any works similarly to Promise.race with one key difference – where Promise.race will be done as soon as any Promise is fulfilled or rejected, Promise.any waits for the first fulfilled Promise.

How to Use async and await

async and await are special keywords that simplify working with Promises. They remove the need for callback functions and calls to then or catch. They work with try-catch blocks, as well.

Here's how it works. Instead of calling then on a Promise, you await it by putting the await keyword before it. This effectively "pauses" execution of the function until the Promise is fulfilled.

Here's an example using standard Promises:

getUsers().then(users => {
    console.log('Got users:', users);
});

Here's the equivalent code using the await keyword:

const users = await getUsers();
console.log('Got users:', users);

Promise chains are a little cleaner, too:

const data = await readFile('sourceData.json');
const result = await processData(data);
await writeFile(result, 'processedData.json');

Remember that each usage of await will pause execution of the rest of the function until the Promise you are awaiting becomes fulfilled. If you want to await several Promises that run in parallel, you can use Promise.all:

const users = await Promise.all([getUser(1), getUser(2), getUser(3)]);

To use the await keyword, your function must be marked as an async function. You can do this by placing the async keyword before your function:

async function processData(sourceFile, outputFile) {
  const data = await readFile(sourceFile);
  const result = await processData(data);
  writeFile(result, outputFile);
}

Adding the async keyword also has another important effect on the function. Async functions always implicitly return a Promise. If you return a value from an async function, the function will actually return a Promise that is fulfilled with that value.

async function add(a, b) {
  return a + b;   
}

add(2, 3).then(sum => {
   console.log('Sum is:', sum); 
});

In the above example, the function is returning the sum of the two arguments a and b. But since it's an async function, it doesn't return the sum but rather a Promise that is fulfilled with the sum.

Error handling with async and await

We use await to wait for Promise to be fulfilled, but what about handling errors? If you are awaiting a Promise, and it is rejected, an error will be thrown. This means to handle the error, you can put it in a try-catch block:

try {
    const data = await readFile(sourceFile);
    const result = await processData(data);
    await writeFile(result, outputFile);
} catch (error) {
    console.error('Error occurred while processing:', error);
}

Promise Anti-Patterns

Unnecessarily creating a new Promise

Sometimes there's no getting around creating a new Promise. But if you are already working with Promises returned by an API, you usually shouldn't need to create your own Promise:

function getUsers() {
  return new Promise(resolve => {
     fetch('https://example.com/api/users')
       .then(result => result.json())
       .then(data => resolve(data))
  });
}

In this example, we're creating a new Promise to wrap the Fetch API, which already returns Promises. This is unnecessary. Instead, just return the Promise chain from the Fetch API directly:

function getUsers() {
  return fetch('https://example.com/api/users')
    .then(result => result.json());
}

In both cases, the code calling getUsers looks the same:

getUsers()
  .then(users => console.log('Got users:', users))
  .catch(error => console.error('Error fetching users:', error));

Swallowing errors

Consider this version of a getUsers function:

function getUsers() {
    return fetch('https://example.com/api/users')
        .then(result => result.json())
        .catch(error => console.error('Error loading users:', error));
}

Error handling is good, right? You might be surprised by the result if we call this getUsers function:

getUsers()
  .then(users => console.log('Got users:', users))
  .catch(error => console.error('error:', error);)

You might expect this to print "error", but it will actually print "Got users: undefined". This is because the catch call "swallows" the error and returns a new Promise that is fulfilled with the return value of the catch callback, which is undefined (console.error returns undefined). You'll still see the "Error loading users" log message from getUsers, but the returned Promise will be fulfilled, not rejected.

If you want to catch the error inside the getUsers function and still reject the returned Promise, the catch handler needs to return a rejected Promise. You can do this by using Promise.reject.

function getUsers() {
  return fetch('https://example.com/api/users')
    .then(result => result.json())
    .catch(error => {
      console.error('Error loading users:', error);
      return Promise.reject(error);
    });
}

Now you'll still get the "Error loading users" message, but the returned Promise will also be rejected with the error.

Nesting Promises

Avoid nesting Promise code. Instead, try to use flattened Promise chains.

Instead of this:

readFile(sourceFile)
  .then(data => {
    processData(data)
      .then(result => {
        writeFile(result, outputFile)
          .then(() => console.log('done');
      });
  });

Do this:

readFile(sourceFile)
  .then(data => processData(data))
  .then(result => writeFile(result, outputFile))
  .then(() => console.log('done'));

Summary

Here are the key points for working with Promises:

• A Promise can be pending, fulfilled, or rejected
• A Promise is settled if it is either fulfilled or rejected
• Use then to get the fulfilled value of a Promise
• Use catch to handle errors
• Use finally to perform cleanup logic that you need in either the success or error case
• Chain Promises together to perform asynchronous tasks in sequence
• Use Promise.all to get a Promise that is fulfilled when all given Promises are fulfilled, or rejects when one of those Promises rejects
• Use Promise.allSettled to get a Promise that is fulfilled when all given Promises are either fulfilled or rejected
• Use Promise.race to get a Promise that is fulfilled or rejected when the first of the given Promises is either fulfilled or rejected
• Use Promise.any to get a Promise that is fulfilled when the first of the given Promises is fulfilled
• Use the await keyword to wait for the fulfillment value of a Promise
• Use a try-catch block to handle errors when using the await keyword
• A function that uses await inside of it must use the async keyword

Thank you for reading this deep dive on Promises. I hope you learned something new!

The JavaScript runtime engine makes it a synchronous programming language where programs run sequentially. Programming languages that are not synchronous are called asynchronous programming languages, which are programming languages where programs run concurrently.

Although JavaScript is synchronous, you can perform asynchronous programming with it. In this article, you will learn about asynchronous programming in JavaScript and how to use it.

What is Asynchronous Programming?

Asynchronous programming is a technique that allows your program to run its tasks concurrently. You can compare asynchronous programming to a chef with multiple cookers, pots, and kitchen utensils. This chef will be able to cook various dishes at a time.

Asynchronous programming makes your JavaScript programs run faster, and you can perform asynchronous programming with any of these:

• Callbacks

• Promises

• Async/Await

In the upcoming sections, you will learn about these techniques and how to use them.

Callbacks

A callback is a function used as an argument in another function. Callbacks allow you to create asynchronous programs in JavaScript by passing the result of a function into another function.

function greet(name) {
    console.log(`Hi ${name}, how do you do?`);
}

function displayGreeting(callback) {
    let name = prompt("Please enter your name");
    callback(name);
};

displayGreeting(greet);

In the code above, the greet function is used to log a greeting to the console, and it needs the name of the person to be greeted.

The displayGreeting function gets the person's name and has a callback that passes the name as an argument to the greet function while calling it. Then the displayGreeting function is called with the greet function passed to it as an argument.

Callback hell

Although callbacks make it easy to control and make your program asynchronous, you'll eventually run into a problem called callback hell while using them.

This problem arises when you perform multiple asynchronous tasks with callbacks, which might result in nesting callbacks in callbacks.

Here's an example:

function greet(callback) {
    setTimeout(function() {
        console.log("Hi Musab");
        callback();
    }, 1000);
}

function introduce(callback) {
    setTimeout(function() {
        console.log("I am your academic advisor");
        callback();
    }, 1000);
}

function question(callback) {
    setTimeout(function() {
        console.log("Are you currently facing any challenge in your academics");;
        callback();
    }, 1000);
}

// callback hell
greet(function() {
    introduce(function() {
        question(function() {
            console.log("Done");
        });
    });
});

In the code above, the greet, introduce, and question functions are nested to create a callback hell, which makes error handling difficult. You should change your asynchronous programming technique from callbacks to Promise to avoid the callback hell.

Promise

Most programs consist of a producing code that performs a time-consuming task and a consuming code that needs the result of the producing code.

A Promise links the producing and the consuming code together. In the example below, the displayGreeting function is the producing code while the greet function is the consuming code.

let name;

// producing code
function displayGreeting(callback) {
    name = prompt("Please enter your name");
}

// consuming code
function greet(name) {
    console.log(`Hi ${name}, how do you do?`);
}

In the example below, the new Promise syntax creates a new Promise, which takes a function that executes the producing code. The function either resolves or rejects its task and assigns the Promise to a variable named promise.

If the producing code resolves, its result will be passed to the consuming code through the .then handler.

let name;

function displayGreeting() {
    name = prompt("Please enter your name");
}

let promise = new Promise(function(resolve, reject) {
    // the producing code
    displayGreeting();
    resolve(name)
});

function greet(result) {
    console.log(`Hi ${result}, how do you do?`);
}

promise.then(
    // the consuming code
    result => greet(result),
    error => alert(error)
);

You can convert the previous callback hell's example to a promise by returning a promise from each function and chaining the function calls together with the .then handler.

You can also use the .catch handler to catch any error thrown during the function execution.

function greet() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("Hi Musab");
            resolve();
        }, 1000);
    });  
}

function introduce() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("I am your academic advisor");
            resolve();
        }, 1000);
    });
}

function question() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("Are you currently facing any challenge in your academics");;
            resolve();
        }, 1000);
    });
}

greet()
    .then(() => introduce())
    .then(() => question())
    .then(() => console.log("Done"))
    .catch(error => console.error("An error occured: ", error));

What are the States of a Promise in JavaScript?

A promise can be in any of these three states:

• Pending: This is the initial state of the promise and its state while it's still running.

• Fulfilled: This is the state of the promise when it resolves successfully.

• Rejected: This is the state of the promise when errors make it not to be resolved.

Async/Await

async/await is syntactic sugar for creating a Promise — it makes creating promises easier.

To make a function asynchronous using async/await, you have to write the async keyword before the function declaration. Then, you can write the await keyword before the producing code's execution call.

Here's an example:

let name;

function displayGreeting() {
    name = prompt("Please enter your name");
    return name;
}

function greet(result) {
    console.log(`Hi ${result}, how do you do?`);
}

async function greeting() {
    // the producing code
    let result = await displayGreeting();
    // the consuming code
    greet(result);
};

greeting();

In the example above, the producing code is the displayGreeting function, and the consuming code is the greet function. The greeting function is the Promise that connects the producing and the consuming code. It waits for the result returned from the displayGreeting function and passes that result to the greet function.

Error Handling in Async/Await

You can easily handle errors that arise when you perform asynchronous operations with async/await using the try...catch statement. The asynchronous operation executes in the try block, and you can handle errors in the catch block.

That is:

async function greeting() {
    try {
        let result = await displayGreeting();
        greet(result);
    } catch(err) {
        console.error(err)
    }
};

Conclusion

Asynchronous programming in JavaScript is used to make tasks in a program run concurrently and uses techniques such as callbacks, Promise, or async/await.

This article explains how to use these asynchronous programming techniques and how to handle errors with them.

You can check the promises and async/await section on the JavaScript.info website to learn more about asynchronous programming in JavaScript.

As web applications become more sophisticated, the need to handle asynchronous operations efficiently becomes crucial. Asynchronous JavaScript allows you to execute code without blocking the main thread, ensuring a smoother user experience.

Promises are a powerful tool in JavaScript for managing asynchronous operations, providing a cleaner and more organized approach to handling asynchronous code.

Here's what we'll cover:

1. What is asynchronous JavaScript?
2. The need for promises
3. What is callback hell?
4. How to create a promise
5. How to consume promises with .then() and .catch()
6. How to chain promises with .then()
7. More complex examples of promise chaining
8. How to handle errors with .catch()
9. Error handling in more detail
10. Async/await in JavaScript
11. Alternative asynchronous programming methods
12. Conclusion

What is Asynchronous JavaScript?

JavaScript is single-threaded, meaning it can only execute one operation at a time. However, in web development, there are tasks that take time to complete, such as fetching data from an API, reading a file, or waiting for a user input. If these tasks were executed synchronously, they would block the main thread, making the user interface unresponsive.

Asynchronous JavaScript allows you to execute code without waiting for the completion of time-consuming tasks. Instead of blocking the main thread, these tasks are delegated to the browser's background processes, and once completed, a callback function is triggered to handle the result.

The Need for Promises

Before Promises, developers used callbacks to handle asynchronous operations. Callbacks are functions passed as arguments to other functions, and they are executed once the asynchronous operation is completed.

While callbacks serve their purpose, they often lead to a phenomenon known as "callback hell" – a situation where multiple nested callbacks make the code hard to read and maintain.

Callback hell arises when asynchronous operations depend on the results of other asynchronous operations, creating deeply nested callback functions. This can make the code difficult to follow, debug, and maintain.

Promises were introduced to address this issue and provide a more elegant solution to asynchronous code.

What is Callback Hell?

Callback hell, also known as the "pyramid of doom," occurs when you have multiple nested callbacks within your code. Each level of nesting represents a subsequent asynchronous operation that depends on the result of the previous one. Here's a simplified example:

getData(function (data) {
  processData(data, function (processedData) {
    updateUI(processedData, function () {
      // More nested callbacks...
    });
  });
});

As you can see, as the number of asynchronous operations increases, the code indentation deepens, leading to a less readable and maintainable codebase.

Promises provide a way to mitigate callback hell by offering a cleaner and more structured approach to handling asynchronous code.

How to Create a Promise

Let's dive into the basics of creating a promise. The Promise constructor takes a function as its argument, which has two parameters: resolve and reject. These parameters are functions that you call to indicate the completion or failure of the asynchronous operation.

// Creating a Promise that resolves to success
const successPromise = new Promise((resolve, reject) => {
  // Simulating a successful asynchronous operation
  const success = true;

  if (success) {
    resolve("Operation completed successfully");
  } else {
    reject("Operation failed");
  }
});

// Creating a Promise that resolves to an error
const errorPromise = new Promise((resolve, reject) => {
  // Simulating a failed asynchronous operation
  const success = false;

  if (success) {
    resolve("Operation completed successfully");
  } else {
    reject("Operation failed");
  }
});

In the successPromise, the asynchronous operation is simulated to be successful, and resolve is called with the success message. In the errorPromise, the operation is simulated to fail, and reject is called with the error message.

How to Consume Promises with .then() and .catch()

Once a promise is created, you can consume its result using the .then() and .catch() methods. The .then() method is used when the promise is fulfilled, and the .catch() method is used when the promise is rejected.

// Consuming the successPromise
successPromise
  .then((result) => {
    console.log(result); // Output: Operation completed successfully
  })
  .catch((error) => {
    console.error(error); // This won't be executed
  });

// Consuming the errorPromise
errorPromise
  .then((result) => {
    console.log(result); // This won't be executed
  })
  .catch((error) => {
    console.error(error); // Output: Operation failed
  });

In the example above, the .then() method logs the success message for successPromise and the error message for errorPromise. The .catch() method handles errors for both Promises.

How to Chain Promises with .then()

One of the powerful features of promises is the ability to chain them together using the .then() method. This is especially useful when you have multiple asynchronous operations that depend on each other.

const firstPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("First operation completed");
  }, 1000);
});

const secondPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Second operation completed");
  }, 500);
});

const thirdPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Third operation completed");
  }, 800);
});

firstPromise
  .then((result) => {
    console.log(result); // Output: First operation completed
    return secondPromise;
  })
  .then((result) => {
    console.log(result); // Output: Second operation completed
    return thirdPromise;
  })
  .then((result) => {
    console.log(result); // Output: Third operation completed
  });

In this example, the second and third promises are chained to the first one using the return statement inside the .then() callbacks. This ensures that each promise waits for the completion of the previous one before executing.

More Complex Examples of Promise Chaining

Let's explore more complex examples of promise chaining to demonstrate how it can be applied in real-world scenarios.

Example 1: Fetching User Data and Posts

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    // Simulating fetching user data from an API
    setTimeout(() => {
      const userData = { id: userId, username: 'john_doe' };
      resolve(userData);
    }, 1000);
  });
}

function fetchUserPosts(userId) {
  return new Promise((resolve, reject) => {
    // Simulating fetching user posts from an API
    setTimeout(() => {
      const posts = [
        { id: 1, title: 'Post 1' },
        { id: 2, title: 'Post 2' },
      ];
      resolve(posts);
    }, 800);
  });
}

// Chaining promises to fetch user data and posts sequentially
fetchUserData(123)
  .then((userData) => {
    console.log(userData); // Output: { id: 123, username: 'john_doe' }
    return fetchUserPosts(userData.id);
  })
  .then((userPosts) => {
    console.log(userPosts); // Output: [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }]
  })
  .catch((error) => {
    console.error('Error:', error);
  });

In this example, two asynchronous operations (fetchUserData and fetchUserPosts) are chained to fetch user data and posts sequentially.

Example 2: Processing Data with Multiple Steps

function processData(data) {
  return new Promise((resolve, reject) => {
    // Simulating data processing
    setTimeout(() => {
      const processedData = data.map((item) => item * 2);
      resolve(processedData);
    }, 500);
  });
}

function displayData(data) {
  return new Promise((resolve, reject) => {
    // Simulating displaying data
    setTimeout(() => {
      console.log(data); // Output: [2, 4, 6, 8, 10]
      resolve('Data displayed successfully');
    }, 300);
  });
}

// Chaining promises to process and display data sequentially
const originalData = [1, 2, 3, 4, 5];
processData(originalData)
  .then((processedData) => {
    console.log(processedData); // Output: [2, 4, 6, 8, 10]
    return displayData(processedData);
  })
  .then((result) => {
    console.log(result); // Output: Data displayed successfully
  })
  .catch((error) => {
    console.error('Error:', error);
  });

In this example, two asynchronous operations (processData and displayData) are chained to process and display data sequentially.

How to Handle Errors with .catch()

When working with asynchronous operations, handling errors is crucial. Promises make error handling more manageable by providing the .catch() method, which is used to catch any errors that occur during the Promise chain.

const errorPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = false;

    if (success) {
      resolve("Operation completed successfully");
    } else {
      reject("Operation failed");
    }
  }, 1000);
});

errorPromise
  .then((result) => {
    console.log(result); // This won't be executed
  })
  .catch((error) => {
    console.error(error); // Output: Operation failed
  });

In this example, since the success variable is set to false, the promise is rejected, and the .catch() method is invoked with the reason for failure.

Error Handling in More Detail

While the previous examples touched on error handling, let's delve deeper into the techniques for handling errors with promises.

Using Try-Catch Blocks

You can use try-catch blocks to handle errors within the asynchronous operations themselves.

function fetchData() {
  return new Promise(async (resolve, reject) => {
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();
      resolve(data);
    } catch (error) {
      reject(`Error fetching data: ${error.message}`);
    }
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

In this example, the try block attempts to fetch data, checks if the response is okay, and then proceeds to parse it as JSON. If any error occurs within the try block, the catch block is executed, and the error is passed to the reject function.

Using the .catch() Method

You can also use the .catch() method at the end of the promise chain to handle errors that may occur at any stage.

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

This approach is particularly useful when you want to handle errors globally for a sequence of asynchronous operations.

Handling Errors in Promise Chaining

When chaining Promises, it's important to handle errors at each step of the chain. Here's an example demonstrating error handling in a Promise chain:

function stepOne() {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve('Step One completed');
      } else {
        reject('Step One failed');
      }
    }, 500);
  });
}

function stepTwo(data) {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      const success = false;
      if (success) {
        resolve(`Step Two completed with data: ${data}`);
      } else {
        reject('Step Two failed');
      }
    }, 300);
  });
}

function stepThree(result) {
  return new Promise((resolve) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      resolve(`Step Three completed with result: ${result}`);
    }, 200);
  });
}

stepOne()
  .then((data) => stepTwo(data))
  .then((result) => stepThree(result))
  .then((finalResult) => {
    console.log(finalResult); // This won't be executed in case of any rejection in the chain
  })
  .catch((error) => {
    console.error('Error in Promise chain:', error);
  });

In this example, if any step in the chain encounters an error (either in the asynchronous operation or due to conditional logic), the catch block at the end of the chain will handle the error.

Async/Await in JavaScript

Async/await is a syntactic sugar introduced in ECMAScript 2017 (ES8) that simplifies the handling of asynchronous code. It provides a more readable and synchronous-like structure, making it easier for developers to work with asynchronous operations.

How it Works:

• The async keyword is used to define an asynchronous function. This function always returns a Promise.
• The await keyword is used within the async function to pause its execution until the Promise is resolved. It allows you to work with Promises in a more synchronous manner.

Example:

// Asynchronous function using async/await
async function fetchData() {
  try {
    // Simulating an asynchronous operation, like fetching data from an API
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

    // Once the Promise is resolved, the code below will execute
    let data = await response.json();

    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

// Calling the async function
fetchData();

So what's this code doing?

1. The fetchData function is declared as async, indicating that it contains asynchronous operations.
2. Inside the function, await fetch(...) is used to make an asynchronous request to a URL, and the function pauses until the request is complete.
3. After the response is received, await response.json() is used to extract the JSON data from the response.
4. The try block handles successful execution, and the data is logged to the console.
5. If any error occurs during the asynchronous operations, the catch block handles the error.

Now, let's discuss the pros and cons of async/await.

Pros of async/await

1. Readability and Simplicity:

Async/await syntax makes asynchronous code look similar to synchronous code, improving readability and making it easier for developers to understand.

// Using Promises
function fetchData() {
  return fetch('https://api.example.com/data')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
}

// Using Async/Await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

2. Error Handling:

Async/await simplifies error handling by allowing the use of traditional try-catch blocks, making it more intuitive to manage errors within asynchronous functions.

// Using Promises
function fetchData() {
  return fetch('https://api.example.com/data')
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
}

// Using Async/Await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

3. Sequential Execution:

Async/await allows developers to write asynchronous code in a more sequential manner, which can be easier to reason about and debug.

// Using Promises
function fetchDataSequentially() {
  fetchUserData()
    .then((userData) => fetchUserPosts(userData.id))
    .then((userPosts) => processPosts(userPosts))
    .then((result) => displayResult(result))
    .catch((error) => console.error(error));
}

// Using Async/Await
async function fetchDataSequentially() {
  try {
    const userData = await fetchUserData();
    const userPosts = await fetchUserPosts(userData.id);
    const result = await processPosts(userPosts);
    displayResult(result);
  } catch (error) {
    console.error(error);
  }
}

Cons of async/await

1. No Built-In Timeout:

Async/await doesn't have built-in support for setting a timeout on asynchronous operations. If you need to implement a timeout, you might need to use a combination of Promise.race() and setTimeout.

async function fetchDataWithTimeout() {
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('Timeout exceeded')), 5000);
  });

  try {
    const response = await Promise.race([fetch('https://api.example.com/data'), timeoutPromise]);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

2. Sequential Execution vs. Parallelism:

While async/await facilitates writing sequential code, it may not be ideal for scenarios where you want parallel execution of independent asynchronous tasks. In such cases, promises and Promise.all() may be more suitable.

// Using Promises and Promise.all()
function fetchAndProcessData() {
  const userDataPromise = fetchUserData();
  const

userPostsPromise = fetchUserPosts();

  Promise.all([userDataPromise, userPostsPromise])
    .then(([userData, userPosts]) => processAndDisplayData(userData, userPosts))
    .catch((error) => console.error(error));
}

// Using Async/Await
async function fetchAndProcessData() {
  try {
    const userData = await fetchUserData();
    const userPosts = await fetchUserPosts();
    processAndDisplayData(userData, userPosts);
  } catch (error) {
    console.error(error);
  }
}

3. Potential for Unhandled Promise Rejections:

Async/await may lead to unhandled promise rejections if not used with care. For instance, forgetting to use try-catch blocks or not chaining .catch() at the end of an async function might result in unhandled promise rejections.

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

fetchData(); // Unhandled promise rejection if fetch fails

To mitigate this, make sure you implement proper error handling in all async functions.

Using the .catch() Method

You can also use the .catch() method at the end of the promise chain to handle errors that may occur at any stage.

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

This approach is particularly useful when you want to handle errors globally for a sequence of asynchronous operations.

Alternative Asynchronous Programming Methods

While Promises are a popular and powerful tool for asynchronous programming, it's worth mentioning other methods that developers might encounter or choose to use.

Async/Await Syntax

As we talked about in the previous section, async/await provides a syntactic sugar on top of promises, making asynchronous code appear more synchronous and readable.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

In this example, the async keyword is used to define an asynchronous function, and the await keyword is used to wait for the resolution of the fetch operation and the subsequent json conversion.

Web Workers

Web Workers are a different approach to handling concurrency in JavaScript. They allow you to run scripts in the background, separate from the main thread, to perform tasks without affecting the user interface's responsiveness.

While Web Workers don't directly replace promises, they provide an alternative way to achieve parallelism and handle computationally intensive tasks asynchronously.

// Inside a web worker script (worker.js)
self.addEventListener('message', (event) => {
  const data = event.data;
  const result = processData(data);
  self.postMessage(result);
});

// In the main script
const worker = new Worker('worker.js');

worker.addEventListener('message', (event) => {
  const result = event.data;
  console.log(result);
});

const dataToSend = [1, 2, 3, 4, 5];
worker.postMessage(dataToSend);

In this example, a Web Worker script (worker.js) processes data and sends the result back to the main script. Web Workers are a powerful tool for parallelizing tasks and offloading work from the main thread.

Conclusion

Promises offer a clean and organized way to handle asynchronous code in JavaScript, addressing issues such as callback hell and providing a more readable syntax for asynchronous operations.

By understanding the basics of promises, chaining them together, handling errors, and exploring advanced concepts, you can enhance your ability to write efficient and maintainable asynchronous JavaScript code.

While promises are widely adopted, it's essential to be aware of alternative approaches like async/await and Web Workers, as they may better suit specific use cases or preferences.

As you continue to explore and apply different asynchronous programming methods, you'll be better equipped to build responsive, user-friendly web applications.

Here's what we'll cover:

1. How a Promise Works
2. Callbacks vs Promises
3. When to Use Promises Instead of Callbacks
4. Promises and the Fetch API
5. The Promise.all() Method
6. The Promise.allSettled() Method
7. The Promise.any() Method
8. The Promise.race() Method
9. Conclusion

How a Promise Works

Basically, a Promise object represents a “pending state” in the most common sense: the promise will eventually be fulfilled at a later date.

To give you an illustration, suppose you want to buy a new phone to replace your old phone, so you open a messaging app to contact a phone store. This is similar to how you access a variable or a function that returns a promise:

Illustration 1: Sending a message to a store is like how you access a Promise object in JavaScript

After you send a message explaining what you want, you get an automated message saying that a representative will answer your message shortly. This is similar to receiving a Promise object:

Illustration 2: An automated message from the store you contacted before. This is the Promise object that you receive in JavaScript

A minute later, you get a new message from a human representative, saying that the phone model you want to buy is available for purchase. This is when the Promise was resolved:

Illustration 3: A store representative replied to your message. This is like when a Promise gets resolved

Or, in a completely different scenario, the representative tells you that the store doesn’t sell phones, because the store is a food store and not a phone store. This means the Promise was rejected:

Illustration 4: The representative replied that the store doesn't sell phones. This is like when a Promise gets rejected

This illustration shows how the Promise object in JavaScript works:

• A Promise is like the automated message that we saw earlier. It represents a pending state that must be fulfilled at some point later.
• The human representative saying that the phone model is available is similar to the resolve() method, which shows that the Promise is fulfilled.
• The representative telling you that you’re contacting the wrong store is like the reject() method, which is the method used to show that the Promise can’t be fulfilled because of an error.

A typical promise implementation looks like this:

let p = new Promise((resolve, reject) => {
  let isTrue = true;
  if (isTrue) {
    resolve('Promise resolved');
  } else {
    reject('Promise rejected');
  }
});

When creating a new Promise object, we need to pass a callback function that will be called immediately with two arguments: the resolve() and reject() functions.

Depending on the result of the Promise, either the resolve() or the reject() function will be called to end the pending state.

To handle the Promise object, you need to chain the function call with the then() and catch() functions as shown below:

let p = new Promise((resolve, reject) => {
  let isTrue = true;
  if (isTrue) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

p
.then(message => console.log(`Promise resolved: ${message}`))
.catch(message => console.log(`Promise rejected: ${message}`));

The resolve() function corresponds to the then() function, while reject() corresponds to the catch() function. You can change the isTrue value to false to test this.

Here’s an illustration of the promise process:

The Process happening inside a Promise. Depending on the code run inside the Promise, it will settle as resolved or rejected.

Using the promise pattern, you can call your functions sequentially by placing the next process inside the then() or catch() methods.

Callbacks vs Promises

The promise pattern was created to replace the use of callbacks in certain situations. By using promises, the code we write is more intuitive and maintainable.

Going back to the messaging illustration, let’s create an example of using callbacks to handle the situation.

First, we declare the two variables required for this situation, called isPhoneStore and isPhoneAvailable:

const isPhoneStore = true;
const isPhoneAvailable = true;

Next, we write a function that will process incoming messages. This function will mimic the promise pattern, and it will resolve only when isPhoneStore and isPhoneAvailable are true:

function processMessage(resolveCallback, rejectCallback) {
  if (!isPhoneStore) {
    rejectCallback({
      name: 'Wrong store',
      message: 'Sorry, this is a food store!',
    });
  } else if (!isPhoneAvailable) {
    rejectCallback({
      name: 'Out of stock',
      message: 'Sorry, the X phone is out of stock!',
    });
  } else {
    resolveCallback({
      name: 'OK',
      message: 'The X phone is available! How many you want to buy?',
    });
  }
}

Here, you can see that the function processMessage accepts two callback functions: resolveCallback and rejectCallback.

When we call the function, we need to provide the callback functions, similar to how we need to chain the then() and catch() methods when accessing a promise:

processMessage(
  value => console.log(value),
  reason => console.log(reason)
);

In the call to processMessage above, the first argument is the resolveCallback() function, and the second argument is the rejectCallback() function.

If you run the code above, then the resolveCallback() function will be called. You can change one of the two variables to false to trigger the rejectCallback() function.

Now that we have a working callback example, let’s rewrite the code using a promise as follows:

const isPhoneStore = true;
const isPhoneAvailable = true;

function processMessage() {
  return new Promise((resolve, reject) => {
    if (!isPhoneStore) {
      reject({
        name: 'Wrong store',
        message: 'Sorry, this is a food store!',
      });
    } else if (!isPhoneAvailable) {
      reject({
        name: 'Out of stock',
        message: 'Sorry, the X phone is out of stock!',
      });
    } else {
      resolve({
        name: 'OK',
        message: 'The X phone is available! How many you want to buy?',
      });
    }
  });
}

processMessage()
  .then(response => console.log(response))
  .catch(error => console.log(error));

Here, you can see that the processMessage() function returns a Promise object that gets resolved only when both isPhoneStore and isPhoneAvailable are true.

When one of the two variables is false, then the Promise object will be rejected.

Here you can see that you don’t need to add two extra parameters to the processMessage() function just for the callbacks. Also, when calling the function, you use the then() and catch() methods to handle the result of the promise.

The use of a promise makes the code easier to understand. Here’s the comparison of the two side by side:

Callbacks vs Promises code comparison

I don’t know about you, but I sure love writing and reading the promise pattern more than the callback pattern. 😉

When to Use Promises Instead of Callbacks

As I've mentioned before, the promise object is created to replace callback functions in certain situations.

And if you examine the code for the promise object above closely, you'll see that even promises use callbacks inside the then() and catch() methods. This means Promises don't eliminate the need for callbacks.

Promises are used when you need to wait for a certain task to finish before running the next process.

For example, suppose you have three functions that need to run sequentially from one to three.

Each function runs for a few seconds. We simulate this using the setTimeout() method:

function stepOne(value){
  setTimeout(() => {
    console.log(value);
  }, 3000);
}

function stepTwo(value){
  setTimeout(() => {
    console.log(value);
  }, 2000);
}

function stepThree(value){
  setTimeout(() => {
    console.log(value);
  }, 1000);
}

Using callbacks, you can define parameters on the stepOne() and stepTwo() functions, then call those functions sequentially like this:

function stepOne(value, callback) {
  setTimeout(() => {
    console.log(value);
    callback();
  }, 3000);
}

function stepTwo(value, callback) {
  setTimeout(() => {
    console.log(value);
    callback();
  }, 2000);
}

function stepThree(value, callback) {
  setTimeout(() => {
    console.log(value);
    callback();
  }, 1000);
}

// Run the functions sequentially with callbacks
stepOne(1, () => {
  stepTwo(2, () => {
    stepThree(3, () => {
      console.log("All steps completed.");
    });
  });
});

The nested callbacks where you pass the next function inside the previous function is famously known as the "callback hell". This code pattern is hard to read and it's messy.

With promises, you can rewrite the code above as follows:

function stepOne(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 3000);
  });
}

function stepTwo(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 2000);
  });
}

function stepThree(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 1000);
  });
}

// Run the functions sequentially with Promises
stepOne(1)
  .then(() => stepTwo(2))
  .then(() => stepThree(3))
  .then(() => {
    console.log("All steps completed.");
  });

Here, you can see that each function returns a promise that resolves when the timeout is finished. The function calls using then() methods maintain a clear order of steps.

In a real-world project where you have many lines of code inside the callback functions, using Promises provides a massive gain in your ability to read, extend, and maintain the code.

But if you're running code that doesn't have to wait for certain processes, then you can use callbacks just fine.

For example, the array methods like forEach() use callbacks, so there's no need for promises there:

const myArray = [1, 2, 3, 4];

myArray.forEach(value => console.log(value + 5));

Another use of promises is when you use the Fetch API, which is used to run network requests. Let's see how that works now.

Promises and the Fetch API

The Fetch API always returns a Promise object, so you need to handle it using the then() and catch() methods as shown below:

fetch('<Your API URL>')
  .then(response => console.log(response))
  .catch(error => console.log(error));

If you run a fetch() function and assign the result to a variable, the variable will contain a Promise object:

const response = fetch('<Your API URL>');
console.log(response); // Promise {<pending>}

As you can see, the Promise object is assigned to the response variable in a pending state. If you wait a while and then log the object again, the output will be fulfilled:

Promise {<fulfilled>: Response}

The Fetch API will return a Response object when the promise is fulfilled. This is also why I usually name the parameter inside the then() method as response . Feel free to name the response as message , value , or anything your team agreed on.

Now that you’ve learned how the Promise object works, it’s time to learn some extra methods related to this object.

The Promise.all() method

More than just replacing the callback pattern, JavaScript also provides some methods that you can use to work with Promise objects. For example, suppose you deal with three different promises in your project like this:

const p1 = Promise.resolve('Success');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Now, suppose you need all three promises to resolve before moving to the next step. Knowing what we know about promises, we can chain the promises using the then() method like this:

p1.then(message1 => {
  return p2.then(message2 => {
    return p3.then(message3 => {
      return [message1, message2, message3];
    });
  });
}).then(messages => {
  console.log(messages);
});

In this example, each then() method returns another promise, creating nested callbacks. When the p3 promise is resolved, the messages are returned as a single array.

The last then() method would then log the messages array returned by the promises. This approach works, but this is exactly the type of code we want to avoid when using promises.

Instead of using nested callbacks, we can use the Promise.all() method instead. See the example below:

const p1 = Promise.reject('Error From Promise One');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Promise.all([p1, p2, p3])
  .then(messages => console.log(messages))
  .catch(error => console.log(error));

The Promise.all() method accepts an array of promises, and when all promises are resolved, the method will pass the messages returned by the promises as an array and pass it to the then() method.

If one of the promises is rejected, then the method returns the first rejection it encounters and stops any further process.

This method enables you to work with many promises without having to create nested callbacks. You should use this method when you need all promises to resolve.

The Promise.allSettled() method

The Promise.allSettled() method is similar to the Promise.all() method, but instead of proceeding to catch() when one of the promises got rejected, the method will store the reject result and continue processing other promises.

When all promises are settled, the method will return an array of objects that contains the details of each promise. For example, suppose you run the following code:

const p1 = Promise.reject('Error From Promise One');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Promise.allSettled([p1, p2, p3]).then(response => {
  console.log(response);
});

Then the result would be:

[
  { status: 'rejected', reason: 'Error From Promise One' },
  { status: 'fulfilled', value: 200 },
  { status: 'fulfilled', value: 'Finished' }
]

As you can see, the response variable is an array of objects showing the status and the value or reason for that status. When calling this method, you don't need to chain the catch() method.

You should use this method when you always need to know the result of each promise.

The Promise.any() method

The Promise.any() method is similar to the Promise.all() method, except that it returns only a single value from any promise that calls the resolve() function first. If you try the method as follows:

const p1 = Promise.reject('Error From Promise One');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Promise.any([p1, p2, p3]).then(response => {
  console.log(response);
});

The output will be:

200

This is because the first promise is rejected, and once the second promise is resolved, the any() method stops any further execution of promises and returns the resolved value.

This method returns an error only when all promises are rejected. You should use this method only when you need to get a single promise resolved out of many promises.

The Promise.race() method

The Promise.race() method is like the Promise.any() method, with one difference: the promise is settled when any promise is resolved or rejected:

const p1 = Promise.reject('Error From Promise One');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Promise.race([p1, p2, p3])
  .then(response => console.log(response))
  .catch(reason => console.log(reason));

Since p1 returns a rejection, then the Promise.race() method returns the rejection instead of continuing the process:

Error From Promise One

You should use this method only when you need to get a single promise to settle, no matter if the result is resolved or rejected.

As you can see, these four methods of the Promise object provides you with a powerful composition tool that helps you decide how to handle multiple promises in your project.

Conclusion

And now you’ve learned how the Promise object works in JavaScript. A promise is easy to understand when you grasp the three states that can be generated by the promise: pending, resolved, and rejected.

You’ve also learned how promises can be used to replace callbacks, when to use promises instead of callbacks, and how to use promise methods when you need to handle many promises in your project.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

You write some promise-based code, everything is chugging along nicely, and then boom – one little promise rejects and the whole chain comes crashing down.

Your code grinds to a halt and you're left wondering why JavaScript couldn't just ignore that one little hiccup and continue on its merry way. Well, friend, do I have good news for you.

Meet Promise.allSettled(), your new best friend and the promise you never knew you needed. Promise.allSettled() is a game-changer, allowing you to wait for all your promises to settle – either resolve or reject – and then take action based on the results.

No more ruined promise chains or unhandled rejections. Just pure, unadulterated promise bliss. Join me as we dive into this little-known but incredibly useful promise method and see just how much it can simplify your asynchronous JavaScript code.

What Is Promise.allSettled()?

So you want to use JavaScript's Promise.allSettled() method, but aren't quite sure how it works or why you'd want to use it? No worries, I've got you covered.

Promise.allSettled() waits for all promises you give it to settle, meaning either resolve or reject. It then returns an array of objects with the status and value or reason for each promise.

This is useful when you have multiple asynchronous tasks that you want to ensure have completed, but don't necessarily care if some fail.

For example, say you have three API calls that return promises, and you want to get all the data back from the successful calls, even if one fails. You could do:

Promise.allSettled([apiCall1(), apiCall2(), apiCall3()]).then((results) => {});

This will run all three API calls, and the .then() callback will be called once they have all settled. The results array will have three objects: one for each promise, with either a status of 'fulfilled' and the data, or 'rejected' and the error.

We can filter to just get the successful calls, and proceed using that data.

The key things to remember are:

• Promise.allSettled() waits for all input promises to settle and returns their outcomes.
• Settled means either resolved (fulfilled) or rejected.
• It returns an array of objects with status and value/reason for each input promise.
• It allows handling successful promises even when some reject.

The problem with Promise.all() and the solution with Promise.allSettled()

Promise.all() is great when you want to wait for multiple promises to complete and get an array of all the resolved values. But it has one major downside: if any of the promises reject, the entire Promise.all() rejects immediately.

This can be problematic in some cases. For example, say you make requests to three different backend services, and you don't really care if one fails as long as the other two succeed. With Promise.all(), a single rejected promise would reject the entire group, and you'd miss the successful responses from the other promises.

Fortunately, there's a simple solution: Promise.allSettled(). This works similarly to Promise.all() but instead of rejecting immediately if any promise rejects, it waits for all promises to settle (either resolve or reject) and then returns an array of objects with the status and value/reason for each promise.

For example:

Promise.allSettled([
  Promise.resolve(1),
  Promise.reject(new Error("2")),
  Promise.resolve(3),
]).then((results) => {
  // results is an array of:
  // {status: "fulfilled", value: 1}
  // {status: "rejected", reason: Error}
  // {status: "fulfilled", value: 3}
});

As you can see, even though the second promise rejected, we still get the resolved values from the other promises. This allows you to handle rejections gracefully without missing any successful responses.

Promise.allSettled() provides more flexibility in these types of situations. You get the full picture of all your promises, regardless of some rejecting, so you have the opportunity to still make use of any resolved values and handle rejections appropriately.

So next time you need to wait on multiple promises but can't afford to miss any resolved values due to a rejection, be sure to reach for Promise.allSettled()! It's a very useful addition to the Promise API.

Common Questions About Promise.allSettled()

Will Promise.allSettled() slow down my code?

Not really. Promise.allSettled() simply waits for all the promises you pass to it to settle, either by fulfilling or rejecting. It doesn’t do anything else that would impact performance.

Can I still catch errors with Promise.allSettled()?

Yes, you absolutely can! Promise.allSettled() will give you the outcome of each promise, whether it was fulfilled or rejected.

For any rejected promises, you'll get the reason why it rejected, usually an error. You can catch these errors in the .catch() handler of the Promise.allSettled() call.

When should I use Promise.allSettled() vs Promise.all()?

Use Promise.allSettled() when you want to run multiple promises in parallel, but don’t want a single rejected promise to cause the entire group to reject.

For example, if you're fetching data from multiple third-party APIs, a rejected promise from one API shouldn’t stop you from getting data from the other APIs.

Use Promise.all() when you want to run promises in parallel but need them all to successfully complete for your code to continue.

For example, if you need to fetch data from two APIs to display on a page, you’d want both promises to fulfill before rendering the data.

Can I get the results of the settled promises?

Yes! Promise.allSettled() returns an array of objects with the status and value/reason for each promise. For example:

Promise.allSettled([
  Promise.resolve(1),
  Promise.reject(new Error("2")),
  Promise.resolve(3),
]).then((results) => {
  console.log(results);
  /*
    [
      { status: "fulfilled", value: 1 },
      { status: "rejected", reason: Error: 2 },
      { status: "fulfilled", value: 3 }
    ]
    */
});

You'll get information on all the promises, whether they fulfilled or rejected, so you have the full picture of the parallel operations.

Conclusion

So there you have it. Promise.allSettled() is a handy method you never knew you needed.

No longer do you have to wrap Promise.all() in a try/catch just to handle potential rejections. You can let Promise.allSettled() handle all that for you and just focus on the resolved values. Your async code will be cleaner and easier to read.

Thank you for reading. I am Rahul, 19, and a technical writer. Here is my proof of work.

JavaScript has the ability to carry out asynchronous (or async) instructions. These instructions run in the background until they have finished processing.

Asynchronous instructions do not stop the JavaScript engine from actively accepting and processing more instructions. This is why JavaScript is non-blocking in nature.

There are a few asynchronous features in JavaScript, and one of them is Promises. To work with promises, you must adopt a special syntax that makes writing async instructions a lot more organized. Working with promises is a very useful skill every JavaScript developer should learn.

This article is an in-depth guide to promises in JavaScript. You are going to learn why JavaScript has promises, what a promise is, and how to work with it. You are also going to learn how to use async/await—a feature derived from promises—and what a job queue is.

Here are the topics we will cover:

1. Why should you care about promises?
2. What is a promise?
3. How to create a promise in JavaScript
4. How to attach a callback to a promise
5. How to handle errors in a promise
6. How to handle many promises at once
7. What is the async/await syntax?
8. How to create an async function in JavaScript
9. How to use the await keyword
10. How to handle errors in async/await
11. What is a job queue?

This guide promises to be an interesting and insightful read. :) It is meant for anyone looking to be better at writing JavaScript async instructions, thereby properly utilizing what the language has to offer. With all that out of the way, let's get started.

Prerequisites

In order to follow along with the material and grasp it, here are a few things you should have:

• Basic Knowledge of JavaScript
• Knowledge of how JavaScript processes async operations

Knowing these topics will help you properly understand what you are about to learn. If you do not have the prerequisites, you can go learn them and return. The article will use some concepts from those topics here.

Why Should You Care about Promises?

Promises were not always part of JavaScript. Callbacks worked together with asynchronous functions to produce desired results in the past. A callback is any function that is a parameter of an async function, which the async function invokes to complete its operation.

To call an async function, you had to pass a callback as an argument like this:

function callback(result) {
  // Use the result from the Async operation
}

randomAsyncOperation((response) => callback(response));

But callbacks had a huge problem. Demonstrating the problem makes understanding it easier.

Assume you had an asynchronous function that fetched data somewhere on the internet. This function should accept two callbacks, successCallback and failureCallback.

The successCallback would run if the operation was successful and the program found the appropriate resource. But the failureCallback would run if the operation was unsuccessful and could not find the resource.

function SuccessCallback(result) {
  console.log("Resource found", result);
}

function failureCallback(error) {
  console.error("Ooops. Something went wrong", error);
}

To run the async function, you had to pass the two callback functions as arguments:

fetchResource(url, successCallback, failureCallback)

Here, url is a variable that represents the location of the resource.

This code will run smoothly for now. You've taken care of both possible scenarios the function could run into. You have a callback for a successful operation and a callback for a failed operation.

Now assume you want to perform many other fetch operations, but each operation must be successful for the next one to run. This is useful if the data you need must come in a certain order and cannot be scattered.

For example, you might run into this situation if the result of the next operation depends on the result of the previous one.

In this case, your success callbacks would have their own success callbacks, which is important because you need to use the results if they come in.

fetchResource(
  url,
  function (result) {
    // Do something with the result
    fetchResource(
      newUrl,
      function (result) {
        // Do something with the new result
        fetchResource(
          anotherUrl,
          function (result) {
            // Do something with the new result
          },
          failureCallback
        );
      },
      failureCallback
    );
  },
  failureCallback
);

From the example, you may notice a complication developing. You would have to keep nesting your success callbacks while repeating the failureCallback every time you call the async function.

These nested callbacks led to the ‘Callback Pyramid of Doom’ or callback hell, which can quickly become a nightmare. Could there be a more efficient way of handling situations like this?

JavaScript introduced Promises as part of ES6 (ES2015) to solve this problem. It simplified working with callbacks and made for better syntax as you'll see shortly. Promises are now the foundation for most modern asynchronous operations developers use in JavaScript today.

What is a Promise?

Image Credit: https://gifer.com

A promise is an assurance or guarantee that something will happen in the future. A person can promise another person a specific outcome or result. Promises are not limited to individuals, governments and organizations can also make promises. You have probably made a promise before.

With this assurance (promise) comes two possible outcomes–either fulfillment or failure. A promise is tied to an outcome that will show it is fulfilled. If that outcome does not happen, then the promise failed. A promise at the end must have one of these results.

In JavaScript, a Promise is an object that will produce a single value some time in the future. If the promise is successful, it will produce a resolved value, but if something goes wrong then it will produce a reason why the promise failed. The possible outcomes here are similar to that of promises in real life.

JavaScript promises can be in one of three possible states. These states indicate the progress of the promise. They are:

• pending: This is the default state of a defined promise
• fulfilled: This is the state of a successful promise
• rejected: This is the state of a failed promise

A promise goes from pending to fulfilled, or from pending to rejected—‘fulfilled’ and ‘rejected’ indicate the end of a promise.

From now on, this article will refer to a 'promise' as the JavaScript object.

How to Create a Promise in JavaScript

To create a promise, you need to create an instance object using the Promise constructor function. The Promise constructor function takes in one parameter. That parameter is a function that defines when to resolve the new promise, and optionally when to reject it.

const promise = new Promise((resolve, reject) => {
  // Condition to resolve or reject the promise
});

For example, assume you want a promise to resolve after a timeout of two seconds. You can achieve this by writing it into the parameter of the constructor function.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 2000);
});

In promises, resolve is a function with an optional parameter representing the resolved value. Also, reject is a function with an optional parameter representing the reason why the promise failed. In the example above, the resolved value of the promise is the string 'Done!'.

Here is yet another example showing how you can resolve or reject a promise based on the conditions you set. In this example, the outcome of the promise is based on a random number the program generates.

const promise = new Promise((resolve, reject) => {
  const num = Math.random();
  if (num >= 0.5) {
    resolve("Promise is fulfilled!");
  } else {
    reject("Promise failed!");
  }
});

From these examples, you can see that you have control over when to resolve or reject your promise and can tie it to a certain condition. With that, you have learned how to create a promise in JavaScript.

How to Attach a Callback to a Promise

To create a callback for a promise, you need to use the .then() method. This method takes in two callback functions. The first function runs if the promise is resolved, while the second function runs if the promise is rejected.

const promise = new Promise((resolve, reject) => {
  const num = Math.random();
  if (num >= 0.5) {
    resolve("Promise is fulfilled!");
  } else {
    reject("Promise failed!");
  }
});

function handleResolve(value) {
  console.log(value);
}

function handleReject(reason) {
  console.error(reason);
}

promise.then(handleResolve, handleReject);
// Promise is fulfilled!
// or
// Promise failed!

That is the way to handle the possible outcomes of your promise. Any unhandled errors in your promise will keep them in a rejected state at the end but handled errors makes the operation return a fulfilled promise.

It is possible to create an immediately resolved promise, and then attach a callback with the .then() method. You can also create an immediately rejected promise in the same way too.

Promise.resolve("Successful").then((result) => console.log(result));
// Successful

Promise.reject("Not successful").then((result) => console.log(result));
// Error: Uncaught (in promise)

The error in the rejected promise is because you need to define a separate callback to handle a rejected promise.

Promise.reject("Not successful").then(
  () => {
    /*Empty Callback if Promise is fulfilled*/
  },
  (reason) => console.error(reason)
);
// Not Successful

Now you have properly handled a rejected outcome.

Promises make it incredibly easy to chain asynchronous instructions. When you handle a promise with the .then() method, the operation always returns another promise. By employing this approach, you can eliminate the previously mentioned 'Callback Pyramid of Doom'.

Consider the code that previously caused the pyramid structure:

fetchResource(
  url,
  function (result) {
    // Do something with the result
    fetchResource(
      newUrl,
      function (result) {
        // Do something with the new result
        fetchResource(
          anotherUrl,
          function (result) {
            // Do something with the new result
          },
          failureCallback
        );
      },
      failureCallback
    );
  },
  failureCallback
);

However, because .then() returns another promise, this is how to write the same instructions above with promises:

fetchResource(url)
  .then(handleResult, failureCallback)
  .then(handleNewResult, failureCallback)
  .then(handleAnotherResult, failureCallback);

As you can see, calling promises does not require a nested syntax. You can even eliminate the repeated failureCallback to make the code a lot neater, which is something the upcoming section of the article will explore.

How to Handle Errors in a Promise

To handle errors in Promises, use the .catch() method. If anything goes wrong with any of your promises, this method can catch the reason for that error.

Promise.reject(new Error()).catch((reason) => console.error(reason));
// Error

This time in our example, the error output is no longer ‘uncaught’ because of .catch().

You can also use the .catch() method in a chain of promises. It catches the first error it encounters in the chain.

For instance, refactoring the chain of promises following the fetchResource() function from the example of the previous section. This how you can stop error callback repetition in your code.

fetchResource(url)
  .then(handleResult)
  .then(handleNewResult)
  .then(handleAnotherResult)
  .catch(failureCallback);

You can also use .catch() to check for errors in a group of promises before proceeding with further asynchronous operations.

fetchResource(url)
  .then(handleResult)
  .then(handleNewResult)
  .catch(failureCallback)
  // Check for Errors in the above group of promises before proceeding
  .then(handleAnotherResult);

The .catch() method addresses any errors in a promise without requiring the nesting of error callback functions.

To chain an asynchronous operation to a promise regardless of if the promise is resolved or not, use the .finally() method. The .then() method is how you handle the results of a promise writing individual conditions for both resolved and rejected. .catch() runs only when there is an error. But sometimes you might want an operation to run no matter what happens to earlier promises.

Using finally() helps prevent possible code repetition in .then() and .catch(). It is for operations you must run whether there is an error or not.

fetchResource(url)
  .then(handleResult)
  .then(handleNewResult)
  .finally(onFinallyHandle);

The finally() method has a few use cases in real-world applications. It is important if you want to perform cleanup operations for activities the promise initiated. Another use case—on Front-End Web Applications—is making user interface updates like stopping a loading spinner.

How to Handle Many Promises at Once

It is possible to run more than one promise at a time. All the examples you have seen so far are for promises that run one after the other.

In the previous examples, promises run similarly to synchronous code in the sense that they wait for the previous one to be resolved or rejected. But you could have multiple promises that run in parallel.

Here are the available methods that can help us achieve this:

• Promise.all()
• Promise.race()
• Promise.any()
• Promise.allSettled()

In this section of the article, we'll review these methods.

The Promise.all() method

Promise.all() accepts an array of promises as an argument but returns a single promise as the output. The single promise it returns resolves with an array of values if all the promises in the input array are fulfilled. The array Promise.all() resolves with will contain the resolve values of individual promises in the input array.

const promise1 = Promise.resolve(`First Promise's Value`);
const promise2 = new Promise((resolve) =>
  setTimeout(resolve, 3000, `Second Promise's Value`)
);
const promise3 = new Promise((resolve) =>
  setTimeout(resolve, 2000, `Third Promise's Value`)
);

Promise.all([promise1, promise2, promise3]);

// Output on the console

// *Promise {<fulfilled>: Array(3)}*

Promise.all([promise1, promise2, promise3]).then((values) => {
  values.forEach((value) => console.log(value));
});

// Output on the console

// First Promise's Value
// Second Promise's Value
// Third Promise's Value

If at least one promise in the input array does not resolve, Promise.all() will return a rejected promise with a reason. The reason for the rejection will be the same as that of the first rejected promise in the input array.

const promise1 = Promise.resolve(`First Promise's Value`);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 2000, `First reason for rejection`)
);
const promise3 = new Promise((resolve, reject) =>
  setTimeout(reject, 3000, `Second reason for rejection`)
);

Promise.all([promise1, promise2, promise3]);

// Output on the console

// *Promise {<rejected>: "First reason for rejection"}*

Promise.all() will run all the input promises before it returns a value. But it does not run the promises one after the other–instead it runs them at the same time.

This is why the total time it would take Promise.all() to return a value is roughly the time it would take the longest promise in the array to finish.

Despite that, it has to finish running all the promises before it returns anything.

The Promise.race() method

Promise.race() accepts an array of promises as an argument and returns a single promise as an output. The single promise it returns is the fastest promise to finish running—resolved or not. This means Promise.race() will return the promise with the shortest execution time in an array of promises.

const promise1 = new Promise((resolve) =>
  setTimeout(resolve, 3000, `First Promise's Value`)
);
const promise2 = new Promise((resolve) =>
  setTimeout(resolve, 2000, `Second Promise's Value`)
);
const promise3 = Promise.resolve(`Third Promise's Value`);

Promise.race([promise1, promise2, promise3]);

// Output on the console

// *Promise {<fulfilled>: "Third Promise's Value"}*

In the example above, because promise3 is a promise that resolves on being created, Promise.race() returns it as the fastest. Just like other Promise methods the article discusses in this section, it runs the promises in parallel and not one after the other.

If the promise with the shortest execution time happens to be rejected with a reason, Promise.race() returns a rejected promise and the reason why the fastest promise was rejected.

const promise1 = Promise.reject(`Reason for rejection`);
const promise2 = new Promise((resolve) =>
  setTimeout(resolve, 3000, `First resolved Promise`)
);
const promise3 = new Promise((resolve) =>
  setTimeout(resolve, 2000, `Second resolved Promise`)
);

Promise.race([promise1, promise2, promise3]);

// Output on the console

// *Promise {<rejected>: "Reason for rejection"}*

Promise.race() is useful for running a list of asynchronous operations but only needing the result of the fastest executed operation.

The Promise.any() method

Promise.any() accepts an array of Promises as an argument but returns a single Promise as the output. The single promise it returns is the first resolved promise in the input array. This method waits for any promise in the array to be resolved and would immediately return it as the output.

const promise1 = new Promise((resolve) =>
  setTimeout(resolve, 3000, `First Promise's Value`)
);
const promise2 = new Promise((resolve) =>
  setTimeout(resolve, 2000, `Second Promise's Value`)
);
const promise3 = Promise.reject(`Third Promise's Value`);

Promise.any([promise1, promise2, promise3]);

// Output on the console

// *Promise {<fulfilled>: "Second Promise's Value"}*

From the above example, promise1 will resolve after 3 seconds, promise2 will resolve after 2 seconds, and promise3 immediately rejects. Because Promise.any() is looking for the first successful promise, it returns promise2. promise1 is a little bit late and so it's left behind.

If none of the promises in the array are resolved, Promise.any() returns a rejected promise. This rejected promise contains a JavaScript array of reasons, where each reason corresponds with that of a promise from the input array.

const promise1 = new Promise((resolve, reject) =>
  setTimeout(reject, 3000, `First rejection reason`)
);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 2000, `Second rejection reason`)
);
const promise3 = Promise.reject(`Third rejection reason`);

Promise.any([promise1, promise2, promise3]);

// Output on the console

// *Promise {<rejected>: Aggregate Error: All Promises were rejected}*

Promise.any([promise1, promise2, promise3]).catch(({ errors }) =>
  console.log(errors)
);

// Output on the console

// *(3) ["First* rejection reason*", "Second* rejection reason*", "Third* rejection reason*"]*

This method is useful for asynchronous operations where the fastest successful promise is all you need. Promise.any() and Promise.race() are similar, except that Promise.any() will return the fastest promise to complete and be resolved, while Promise.race() will return the fastest promise to complete and does not care if it is resolved or not.

The Promise.allSettled() method

Promise.allSettled() became a feature of JavaScript promises with the release of ES2020. It handles promises in parallel just like the other promise methods the article discusses in this section.

Promise.allSettled() helps to write more efficient asynchronous code as it shows the outcome of all the promises in the array regardless of the status—resolved or rejected.

Promise.allSettled() accepts an array of promises as an argument and returns a single promise as the output.

The single promise it returns will always resolve or enter the state ‘fulfilled’ after all the input promises are settled. It does not care if any individual promise in the input array rejected. The array Promise.all() resolves with will contain the resolve values or rejection reasons of promises in the input array.

const promise1 = new Promise((resolve) =>
  setTimeout(resolve, 3000, `First Promise's Value`)
);
const promise2 = new Promise((resolve) =>
  setTimeout(resolve, 2000, `Second Promise's Value`)
);
const promise3 = Promise.reject(`Third Promise's Value`);

Promise.allSettled([promise1, promise2, promise3]);

// Output on the console

// *Promise {<fulfilled>: Array(3)}*

Promise.allSettled([promise1, promise2, promise3]).then(console.log);

// Output on the console

/*
(3) [{…}, {…}, {…}]
0: {status: 'fulfilled', value: "First Promise's Value"}
1: {status: 'fulfilled', value: "Second Promise's Value"}
2: {status: 'rejected', reason: "Third Promise's Value"}
*/

From the example above, you can see that even though promise3 rejects on creation, Promise.allSettled() still returned a ‘fulfilled’ promise. It does this even if all the promises in the input array reject.

Promise.allSettled() is similar to Promise.all() in that all their input promises must settle before the promise they return has a settled state—fulfilled or rejected.

The difference is Promise.all() can only be successful if all the promises in the input are resolved, while Promise.allSettled() does not care about the status of the input promises.

Using this method will give you an overview of how all your promises did, the ones that were resolved and the ones that were rejected. It gives complete information on all the promises you pass into it and allows you to examine them independently—the outcome of one does not affect the state of the promise the method returns.

What is the Async/Await Syntax?

Async/await syntax became a feature of JavaScript with the release of ES8(ES2017). It is built on top of promises, and you can see it as an alternative syntax to promises.

async/await eliminates the chaining that is common with the promises syntax, and ends up making asynchronous code look a lot more synchronous.

Promises are an excellent way to avoid the previously discussed ‘Callback Pyramid of Doom’, but async/await takes asynchronous code further. With async/await, code is easier to follow and maintain. It came about as a way to improve code readability for asynchronous operations. It is the modern way of using promises.

How to Create an Async Function in JavaScript

async is a JavaScript keyword used to create a function. The function this keyword helps create will always return a promise. To use it, place async before the function keyword when declaring the function.

async function example() {
    // Return a value
}

example()

// Output on the console

// *Promise {<fulfilled>: undefined}*

From the code example, you can see that the function returns a promise with a value undefined. This is because anything the async function returns will be the resolved value of the resulting promise. In this case, the function does not return anything, hence undefined.

async function example() {
  return "Feels good to be an async function";
}

example();

// Output on the console

// *Promise {<fulfilled>: "Feels good to be an async function"}*

In the above example, the function returns a string, which becomes the resolved value of the resulting promise. That is the way to create an async function.

How to Use the Await Keyword

To use the await keyword, place it before a promise. It is an indicator for the async function to pause execution until that promise is settled.

It is similar to the .then() method which makes sure a promise is ‘fulfilled’ or ‘rejected’ before it continues. Note that you can only use the await keyword inside an async function.

Instead of chaining promises with .then() as the article earlier teaches, you can repeatedly await the asynchronous operations making your code cleaner and easier to read.

const timerPromise = (message) =>
  new Promise((resolve) => setTimeout(resolve, 3000, message));

async function asyncFunc() {
  const result = await timerPromise("promise finished!");
  console.log(result);
}

// Output on the Console after 3 seconds

// promise finished!

Using the await keyword before a promise will produce the resolved value of that promise. It is evident from the line const result = await promise('promise finished!') where result becomes a string and not a new promise. This is different from .then() which always returns a new promise.

With await, you can break up any chain of promises, and grab their resolve values. The following example uses the fetch() function—which is a promise—to show eliminating chaining with async/await.

// With chaining
fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => response.json())
  .then((result) => console.log(result));

// Output on the console

// Array(10) [...]

// Without chaining
async function fetchResource(url) {
  const response = await fetch(url);
  const result = await response.json();
  console.log(result);
}
fetchResource("https://jsonplaceholder.typicode.com/users");

// Output on the console

// Array(10) [...]

In the end, it boils down to preference and choice. If you prefer the chaining syntax, then go for it. If you prefer your code to look synchronous and want to use async/await, then that is fine too.

You can also use both syntaxes together, chaining promises inside an async function. It all depends on what you want to achieve and the style you prefer.

How to Handle Errors in Async/Await

Just like with the normal promise syntax, you can catch errors properly using async/await. Properly handling errors in async calls is extremely important to track bugs. Use try/catch blocks to do this.

try is a JavaScript keyword that wraps a block of code. As that block of code runs, try checks for errors. No error can escape a try block. Use try inside an async function.

The first error inside the try block stops the other instructions in that block from executing, try then passes the error value to the catch block. The catch block is similar to .catch() in promises. Just like the promise method, it is a function of an error.

async function fetchResource(url) {
  try {
    const response = await fetch(url);
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

In this example, the catch keyword has an error, which logs to the console. A settled promise with an uncaught error results in a rejected promise. Make sure you wrap your code in try/catch blocks to have more control over failures and faults in your program.

Also, just like the .finally() method for promises, you can use a finally block inside an async function. Braces that follow this keyword wrap around a block of code that would run regardless of if there is an error or not.

async function fetchResource(url) {
  try {
    const response = await fetch(url);
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error(error);
  } finally {
    console.log("Operation finished!");
  }
}

The use of the finally block is similar to the use of the .finally() method. This just proves that using an async function is a recent way to work with promises.

What is a Job Queue?

The Job Queue—also known as the Microtask Queue—is an important concept to be aware of in JavaScript. It was not originally a component of the JavaScript runtime, but the need for it came when promises became a part of JavaScript.

Consider the following code sample:

Promise.resolve("This is a resolved value").then(console.log);
setTimeout(console.log, 0, "This is a value after the timeout");
console.log("This is a normal log");

Here the first line is a promise that automatically resolves, then logs the value on the console. The second line is a timeout set to 0 milliseconds which means it is supposed to be instant. The timeout takes in a callback function that logs a value to the console. The third line is a normal console log.

When you run the program, can you guess the order in which these logs would appear? Let's find out.

// Output on the console
/*
This is a normal log
This is a resolved value
--
undefined
--
This is a value after the timeout
*/

This is an interesting output. The first log is from console.log. It is not so confusing because console.log() is not an async operation. The JavaScript engine will actively run every synchronous instruction immediately after the program starts.

The second line might be a little puzzling. It logs the resolved value of the promise. Why does the output from the promise come next? Well, the simple answer is that a promise is faster than any other async implementation in JavaScript. But that is not the full story.

In the JavaScript runtime, the event loop handles async operations. It can only call the callback functions of async instructions when the call stack is empty. Resolving a promise is an asynchronous operation, and it is understandable that it comes after a normal log. But why does it come before the setTimeout() instruction?

The JavaScript Runtime actually has these two queues—the Callback (or Macrotask) Queue and the Job (or Microtask) Queue. Shortly before the event loop starts calling the functions in the Callback Queue, it calls all the instructions on the Job Queue. The callback of a promise stays in the Job Queue so the event loop calls it first. This is why promises return values faster than any other async implementation.

The Job Queue is useful for some other instructions apart from promises. However, that is beyond the scope of this material. If you are curious, then you can read more about the Job Queue here.

A program returns immediately after taking care of the Job Queue. From the above code example, it returns with undefined. After that, the event loop moves over to the Callback Queue and executes the instructions there.

Image Credit: [Medium](https://medium.com/@saravanaeswari22/microtasks-and-macro-tasks-in-event-loop-7b408b2949e0">Saravanakumar on <a href="https://medium.com)

The callback in setTimeout()will always move to the Callback Queue no matter how short the timer is. In the example, it logged last even though the timer was set to 0 milliseconds.

With that, I hope you understand why the example code produced that output, and the difference between the Callback Queue and the Microtask Queue.

Conclusion

This has been a deep dive into promises and async operations. In this article, you have learned how promises came about in JavaScript, what they are, and how to create them.

You have also learned how to attach callbacks to a promise, how to catch errors in a promise, and how to run many promises simultaneously.

We also looked into the async/await syntax which is built on top of promises. You learned when they became a feature of JavaScript, how to create an async function, and how to use the await keyword.

You also learned how to handle errors using the syntax. Finally, the article explained what a Job Queue is.

Feel free to come back if you did not understand everything at once. JavaScript promises can take time to learn and master, but any JavaScript developer would benefit immensely from knowing how promises work. It gives you more control while writing professional async code for your applications.

Good luck building your next project.

PS: Follow me on Twitter and LinkedIn.

You typically use a promise to manage situations where you must wait for the outcome of an operation. For example, uploading files to the server and awaiting the response of an API call, or just asking the user to choose a file from their computer.

You will learn about JavaScript promises in this article by building a real-world example app like the one below:

What is a Promise?

A promise is simply a function that returns an Object which you can attach callbacks to.

The callbacks attached to a promise object will only get called when the operation completes. The callbacks will have to wait until the operation is fulfilled or rejected:

fetch(`some_api_url`).then((response) => {
  // Everything here will wait the fetch operation to complete
});

Before a promise finally settles (the promise either fulfills or gets rejected) it has to go through different states:

When a promise is created the initial state is pending. Then depending on the output of the operation the promise either gets fulfilled or rejected.

From the table above you can easily see the callback that will get called depending on each state of the Promise:

fetch(`some_api_url`).then((response) => {
  // This will get called when the promise fulfills
}).catch((error) => {
  // This will get called when the promise is rejected
}).finally(() => {
  // This will get called all the time
})

How to Use Promises in JavaScript

Now that you have learned what a promise it, let's demonstrate how you can use promises in JavaScript by building the movie search app we saw earlier.

A basic movie search app should have an input field where users can search for their favorite movies. It should also have a UI to display some basic info about the movie they searched for.

Let's get started by creating the HTML.

How to write the HTML

For the sake of this tutorial and to display live examples, I am going to be using Codepen, but you can use your favorite code editor.

Create an index.html file and add the following code:

  <div class="wrapper">
      <header class="header">
        <div class="header_logo">Movie</div>
        <div class="header_actions">
          <form onsubmit="handle_form(event)" id="header_form">
            <div class="header_form-icon">
            <input type="search" class="header_form-input" placeholder="Search, Press Enter to Submit" />
            <svg class="icon" width="22px" height="22px"><use href="#icon-search" /></svg>
          </div>
          </form>
          <img id="img_icon" width="32px" height="32px" src="" alt="" >
        </div>
      </header>
      <main id="main">
        <section>
          <article class="movie">
            <div class="movie_img">
              <img id="img_src" src="" alt="" srcset="">
            </div>
            <div class="movie_info">
              <header><h1 class="movie_title"></h1></header>
              <div class="movie_desc"></div>
              <div class="movie_details">
                <h2>Details</h2>
                <ul class="flex">
                  <li>Premiered: <span id="movie_date"></span></li>
                  <li>Rating: <span id="movie_rating"></span></li>
                  <li>Runtime: <span id="movie_runtime"></span></li>
                  <li>Status: <span id="movie_status"></span></li>
                </ul>
              </div>
              <a href="" class="btn" target="_blank" rel="noopener noreferrer">
            <svg class="icon" width="16px" height="16px"><use href="#icon-play" /></svg>
                Watch Movie</a>
            </div>
          </article>
          <div class="episodes_list">
            <h3 class="episodes_title"></h3>
          <ol class="episodes" id="episodes"></ol>
        </div>
        </section>
      </main>
    </div>

Above we just created the skeleton of our movie app. So now let's breath some life into it with some CSS:

How to fetch a movie

To fetch our movie, we are going to use the TVMAZE API. Create the main.js file and add the following code:

const get_movie = (value = "Game of thrones") => {
   fetch(
    `https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`
  ).then((response) => create_UI(response.json()));
};

We created a function get_movie(value = "Game of thrones") that uses the JavaScript fetch API. We use it to make a GET request to our movie API endpoint.

The fetch API returns a promise. To use the response from the API we attach the .then() callback in which we pass the response.json() into a new function create_UI(). Let's go ahead and create the create_UI function:

const create_UI = (data) => {
  const movie_img = document.querySelector("#img_src");
  const movie_icon = document.querySelector("#img_icon");
  const movie_title = document.querySelector(".movie_title");
  const movie_desc = document.querySelector(".movie_desc");
  const movie_link = document.querySelector(".btn");
  const movie_date = document.querySelector("#movie_date");
  const movie_rating = document.querySelector("#movie_rating");
  const movie_runtime = document.querySelector("#movie_runtime");
  const movie_status = document.querySelector("#movie_status");

  // set the UI
  movie_icon.src = data.image.medium;
  movie_img.src = data.image.original;
  movie_title.textContent = data.name;
  movie_desc.innerHTML = data.summary;
  movie_link.href = data.officialSite;
  movie_date.textContent = data.premiered;
  movie_rating.textContent = data.rating.average;
  movie_runtime.textContent = data.runtime;
  movie_status.textContent = data.status;
};

The above function, as the name implies, helps us create the UI for our movie app. But of course we still need a way to collect the movie name from the users, so let's fix that.

The first thing we need to do is to add an onsubmit event handler to our HTML form:

<form onsubmit="search(event)" id="header_form">
  <input type="search" class="header_form-input" placeholder="Search, Press Enter to Submit" />
//
</form>

Now in our main.js file we can handle what happens when we submit the form:

// handle form submit
const search = (event) => {
  event.preventDefault();
  const value = document.querySelector(".header_form-input").value;

  get_movie(value);
};

Anytime the user submits the form we get the value they entered in the search box and we pass it to the get_movie(value = "Game of thrones") function we created earlier.

Promise Chaining

Unlike what we have been seeing in our previous examples, the .then() callback is not really the end. That's because when you return value of a promise you get another promise. This becomes very useful when you want to run a series of asynchronous operations in order.

For example, our movie API doesn't just return info about a movie, it also returns information about all the episodes. Let's say that we really don't want to display all the episodes in Game of Thrones, we only want the first four (4) episodes.

With promise chaining we can easily achieve this:

const get_movie = (value = "Game of thrones") => {
  fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)
    .then((response) => response.json())
    .then((data) => {
      if (data._embedded.episodes.length > 0) {
        const new_data = data._embedded.episodes.slice(0, 4);

        create_UI(data);
        return create_episodesUI(new_data);
      } else {
        return create_UI(data);
      }
    });
};

This is still our get_movie() function, but this time instead of passing the data to the create_UI function we return the response .then((response) => response.json()). This creates a new promise, which we can attach more callbacks to.

Ideally this chain can keep going on and on for as long as you want. Remember all you have to do is to return the value of the promise.

How to Handle Errors in Promises

Errors that happen within a promise go immediately to the .catch() callback:

fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)
    .then((response) => response.json())
    .then((data) => {
      // any error here will trigger the .catch() callback
    }).catch((error) => {
    // all errors are caught and handled here
    })

The .catch() callback is short for .then(null, (error) => {}). You could also write the above as:

fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)
    .then((response) => response.json())
    .then((data) => {
      // any error here will trigger the .catch() callback
    }, (error) => {
    // all errors are caught and handled here
    })

With our movie search app, for example, when we encounter any errors we can handle and display a nice error message to users in the .catch() callback:

const get_movie = (value = "Game of thrones") => {
  fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)
    .then((response) => response.json())
    .then((data) => {
      if (data._embedded.episodes.length > 0) {
        const new_data = data._embedded.episodes.slice(0, 4);

        create_UI(data);
        return create_episodesUI(new_data);
      } else {
        return create_UI(data);
      }
    })
    .catch((error) => {
      console.log(error.message);
      // Challange: display your error here
    });
};

Now if for any reason we get an error, the .catch() callback is called and we display the correct error to the user.

How to Create Promises in JavaScript

Now that we have learned what promises are and how to use them, let's see how we can create a promise in JavaScript.

To create a promise in JavaScript, you use the promise constructor. The constructor takes one argument: a function with two parameters, resolve and reject:

const is_true = true
const new_promise = new Promise((resolve,reject) => {
  if(is_true) {
    // everything went fine
    resolve()
  } else {
    // Oops there was an error
    reject()
  }
})

Then we can go ahead and use our new_promise by attaching the callbacks:

new_promise
  .then((response) => {
    // everything went fine
  })
  .catch((error) => {
    // handle errors
  });

Conclusion

In this tutorial, we learnt about promises, what they are, and how to use them by building a movie search app. The entire code and live preview of our movie app can be found on Codepen: Movie Search App.

Challenge

While creating our movie app, I left out some parts which I think would be great for you to practice your new Promise skills:

1. Our movie app looks frozen when we are waiting for the API response. You can try adding a loader to tell the user that the promise is pending.

2. We currently just use console.log(error) to log out errors. But we don't want that, so you can figure out how to display all errors to users in a friendly way.

If you created something wonderful with this, please feel free to tweet about it and tag me @sprucekhalifa. And don't forget to hit the follow button.

Happy coding!

A promise is an object in JavaScript that will produce a value sometime in the future. This usually applies to asynchronous operations.

In applications, asynchronous operations happen a lot. This can be API requests, delayed data processing, and much more.

Instead of having to block code execution until the data loads, you can define them as promises, so that code execution continues with other parts of the code. And when the promises complete, you can use the data in them.

You can learn more about promises in this simplified article.

In some cases a promise passes, and in other cases it fails. How do you handle the result from each outcome?

For the rest of this article, we will understand the then, catch and finally methods of promises.

The states of promises in JavaScript

A promise has three states:

• pending: the promise is still in the works
• fulfilled: the promise resolves successfully and returns a value
• rejected: the promise fails with an error

The fulfilled and rejected states have one thing in common: whether a promise is fulfilled or rejected, the promise is settled. So a settled state could either be a fulfilled or a rejected promise.

When a promise is fulfilled

When a promise is fulfilled, you can access the resolved data in the then method of the promise:

promise.then(value => {
 // use value for something
})

Think of the then method as "this works and then do this with the data returned from the promise". If there is no data, you can skip the then method.

It's also possible that the then method can return another promise, so you can chain another then method like this:

promise
  .then(value => {
    return value.anotherPromise()
  })
  .then(anotherValue => {
    // use this value
  })

When a promise is rejected

When a promise is rejected (that is, the promise fails), you can access the error information returned in the catch method of the promise:

promise.catch(error => {
  // interpret error and maybe display something on the UI
})

Promises can fail for different reasons. For API requests, it can be a failed network connection, or a returned error from the server. Such promises will be rejected if they get errors.

Think of the catch method as "this does not work so I catch the error so that it does not break the application". If you do not catch the error, this can break your application in some cases.

When a promise settles

There's a last stage of the promise. Whether the promise is fulfilled or is rejected, the promise has been completed (has been settled). At this completed stage, you can finally do something.

The finally method of promises is useful when you want to do something after the promise has settled. This can be cleanup or code you may want to duplicate in the then and catch methods.

For example, instead of doing:

let dataIsLoading = true;

promise
  .then(data => {
    // do something with data
    dataIsLoading = false;
  })
  .catch(error => {
   // do something with error
   dataIsLoading = false;
  })

You can use the finally method like this:

let dataIsLoading = true;

promise
  .then(data => {
    // do something with data
  })
  .catch(error => {
   // do something with error
  })
  .finally(() => {
    dataIsLoading = false;
  })

The finally method is called regardless of the outcome (fulfilled or rejected) of the promise.

Wrap up

Promises have the then, catch and finally methods for doing different things depending on the outcome of a promise. In summary:

• then: when a promise is successful, you can then use the resolved data
• catch: when a promise fails, you catch the error, and do something with the error information
• finally: when a promise settles (fails or passes), you can finally do something

JavaScript is a single-threaded, non-blocking, asynchronous, concurrent programming language with lots of flexibility.

Hold on a second – did it say single-threaded and asynchronous at the same time? If you understand what single-threaded means, you'll likely mostly associate it with synchronous operations. How can JavaScript be asynchronous, then?

In this article, we will learn all about the synchronous and asynchronous parts of JavaScript. You use both in web programming almost daily.

If you like to learn from video content as well, this article is also available as a video tutorial here: 🙂

In this article, You'll Learn:

• How JavaScript is synchronous.
• How asynchronous operations occur when JavaScript is single-threaded.
• How understanding synchronous vs. asynchronous helps you better understand JavaScript promises.
• Lots of simple but powerful examples to cover these concepts in detail.

JavaScript Functions are First-Class Citizens

In JavaScript, you can create and modify a function, use it as an argument, return it from another function, and assign it to a variable. All these abilities allow us to use functions everywhere to place a bunch of code logically.

Lines of code organized into functions logically

We need to tell the JavaScript engine to execute functions by invoking them. It'll look like this:

// Define a function
function f1() {
    // Do something
    // Do something again
    // Again
    // So on...
}

// Invoke the function
f1();

By default, every line in a function executes sequentially, one line at a time. The same is applicable even when you invoke multiple functions in your code. Again, line by line.

Synchronous JavaScript – How the Function Execution Stack Works

So what happens when you define a function and then invoke it? The JavaScript engine maintains a stack data structure called function execution stack. The purpose of the stack is to track the current function in execution. It does the following:

• When the JavaScript engine invokes a function, it adds it to the stack, and the execution starts.
• If the currently executed function calls another function, the engine adds the second function to the stack and starts executing it.
• Once it finishes executing the second function, the engine takes it out from the stack.
• The control goes back to resume the execution of the first function from the point it left it last time.
• Once the execution of the first function is over, the engine takes it out of the stack.
• Continue the same way until there is nothing to put into the stack.

The function execution stack is also known as the Call Stack.

Function Execution Stack

Let's look at an example of three functions that execute one by one:

function f1() {
  // some code
}
function f2() {
  // some code
}
function f3() {
  // some code
}

// Invoke the functions one by one
f1();
f2();
f3();

Now let's see what happens with the function execution stack:

A step-by-step flow shows the execution order

Did you see what happened there? First, f1() goes into the stack, executes, and pops out. Then f2() does the same, and finally f3(). After that, the stack is empty, with nothing else to execute.

Ok, let's now work through a more complex example. Here is a function f3() that invokes another function f2() that in turn invokes another function f1().

function f1() {
  // Some code
}
function f2() {
  f1();
}
function f3() {
  f2();
}
f3();

Let's see what's going on with the function execution stack:

A step-by-step flow shows the execution order

Notice that first f3() gets into the stack, invoking another function, f2(). So now f2() gets inside while f3() remains in the stack. The f2() function invokes f1(). So, time for f1() to go inside the stack with both f2() and f3() remaining inside.

First, f1() finishes executing and comes out of the stack. Right after that f2() finishes, and finally f3().

The bottom line is that everything that happens inside the function execution stack is sequential. This is the Synchronous part of JavaScript. JavaScript's main thread makes sure that it takes care of everything in the stack before it starts looking into anything elsewhere.

Great! Now that we understand how synchronous operations work in JavaScript, let's now flip the coin and see its asynchronous side. Are you ready?

Asynchronous JavaScript – How Browser APIs and Promises Work

The word asynchronous means not occurring at the same time. What does it mean in the context of JavaScript?

Typically, executing things in sequence works well. But you may sometimes need to fetch data from the server or execute a function with a delay, something you do not anticipate occurring NOW. So, you want the code to execute asynchronously.

In these circumstances, you may not want the JavaScript engine to halt the execution of the other sequential code. So, the JavaScript engine needs to manage things a bit more efficiently in this case.

We can classify most asynchronous JavaScript operations with two primary triggers:

1. Browser API/Web API events or functions. These include methods like setTimeout, or event handlers like click, mouse over, scroll, and many more.
2. Promises. A unique JavaScript object that allows us to perform asynchronous operations.

Don't worry if you are new to promises. You do not need to know more than this to follow this article. At the end of the article, I have provided some links so you can start learning promises in the most beginner-friendly way.

How to Handle Browser APIs/Web APIs

Browser APIs like setTimeout and event handlers rely on callback functions. A callback function executes when an asynchronous operation completes. Here is an example of how a setTimeout function works:

function printMe() {
  console.log('print me');
}

setTimeout(printMe, 2000);

The setTimeout function executes a function after a certain amount of time has elapsed. In the code above, the text print me logs into the console after a delay of 2 seconds.

Now assume we have a few more lines of code right after the setTimeout function like this:

function printMe() {
  console.log('print me');
}

function test() {
  console.log('test');
}

setTimeout(printMe, 2000);
test();

So, what do we expect to happen here? What do you think the output will be?

Will the JavaScript engine wait for 2 seconds to go to the invocation of the test() function and output this:

printMe
test

Or will it manage to keep the callback function of setTimeout aside and continue its other executions? So the output could be this, perhaps:

test
printMe

If you guessed the latter, you're right. That's where the asynchronous mechanism kicks in.

How the JavaScript Callback Queue Works (aka Task Queue)

JavaScript maintains a queue of callback functions. It is called a callback queue or task queue. A queue data structure is First-In-First-Out(FIFO). So, the callback function that first gets into the queue has the opportunity to go out first. But the question is:

• When does the JavaScript engine put it in the queue?
• When does the JavaScript engine take it out of the queue?
• Where does it go when it comes out of the queue?
• Most importantly, how do all these things relate to the asynchronous part of JavaScript?

Whoa, lots of questions! Let's figure out the answers with the help of the following image:

The above image shows the regular call stack we have seen already. There are two additional sections to track if a browser API (like setTimeout) kicks in and queues the callback function from that API.

The JavaScript engine keeps executing the functions in the call stack. As it doesn't put the callback function straight into the stack, there is no question of any code waiting for/blocking execution in the stack.

The engine creates a loop to look into the queue periodically to find what it needs to pull from there. It pulls a callback function from the queue to the call stack when the stack is empty. Now the callback function executes generally as any other function in the stack. The loop continues. This loop is famously known as the Event Loop.

So, the moral of the story is:

• When a Browser API occurs, park the callback functions in a queue.
• Keep executing code as usual in the stack.
• The event loop checks if there is a callback function in the queue.
• If so, pull the callback function from the queue to the stack and execute.
• Continue the loop.

Alright, let's see how it works with the code below:

function f1() {
    console.log('f1');
}

function f2() {
    console.log('f2');
}

function main() {
    console.log('main');

    setTimeout(f1, 0);

    f2();
}

main();

The code executes a setTimeout function with a callback function f1(). Note that we have given zero delays to it. This means that we expect the function f1() to execute immediately. Right after setTimeout, we execute another function, f2().

So, what do you think the output will be? Here it is:

main
f2
f1

But, you may think that f1 should print before f2 as we do not delay f1 to execute. But no, that's not the case. Remember the event loop mechanism we discussed above? Now, let's see it in a step-by-step flow for the above code.

Event loop - see the step-by-step execution

Here are steps written out:

1. The main() function gets inside the call stack.
2. It has a console log to print the word main. The console.log('main') executes and goes out of the stack.
3. The setTimeout browser API takes place.
4. The callback function puts it into the callback queue.
5. In the stack, execution occurs as usual, so f2() gets into the stack. The console log of f2() executes. Both go out of the stack.
6. The main() also pops out of the stack.
7. The event loop recognizes that the call stack is empty, and there is a callback function in the queue.
8. The callback function f1() then goes into the stack. Execution starts. The console log executes, and f1() also comes out of the stack.
9. At this point, nothing else is in the stack and queue to execute further.

I hope it's now clear to you how the asynchronous part of JavaScript works internally. But, that's not all. We have to look at promises.

How the JavaScript Engine Handles Promises

In JavaScript, promises are special objects that help you perform asynchronous operations.

You can create a promise using the Promise constructor. You need to pass an executor function to it. In the executor function, you define what you want to do when a promise returns successfully or when it throws an error. You can do that by calling the resolve and reject methods, respectively.

Here is an example of a promise in JavaScript:

const promise = new Promise((resolve, reject) =>
        resolve('I am a resolved promise');
);

After the promise is executed, we can handle the result using the .then() method and any errors with the .catch() method.

promise.then(result => console.log(result))

You use promises every time you use the fetch() method to get some data from a store.

The point here is that JavaScript engine doesn't use the same callback queue we have seen earlier for browser APIs. It uses another special queue called the Job Queue.

What is the Job Queue in JavaScript?

Every time a promise occurs in the code, the executor function gets into the job queue. The event loop works, as usual, to look into the queues but gives priority to the job queue items over the callback queue items when the stack is free.

The item in the callback queue is called a macro task, whereas the item in the job queue is called a micro task.

So the entire flow goes like this:

• For each loop of the event loop, one task is completed out of the callback queue.
• Once that task is complete, the event loop visits the job queue. It completes all the micro tasks in the job queue before it looks into the next thing.
• If both the queues got entries at the same point in time, the job queue gets preference over the callback queue.

The image below shows the inclusion of the job queue along with other preexisting items.

Now, let's look at an example to understand this sequence better:

function f1() {
    console.log('f1');
}

function f2() {
    console.log('f2');
}

function main() {
    console.log('main');

    setTimeout(f1, 0);

    new Promise((resolve, reject) =>
        resolve('I am a promise')
    ).then(resolve => console.log(resolve))

    f2();
}

main();

In the above code, we have a setTimeout() function as before, but we have introduced a promise right after it. Now remember all that we have learned and guess the output.

If your answer matches this, you are correct:

main
f2
I am a promise
f1

Now let's see the flow of actions:

Callback queue vs. Job queue

The flow is almost the same as above, but it is crucial to notice how the items from the job queue prioritize the items from the task queue. Also note that it doesn't even matter if the setTimeout has zero delay. It is always about the job queue that comes before the callback queue.

Alright, we have learned everything we need to understand synchronous and asynchronous execution in JavaScript.

Here is a Quiz for You!

Let's test your understanding by taking a quiz. Guess the output of the following code and apply all the knowledge we have gained so far:

function f1() {
 console.log('f1');
}

function f2() { 
    console.log('f2');
}

function f3() { 
    console.log('f3');
}

function main() {
  console.log('main');

  setTimeout(f1, 50);
  setTimeout(f3, 30);

  new Promise((resolve, reject) =>
    resolve('I am a Promise, right after f1 and f3! Really?')
  ).then(resolve => console.log(resolve));

  new Promise((resolve, reject) =>
    resolve('I am a Promise after Promise!')
  ).then(resolve => console.log(resolve));

  f2();
}

main();

Here is the expected output:

main
f2
I am a Promise, right after f1 and f3! Really?
I am a Promise after Promise!
f3
f1

Do you want more such quizzes? Head over to this repository to practice more exercises.

In case you are stuck or need any clarifications, my DM is always open on Twitter.

In Summary

To summarize:

• The JavaScript engine uses the stack data structure to keep track of currently executed functions. The stack is called the function execution stack.
• The function execution stack (aka call stack) executes the functions sequentially, line-by-line, one-by-one.
• The browser/web APIs use callback functions to complete the tasks when an asynchronous operation/delay is done. The callback function is placed in the callback queue.
• The promise executor functions are placed in the job queue.
• For each loop of the event loop, one macro task is completed out of the callback queue.
• Once that task is complete, the event loop visits the job queue. It completes all the micro-tasks in the job queue before it looks for the next thing.
• If both the queues get entries at the same point in time, the job queue gets preference over the callback queue.

Before We End...

That's all for now. I hope you've found this article insightful, and that it helps you understand JavaScript's synchronous vs asynchronous concepts better.

Let's connect. You can follow me on Twitter(@tapasadhikary), My Youtube channel, and GitHub(atapas).

As promised before, here are a few articles you may find useful,

• JavaScript Promises - Explain Like I'm Five
• JavaScript Promise Chain - The art of handling promises
• JavaScript async and await - in plain English, please
• Introducing PromiViz - visualize and learn JavaScript promise APIs

I recently published this as a thread on Twitter and was blown away by the responses. So I decided to expand this into an introductory tutorial on JavaScript promises.

I have read a lot of articles on promises and the problem is that many of these guides don't explain them in a relatable way. People don't understand what a promise is in JavaScript is because they don't really know what it is about and how it behaves in simple and relatable terms.

So in this article, I will be telling you a short story which explains what promises are and how exactly they work. I will also show you how to use promises in your JavaScript with some examples.

What is a Promise in JavaScript?

Imagine that you are interviewing job seekers for a position at your company.

A young man frantically comes in for an interview. When his interview session is about to begin, he realizes that he has forgotten his résumé.

Bummer, right?

He's not daunted, though. Luckily for him, he has a roommate who was still at home at that time.

He quickly calls his roommate over the phone and asks him for help. He pleads with his roommate to help find his résumé. His roommate PROMISES to text back as soon as he has something to report.

Assuming the résumé is eventually found, he can text back:

“Successful, I found your resume!”

But if he doesn't find it, he is supposed to text back a failure message with the reason why he couldn't find the résumé. For example, he may text this message over to his friend who's interviewing:

“Sorry, I couldn’t find your résumé because the key to your safe is missing.”

In the meantime, the interview continues as planned, and the interviewer holds on to the promise of finding the résumé, and not the actual résumé. At that time, the interviewer sets the status of the résumé delivery to PENDING.

The interviewee answers all the questions he is asked. But ultimately, his employment still depends on the FINAL STATUS of his résumé.

His roommate finally texts back. As we discussed before, if he didn't find the résumé, he will share this failure with you along with the reason why he didn't find it.

When that happens, the interview will end and the interviewee will be rejected.

On the other hand, if the roommate finds the résumé, he will happily tell his friend that he was successful, and he will go ahead and FULFILL his hopes of getting a job.

So How Does This Translate to JS Code?

The roommate promising to find the résumé and texting back is synonymous with how we define a promise in JavaScript. The code does not directly or immediately return a value. Instead, it returns a promise that it will eventually provide the value at a later time.

A promise in JavaScript is asynchronous, meaning it takes time to resolve or finish. Just as the search for the applicant's resume takes time to complete.

For that reason, the interviewer decides not to sit around doing nothing, so they begin interviewing the candidate based on the promise of a résumé delivery. We're using the promise of returning a résumé in place of an actual resume.

The JS engine also doesn’t wait around doing nothing – it starts executing other parts of the code, pending the returned value of the promise.

The message text contains the status message of the résumé search. With a JavaScript Promise, that is also called the return value.

If the message is a “success”, we will proceed to sign the candidate in and grant him the position. If it fails, we proceed to reject his application.

With JavaScript promises, we do this by using a callback function (promise handlers). These functions are defined in a nested then() method.

To specify what callbacks to call, you use the following two functions:

• resolve(value): This indicates that the asynchronous task was successful. This will call the fulfillment callback in the then() handler.

• reject(error): This indicates an error while trying to run the asynchronous task. This will call the rejection callback in the then() handler.

If the promise is successful, the fulfillment callback will be called. If the promise is rejected, the rejected call back will be called instead.

A promise is simply a placeholder for an asynchronous task which is yet to be completed. When you define a promise object in your script, instead of returning a value immediately, it returns a promise.

How to Write a Promise in JavaScript

You can define a promise in your JavaScript by calling the Promise class and constructing an object like this:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('this is the eventual value the promise will return');
  }, 300);
});

console.log(myPromise);

Running this in the console will return a Promise object:

Constructing an object is not the only way you can define a promise, though. You can also use the built-in Promise API to achieve the same thing:

const anotherPromise = Promise.resolve("this is the eventual value the promise will return")

console.log(anotherPromise);

While the promise in the first code sample will wait for 3 seconds before fulfilling the promise with the this is the eventual... message, the promise in the second code sample will immediately fulfill it with the same message.

Rejected Promises in JavaScript

A Promise can also be rejected. Most of the time, rejections occur because JS encountered some kind of error while running the Asynchronous code. In such a scenario, it calls the reject() function instead.

Here is simple and contrived example of how a promise can get rejected:

const myPromise = new Promise((resolve, reject) => {
  let a = false;
  setTimeout(() => {
    return (a) ? resolve('a is found!'): reject('sorry, no a');
  }, 300);
});

Can you think of the reason why this promise gets rejected? If you said "because a is not false", congratulations!

The promise in the third code sample will resolve to a rejection after a timeout of three seconds, because the (a)? statement resolves to false, which will trigger reject.

How to Chain Promises with then()

When the promise finally returns a value, you will typically want to do something with that return value.

For example, if you were making a network request, you might want to access the value and display it on the page for the user.

You can define two callback functions which you want to get called when a promise is either fulfilled or rejected. These functions are defined inside a nested then() method:

const anotherPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('this is the eventual value the promise will return');
  }, 300);
});

// CONTINUATION
anotherPromise
.then(value => { console.log(value) })

Running this code will display the fulfillment message after three seconds in the console:

Note that you can nest as many promises as you want. Each step will execute after the previous step, taking in the return value of that previous step:

const anotherPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('this is the eventual value the promise will return');
  }, 300);
});

anotherPromise
.then(fulfillFn, rejectFn)
.then(fulfilFn, rejectFn)
.then(value => { console.log(value) })

But we have missed something important.

Always keep in mind that a then() method must take both the fulfillment hander and a rejection handler. This way, the first is called if the promise is fulfilled and the second is called if the promise is rejected with an error.

The promises in code samples four and five does not include a second handler. So, assuming that an error is encountered, there would be no rejection handler to handle the error.

If you are only going to define a single callback function (aka a fulfillment handler) in then(), then you will need to nest a catch() method at the bottom of the promise chain to catch any possible errors.

How to Use the catch() Method in JS

The catch() method will always get called whenever an error is encountered at any point along the promise chain:

const myPromise = new Promise((resolve, reject) => {
  let a = false;
  setTimeout(() => {
    return (a) ? resolve('a is found!'): reject('sorry, no a');
  }, 300);
}); 

myPromise
.then(value => { console.log(value) })
.catch(err => { console.log(err) });

Since myPromise will eventually resolve to a rejection, the function defined in the nested then() will be ignored. Instead, the error handler in catch() will run, which should log the following error message to the console:

Wrapping Up

JavaScript promises are a very powerful feature that help you run asynchronous code in JavaScript. In most, if not all, interviews for roles which use JavaScript, your interviewer will probably ask a question about promises.

In this article, I have explained what a promise is in simple terms, and I've shown its basic practical usage with some code examples.

I hope you got something useful from this article. If you like programming-related tutorials like this, you should check out my blog. I regularly publish articles on software development there.

Thank you for reading and see you soon.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

• Callbacks
• Promises
• Async / Await

Here's what we'll cover in this article:

• What is Asynchronous JavaScript?
• Synchronous vs Asynchronous JavaScript
• How Callbacks Work in JavaScript
• How Promises Work in JavaScript
• How Async / Await Works in JavaScript

So let's dive in!

You can watch this tutorial on YouTube as well if you like:

What is Asynchronous JavaScript?

If you want to build projects efficiently, then this concept is for you.

The theory of async JavaScript helps you break down big complex projects into smaller tasks.

Then you can use any of these three techniques – callbacks, promises or Async/await – to run those small tasks in a way that you get the best results.

Let's dive in!🎖️

Synchronous vs Asynchronous JavaScript

What is a Synchronous System?

In a synchronous system, tasks are completed one after another.

Think of this as if you have just one hand to accomplish 10 tasks. So, you have to complete one task at a time.

Take a look at the GIF 👇 – one thing is happening at a time here:

You'll see that until the first image is loaded completely, the second image doesn't start loading.

Well, JavaScript is by default Synchronous [single threaded]. Think about it like this – one thread means one hand with which to do stuff.

What is an Asynchronous System?

In this system, tasks are completed independently.

Here, imagine that for 10 tasks, you have 10 hands. So, each hand can do each task independently and at the same time.

Take a look at the GIF 👇 – you can see that each image loads at the same time.

Again, all the images are loading at their own pace. None of them is waiting for any of the others.

To Summarize Synchronous vs Asynchronous JS:

When three images are on a marathon, in a:

• Synchronous system, three images are in the same lane. One can't overtake the other. The race is finished one by one. If image number 2 stops, the following image stops.

• Asynchronous system, the three images are in different lanes. They'll finish the race on their own pace. Nobody stops for anybody:

Synchronous and Asynchronous Code Examples

Before starting our project, let's look at some examples and clear up any doubts.

Synchronous Code Example

To test a synchronous system, write this code in JavaScript:

console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");

Here's the result in the console: 👇

Asynchronous code example

Let's say it takes two seconds to eat some ice cream. Now, let's test out an asynchronous system. Write the below code in JavaScript.

Note: Don't worry, we'll discuss the setTimeout() function later in this article.

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

And here's the result in the console: 👇

Now that you know the difference between synchronous and async operations, let's build our ice cream shop.

How to Setup our Project

For this project you can just open Codepen.io and start coding. Or, you can do it in VS code or the editor of your choice.

Open the JavaScript section, and then open your developer console. We'll write our code and see the results in the console.

What are Callbacks in JavaScript?

When you nest a function inside another function as an argument, that's called a callback.

Here's an illustration of a callback:

An example of a callback

Don't worry, we'll see some examples of callbacks in a minute.

Why do we use callbacks?

When doing a complex task, we break that task down into smaller steps. To help us establish a relationship between these steps according to time (optional) and order, we use callbacks.

Take a look at this example:👇

Chart contains steps to make ice cream

These are the small steps you need to take to make ice cream. Also note that in this example, the order of the steps and timing are crucial. You can't just chop the fruit and serve ice cream.

At the same time, if a previous step is not completed, we can't move on to the next step.

To explain that in more detail, let's start our ice cream shop business.

But Wait...

The shop will have two parts:

• The storeroom will have all the ingredients [Our Backend]
• We'll produce ice cream in our kitchen [The frontend]

Let's store our data

Now, we're gonna store our ingredients inside an object. Let's start!

You can store the ingredients inside objects like this: 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }

Our other ingredients are here: 👇

You can store these other ingredients in JavaScript objects like this: 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };

The entire business depends on what a customer orders. Once we have an order, we start production and then we serve ice cream. So, we'll create two functions ->

• order
• production

This is how it all works: 👇

Get order from customer, fetch ingredients, start production, then serve.

Let's make our functions. We'll use arrow functions here:

let order = () =>{};

let production = () =>{};

Now, let's establish a relationship between these two functions using a callback, like this: 👇

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

Let's do a small test

We'll use the console.log() function to conduct tests to clear up any doubts we might have regarding how we established the relationship between the two functions.

let order = (call_production) =>{

console.log("Order placed. Please call production")

// function 👇 is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};

To run the test, we'll call the order function. And we'll add the second function named production as its argument.

// name 👇 of our second function
order(production);

Here's the result in our console 👇

Take a break

So far so good – take a break!

Clear out the console.log

Keep this code and remove everything [don't delete our stocks variable]. On our first function, pass another argument so that we can receive the order [Fruit name]:

// Function 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// Function 2

let production = () =>{};


// Trigger 👇

order("", production);

Here are our steps, and the time each step will take to execute.

Chart contains steps to make ice cream

In this chart, you can see that step 1 is to place the order, which takes 2 seconds. Then step 2 is cut the fruit (2 seconds), step 3 is add water and ice (1 second), step 4 is to start the machine (1 second), step 5 is to select the container (2 seconds), step 6 is to select the toppings (3 seconds) and step 7, the final step, is to serve the ice cream which takes 2 seconds.

To establish the timing, the function setTimeout() is excellent as it is also uses a callback by taking a function as an argument.

Syntax of a setTimeout() function

Now, let's select our fruit and use this function:

// 1st Function

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// Order placed. Call production to start
   call_production();
  },2000)
};

// 2nd Function

let production = () =>{
  // blank for now
};

// Trigger 👇
order(0, production);

And here's the result in the console: 👇

Note that the result is displayed after 2 seconds.

If you're wondering how we picked strawberry from our stock variable, here's the code with the format 👇

Don't delete anything. Now we'll start writing our production function with the following code.👇 We'll use arrow functions:

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};

And here's the result 👇

We'll nest another setTimeout function in our existing setTimeout function to chop the fruit. Like this: 👇

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};

And here's the result 👇

If you remember, here are our steps:

Chart contains steps to make ice cream

Let's complete our ice cream production by nesting a function inside another function – this is also known as a callback, remember?

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};

And here's the result in the console 👇

Feeling confused?

This is called callback hell. It looks something like this (remember that code just above?): 👇

Illustration of Callback hell

What's the solution to this?

How to Use Promises to Escape Callback Hell

Promises were invented to solve the problem of callback hell and to better handle our tasks.

Take a break

But first, take a break!

This is how a promise looks:

illustration of a promise format

Let's dissect promises together.

An illustration of the life of a promise

As the above charts show, a promise has three states:

• Pending: This is the initial stage. Nothing happens here. Think of it like this, your customer is taking their time giving you an order. But they haven't ordered anything yet.
• Resolved: This means that your customer has received their food and is happy.
• Rejected: This means that your customer didn't receive their order and left the restaurant.

Let's adopt promises to our ice cream production case study.

But wait...

We need to understand four more things first ->

• Relationship between time and work
• Promise chaining
• Error handling
• The .finally handler

Let's start our ice cream shop and understand each of these concepts one by one by taking baby steps.

Relationship between time and work

If you remember, these are our steps and the time each takes to make ice cream"

Chart contains steps to make ice cream

For this to happen, let's create a variable in JavaScript: 👇

let is_shop_open = true;

Now create a function named order and pass two arguments named time, work:

let order = ( time, work ) =>{

  }

Now, we're gonna make a promise to our customer, "We will serve you ice-cream" Like this ->

let order = ( time, work ) =>{

  return new Promise( ( resolve, reject )=>{ } )

  }

Our promise has 2 parts:

• Resolved [ ice cream delivered ]
• Rejected [ customer didn't get ice cream ]

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      resolve( )

    }

    else{

      reject( console.log("Our shop is closed") )

    }

  })
}

Let's add the time and work factors inside our promise using a setTimeout() function inside our if statement. Follow me 👇

Note: In real life, you can avoid the time factor as well. This is completely dependent on the nature of your work.

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      setTimeout(()=>{

       // work is 👇 getting done here
        resolve( work() )

// Setting 👇 time here for 1 work
       }, time)

    }

    else{
      reject( console.log("Our shop is closed") )
    }

  })
}

Now, we're gonna use our newly created function to start ice-cream production.

// Set 👇 time here
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
//    pass a ☝️ function here to start working

The result 👇 after 2 seconds looks like this:

Good job!

Promise chaining

In this method, we defining what we need to do when the first task is complete using the .then handler. It looks something like this 👇

Illustration of promise chaining using .then handler

The .then handler returns a promise when our original promise is resolved.

Here's an Example:

Let me make it simpler: it's similar to giving instructions to someone. You tell someone to " First do this, then do that, then this other thing, then.., then.., then..." and so on.

• The first task is our original promise.
• The rest of the tasks return our promise once one small bit of work is completed

Let's implement this on our project. At the bottom of your code write the following lines. 👇

Note: don't forget to write the return word inside your .then handler. Otherwise, it won't work properly. If you're curious, try removing the return once we finish the steps:

order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

And here's the result: 👇

Using the same system, let's finish our project:👇

// step 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

// step 2
.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
  return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
  return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})

// step 5
.then(()=>{
  return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
  return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})

// step 7
.then(()=>{
  return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})

// Step 8
.then(()=>{
  return order(2000, ()=>console.log("Serve Ice Cream"))
})

Here's the result: 👇

Error handling

We need a way to handle errors when something goes wrong. But first, we need to understand the promise cycle:

An illustration of the life of a promise

To catch our errors, let's change our variable to false.

let is_shop_open = false;

Which means our shop is closed. We're not selling ice cream to our customers anymore.

To handle this, we use the .catch handler. Just like .then, it also returns a promise, but only when our original promise is rejected.

A small reminder here:

• .then works when a promise is resolved
• .catch works when a promise is rejected

Go down to the very bottom and write the following code:👇

Just remember that there should be nothing between your previous .then handler and the .catch handler.

.catch(()=>{
  console.log("Customer left")
})

Here's the result:👇

A couple things to note about this code:

• The 1st message is coming from the reject() part of our promise
• The 2nd message is coming from the .catch handler

How to use the .finally() handler

There's something called the finally handler which works regardless of whether our promise was resolved or rejected.

For example: whether we serve no customers or 100 customers, our shop will close at the end of the day

If you're curious to test this, come at very bottom and write this code: 👇

.finally(()=>{
  console.log("end of day")
})

The result:👇

Everyone, please welcome Async / Await~

How Does Async / Await Work in JavaScript?

This is supposed to be the better way to write promises and it helps us keep our code simple and clean.

All you have to do is write the word async before any regular function and it becomes a promise.

But first, take a break

Let's have a look:👇

Promises vs Async/Await in JavaScript

Before async/await, to make a promise we wrote this:

function order(){
   return new Promise( (resolve, reject) =>{

    // Write code here
   } )
}

Now using async/await, we write one like this:

//👇 the magical keyword
 async function order() {
    // Write code here
 }

But wait......

You need to understand ->

• How to use the try and catch keywords
• How to use the await keyword

How to use the Try and Catch keywords

We use the try keyword to run our code while we use catch to catch our errors. It's the same concept we saw when we looked at promises.

Let's see a comparison. We'll see a small demo of the format, then we'll start coding.

Promises in JS -> resolve or reject

We used resolve and reject in promises like this:

function kitchen(){

  return new Promise ((resolve, reject)=>{
    if(true){
       resolve("promise is fulfilled")
    }

    else{
        reject("error caught here")
    }
  })
}

kitchen()  // run the code
.then()    // next step
.then()    // next step
.catch()   // error caught here
.finally() // end of the promise [optional]

Async / Await in JS -> try, catch

When we're using async/await, we use this format:

//👇 Magical keyword
async function kitchen(){

   try{
// Let's create a fake problem      
      await abc;
   }

   catch(error){
      console.log("abc does not exist", error)
   }

   finally{
      console.log("Runs code anyways")
   }
}

kitchen()  // run the code

Don't panic, we'll discuss the await keyword next.

Now hopefully you understand the difference between promises and Async / Await.

How to Use JavaScript's Await Keyword

The keyword await makes JavaScript wait until a promise settles and returns its result.

How to use the await keyword in JavaScript

Let's go back to our ice cream shop. We don't know which topping a customer might prefer, chocolate or peanuts. So we need to stop our machine and go and ask our customer what they'd like on their ice cream.

Notice here that only our kitchen is stopped, but our staff outside the kitchen will still do things like:

• doing the dishes
• cleaning the tables
• taking orders, and so on.

An Await Keyword Code Example

Let's create a small promise to ask which topping to use. The process takes three seconds.

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

Now, let's create our kitchen function with the async keyword first.

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")

  await toppings_choice()

  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();

Let's add other tasks below the kitchen() call.

console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

And here's the result:

We are literally going outside our kitchen to ask our customer, "what is your topping choice?" In the mean time, other things still get done.

Once, we get their topping choice, we enter the kitchen and finish the job.

Small note

When using Async/ Await, you can also use the .then, .catch, and .finally handlers as well which are a core part of promises.

Let's open our Ice cream shop again

We're gonna create two functions ->

• kitchen: to make ice cream
• time: to assign the amount of time each small task will take.

Let's start! First, create the time function:

let is_shop_open = true;

function time(ms) {

   return new Promise( (resolve, reject) => {

      if(is_shop_open){
         setTimeout(resolve,ms);
      }

      else{
         reject(console.log("Shop is closed"))
      }
    });
}

Now, let's create our kitchen:

async function kitchen(){
   try{

     // instruction here
   }

   catch(error){
    // error management here
   }
}

// Trigger
kitchen();

Let's give small instructions and test if our kitchen function is working or not:

async function kitchen(){
   try{

// time taken to perform this 1 task
     await time(2000)
     console.log(`${stocks.Fruits[0]} was selected`)
   }

   catch(error){
     console.log("Customer left", error)
   }

   finally{
      console.log("Day ended, shop closed")
    }
}

// Trigger
kitchen();

The result looks like this when the shop is open: 👇

The result looks like this when the shop is closed: 👇

So far so good.

Let's complete our project.

Here's the list of our tasks again: 👇

Chart contains steps to make ice cream

First, open our shop

let is_shop_open = true;

Now write the steps inside our kitchen() function: 👇

async function kitchen(){
    try{
    await time(2000)
    console.log(`${stocks.Fruits[0]} was selected`)

    await time(0000)
    console.log("production has started")

    await time(2000)
    console.log("fruit has been chopped")

    await time(1000)
    console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

    await time(1000)
    console.log("start the machine")

    await time(2000)
    console.log(`ice cream placed on ${stocks.holder[1]}`)

    await time(3000)
    console.log(`${stocks.toppings[0]} as toppings`)

    await time(2000)
    console.log("Serve Ice Cream")
    }

    catch(error){
     console.log("customer left")
    }
}

And here's the result: 👇

Conclusion

Congratulations for reading until the end! In this article you've learned:

• The difference between synchronous and asynchronous systems
• Mechanisms of asynchronous JavaScript using 3 techniques (callbacks, promises, and Async/ Await)

Here's your medal for reading until the end. ❤️

Suggestions and criticisms are highly appreciated ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Credits

• Collection of all the images used
• Unicorns, kitty avatar
• tabby cat, Astrologist Woman, girl-holding-flower
• Character emotions

Promises are challenging for many web developers, even after spending years working with them.

In this article, I want to try to change that perception while sharing what I've learned about JavaScript Promises over the last few years. Hope you find it useful.

What is a Promise in JavaScript?

A Promise is a special JavaScript object. It produces a value after an asynchronous (aka, async) operation completes successfully, or an error if it does not complete successfully due to time out, network error, and so on.

Successful call completions are indicated by the resolve function call, and errors are indicated by the reject function call.

You can create a promise using the promise constructor like this:

let promise = new Promise(function(resolve, reject) {    
    // Make an asynchronous call and either resolve or reject
});

In most cases, a promise may be used for an asynchronous operation. However, technically, you can resolve/reject on both synchronous and asynchronous operations.

Hang on, don't we have callback functions for async operations?

Oh, yes! That's right. We have callback functions in JavaScript. But, a callback is not a special thing in JavaScript. It is a regular function that produces results after an asynchronous call completes (with success/error).

The word 'asynchronous' means that something happens in the future, not right now. Usually, callbacks are only used when doing things like network calls, or uploading/downloading things, talking to databases, and so on.

While callbacks are helpful, there is a huge downside to them as well. At times, we may have one callback inside another callback that's in yet another callback and so on. I'm serious! Let's understand this "callback hell" with an example.

How to Avoid Callback Hell – PizzaHub Example

Let's order a Veg Margherita pizza 🍕 from the PizzaHub. When we place the order, PizzaHub automatically detects our location, finds a nearby pizza restaurant, and finds if the pizza we are asking for is available.

If it's available, it detects what kind of beverages we get for free along with the pizza, and finally, it places the order.

If the order is placed successfully, we get a message with a confirmation.

So how do we code this using callback functions? I came up with something like this:

function orderPizza(type, name) {

    // Query the pizzahub for a store
    query(`/api/pizzahub/`, function(result, error){
       if (!error) {
           let shopId = result.shopId;

           // Get the store and query pizzas
           query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
               if (!error) {
                   let pizzas = result.pizzas;

                   // Find if my pizza is availavle
                   let myPizza = pizzas.find((pizza) => {
                       return (pizza.type===type && pizza.name===name);
                   });

                   // Check for the free beverages
                   query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
                       if (!error) {
                           let beverage = result.id;

                           // Prepare an order
                           query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
                              if (!error) {
                                  console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
                              } else {
                                  console.log(`Bad luck, No Pizza for you today!`);
                              }
                           });

                       }
                   })
               }
           });
       } 
    });
}

// Call the orderPizza method
orderPizza('veg', 'margherita');

Let's have a close look at the orderPizza function in the above code.

It calls an API to get your nearby pizza shop's id. After that, it gets the list of pizzas available in that restaurant. It checks if the pizza we are asking for is found and makes another API call to find the beverages for that pizza. Finally the order API places the order.

Here we use a callback for each of the API calls. This leads us to use another callback inside the previous, and so on.

This means we get into something we call (very expressively) Callback Hell. And who wants that? It also forms a code pyramid which is not only confusing but also error-prone.

Demonstration of callback hell and pyramid

There are a few ways to come out of (or not get into) callback hell. The most common one is by using a Promise or async function. However, to understand async functions well, you need to have a fair understanding of Promises first.

So let's get started and dive into promises.

Understanding Promise States

Just to review, a promise can be created with the constructor syntax, like this:

let promise = new Promise(function(resolve, reject) {
  // Code to execute
});

The constructor function takes a function as an argument. This function is called the executor function.

// Executor function passed to the 
// Promise constructor as an argument
function(resolve, reject) {
    // Your logic goes here...
}

The executor function takes two arguments, resolve and reject. These are the callbacks provided by the JavaScript language. Your logic goes inside the executor function that runs automatically when a new Promise is created.

For the promise to be effective, the executor function should call either of the callback functions, resolve or reject. We will learn more about this in detail in a while.

The new Promise() constructor returns a promise object. As the executor function needs to handle async operations, the returned promise object should be capable of informing when the execution has been started, completed (resolved) or retuned with error (rejected).

A promise object has the following internal properties:

1. state – This property can have the following values:

2. pending: Initially when the executor function starts the execution.

3. fulfilled: When the promise is resolved.
4. rejected: When the promise is rejected.

Promise states

2. result – This property can have the following values:

3. undefined: Initially when the state value is pending.

4. value: When resolve(value) is called.
5. error: When reject(error) is called.

These internal properties are code-inaccessible but they are inspectable. This means that we will be able to inspect the state and result property values using the debugger tool, but we will not be able to access them directly using the program.

Able to inspect the internal properties of a promise

A promise's state can be pending, fulfilled or rejected. A promise that is either resolved or rejected is called settled.

A settled promise is either fulfilled or rejected

How promises are resolved and rejected

Here is an example of a promise that will be resolved (fulfilled state) with the value I am done immediately.

let promise = new Promise(function(resolve, reject) {
    resolve("I am done");
});

The promise below will be rejected (rejected state) with the error message Something is not right!.

let promise = new Promise(function(resolve, reject) {
    reject(new Error('Something is not right!'));
});

An important point to note:

A Promise executor should call only one resolve or one reject. Once one state is changed (pending => fulfilled or pending => rejected), that's all. Any further calls to resolve or reject will be ignored.

let promise = new Promise(function(resolve, reject) {
  resolve("I am surely going to get resolved!");

  reject(new Error('Will this be ignored?')); // ignored
  resolve("Ignored?"); // ignored
});

In the example above, only the first one to resolve will be called and the rest will be ignored.

How to handle a Promise once you've created it

A Promise uses an executor function to complete a task (mostly asynchronously). A consumer function (that uses an outcome of the promise) should get notified when the executor function is done with either resolving (success) or rejecting (error).

The handler methods, .then(), .catch() and .finally(), help to create the link between the executor and the consumer functions so that they can be in sync when a promise resolves or rejects.

The executor and consumer functions

How to Use the .then() Promise Handler

The .then() method should be called on the promise object to handle a result (resolve) or an error (reject).

It accepts two functions as parameters. Usually, the .then() method should be called from the consumer function where you would like to know the outcome of a promise's execution.

promise.then(
  (result) => { 
     console.log(result);
  },
  (error) => { 
     console.log(error);
  }
);

If you are interested only in successful outcomes, you can just pass one argument to it, like this:

promise.then(
  (result) => { 
      console.log(result);
  }
);

If you are interested only in the error outcome, you can pass null for the first argument, like this:

promise.then(
  null,
  (error) => { 
      console.log(error)
  }
);

However, you can handle errors in a better way using the .catch() method that we will see in a minute.

Let's look at a couple of examples of handling results and errors using the .then and .catch handlers. We will make this learning a bit more fun with a few real asynchronous requests. We will use the PokeAPI to get information about Pokémon and resolve/reject them using Promises.

First, let us create a generic function that accepts a PokeAPI URL as argument and returns a Promise. If the API call is successful, a resolved promise is returned. A rejected promise is returned for any kind of errors.

We will be using this function in several examples from now on to get a promise and work on it.

function getPromise(URL) {
  let promise = new Promise(function (resolve, reject) {
    let req = new XMLHttpRequest();
    req.open("GET", URL);
    req.onload = function () {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject("There is an Error!");
      }
    };
    req.send();
  });
  return promise;
}

Example 1: Get 50 Pokémon's information:

const ALL_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon?limit=50';

// We have discussed this function already!
let promise = getPromise(ALL_POKEMONS_URL);

const consumer = () => {
    promise.then(
        (result) => {
            console.log({result}); // Log the result of 50 Pokemons
        },
        (error) => {
            // As the URL is a valid one, this will not be called.
            console.log('We have encountered an Error!'); // Log an error
    });
}

consumer();

Example 2: Let's try an invalid URL

const POKEMONS_BAD_URL = 'https://pokeapi.co/api/v2/pokemon-bad/';

// This will reject as the URL is 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.then(
        (result) => {
            // The promise didn't resolve. Hence, it will
            // not be executed.
            console.log({result});
        },
        (error) => {
            // A rejected prmise will execute this
            console.log('We have encountered an Error!'); // Log an error
        }
    );
}

consumer();

How to Use the .catch() Promise Handler

You can use this handler method to handle errors (rejections) from promises. The syntax of passing null as the first argument to the .then() is not a great way to handle errors. So we have .catch() to do the same job with some neat syntax:

// This will reject as the URL is 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.catch(error => console.log(error));
}

consumer();

If we throw an Error like new Error("Something wrong!") instead of calling the reject from the promise executor and handlers, it will still be treated as a rejection. It means that this will be caught by the .catch handler method.

This is the same for any synchronous exceptions that happen in the promise executor and handler functions.

Here is an example where it will be treated like a reject and the .catch handler method will be called:

new Promise((resolve, reject) => {
  throw new Error("Something is wrong!");// No reject call
}).catch((error) => console.log(error));

How to Use the .finally() Promise Handler

The .finally() handler performs cleanups like stopping a loader, closing a live connection, and so on. The finally() method will be called irrespective of whether a promise resolves or rejects. It passes through the result or error to the next handler which can call a .then() or .catch() again.

Here is an example that'll help you understand all three methods together:

let loading = true;
loading && console.log('Loading...');

// Gatting Promise
promise = getPromise(ALL_POKEMONS_URL);

promise.finally(() => {
    loading = false;
    console.log(`Promise Settled and loading is ${loading}`);
}).then((result) => {
    console.log({result});
}).catch((error) => {
    console.log(error)
});

To explain a bit further:

• The .finally() method makes loading false.
• If the promise resolves, the .then() method will be called. If the promise rejects with an error, the .catch() method will be called. The .finally() will be called irrespective of the resolve or reject.

What is the Promise Chain?

The promise.then() call always returns a promise. This promise will have the state as pending and result as undefined. It allows us to call the next .then method on the new promise.

When the first .then method returns a value, the next .then method can receive that. The second one can now pass to the third .then() and so on. This forms a chain of .then methods to pass the promises down. This phenomenon is called the Promise Chain.

Promise Chain

Here is an example:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
}).catch(error => {
    console.log('In the catch', error);
});

Here we first get a promise resolved and then extract the URL to reach the first Pokémon. We then return that value and it will be passed as a promise to the next .then() handler function. Hence the output,

https://pokeapi.co/api/v2/pokemon/1/

The .then method can return either:

• A value (we have seen this already)
• A brand new promise.

It can also throw an error.

Here is an example where we have created a promise chain with the .then methods which returns results and a new promise:

// Promise Chain with multiple then and catch
let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
}).then(pokemon => {
    console.log(JSON.parse(pokemon));
}).catch(error => {
    console.log('In the catch', error);
});

In the first .then call we extract the URL and return it as a value. This URL will be passed to the second .then call where we are returning a new promise taking that URL as an argument.

This promise will be resolved and passed down to the chain where we get the information about the Pokémon. Here is the output:

Output of the promise chain call

In case there is an error or a promise rejection, the .catch method in the chain will be called.

A point to note: Calling .then multiple times doesn't form a Promise chain. You may end up doing something like this only to introduce a bug in the code:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
});
promise.then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
});
promise.then(pokemon => {
    console.log(JSON.parse(pokemon));
});

We call the .then method three times on the same promise, but we don't pass the promise down. This is different than the promise chain. In the above example, the output will be an error.

How to Handle Multiple Promises

Apart from the handler methods (.then, .catch, and .finally), there are six static methods available in the Promise API. The first four methods accept an array of promises and run them in parallel.

1. Promise.all
2. Promise.any
3. Promise.allSettled
4. Promise.race
5. Promise.resolve
6. Promise.reject

Let's go through each one.

The Promise.all() method

Promise.all([promises]) accepts a collection (for example, an array) of promises as an argument and executes them in parallel.

This method waits for all the promises to resolve and returns the array of promise results. If any of the promises reject or execute to fail due to an error, all other promise results will be ignored.

Let's create three promises to get information about three Pokémons.

const BULBASAUR_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/bulbasaur';
const RATICATE_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/raticate';
const KAKUNA_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/kakuna';


let promise_1 = getPromise(BULBASAUR_POKEMONS_URL);
let promise_2 = getPromise(RATICATE_POKEMONS_URL);
let promise_3 = getPromise(KAKUNA_POKEMONS_URL);

Use the Promise.all() method by passing an array of promises.

Promise.all([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('An Error Occured');
});

Output:

As you see in the output, the result of all the promises is returned. The time to execute all the promises is equal to the max time the promise takes to run.

The Promise.any() method

Promise.any([promises]) - Similar to the all() method, .any() also accepts an array of promises to execute them in parallel. This method doesn't wait for all the promises to resolve. It is done when any one of the promises is settled.

 Promise.any([promise_1, promise_2, promise_3]).then(result => {
     console.log(JSON.parse(result));
 }).catch(error => {
     console.log('An Error Occured');
 });

The output would be the result of any of the resolved promises:

The Promise.allSettled() method

romise.allSettled([promises]) - This method waits for all promises to settle(resolve/reject) and returns their results as an array of objects. The results will contain a state (fulfilled/rejected) and value, if fulfilled. In case of rejected status, it will return a reason for the error.

Here is an example of all fulfilled promises:

Promise.allSettled([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('There is an Error!');
});

Output:

If any of the promises rejects, say, the promise_1,

let promise_1 = getPromise(POKEMONS_BAD_URL);

The Promise.race() method

Promise.race([promises]) – It waits for the first (quickest) promise to settle, and returns the result/error accordingly.

Promise.race([promise_1, promise_2, promise_3]).then(result => {
    console.log(JSON.parse(result));
}).catch(error => {
    console.log('An Error Occured');
});

Output the fastest promise that got resolved:

The Promise.resolve/reject methods

Promise.resolve(value) – It resolves a promise with the value passed to it. It is the same as the following:

let promise = new Promise(resolve => resolve(value));

Promise.reject(error) – It rejects a promise with the error passed to it. It is the same as the following:

let promise = new Promise((resolve, reject) => reject(error));

Can we rewrite the PizzaHub example with Promises?

Sure, let's do it. Let us assume that the query method will return a promise. Here is an example query() method. In real life, this method may talk to a database and return results. In this case, it is very much hard-coded but serves the same purpose.

function query(endpoint) {
  if (endpoint === `/api/pizzahub/`) {
    return new Promise((resolve, reject) => {
      resolve({'shopId': '123'});
    })
  } else if (endpoint.indexOf('/api/pizzahub/pizza/') >=0) {
    return new Promise((resolve, reject) => {
      resolve({pizzas: [{'type': 'veg', 'name': 'margherita', 'id': '123'}]});
    })
  } else if (endpoint.indexOf('/api/pizzahub/beverages') >=0) {
    return new Promise((resolve, reject) => {
      resolve({id: '10', 'type': 'veg', 'name': 'margherita', 'beverage': 'coke'});
    })
  } else if (endpoint === `/api/order`) {
    return new Promise((resolve, reject) => {
      resolve({'type': 'veg', 'name': 'margherita', 'beverage': 'coke'});
    })
  }
}