Asynchronous JavaScript Cheatsheet

async-basics.js

function callbackExample() {
    setTimeout(_callback, 1000);
    console.log('This appears instantaneously');
}

function promiseExample() {
    _longRunningOperation()
        .then(() => {
            console.log('This appears later');
        })
        .catch((err) => {
            console.error(`Error: ${err}`);
        });
    console.log('This appears instantaneously');
}

async function asyncAwaitExample() {
    try {
        await _longRunningOperation();
    } catch (error) {
        console.error(`Error: ${err}`);
    }
    console.log('This appears later');
}


function _callback() {
    console.log('This appears later');
}

function _longRunningOperation() {
    return new Promise((resolve, reject) => {
        // Do something that takes time
        const itWorked = true;
        if (itWorked) {
            resolve();
        } else {
            reject('something went wrong');
        }
    });
}

async-patterns.js

function pseudoParallelPromises() {
    Promise.all([
        _getTask('Task 1', 1500),
        _getTask('Task 2', 500),
        _getTask('Task 3', 1000)
    ]).then(() => {
        console.log('All done');
    });
    // Ouput:
    //   Task 2 completed
    //   Task 3 completed
    //   Task 1 completed
    //   All done
}

function sequentialPromises() {
    _getTask('Task 1', 1500)
        .then(() => { return _getTask('Task 2', 500); })
        .then(() => { return _getTask('Task 3', 1000); })
        .then(() => {
            console.log('All done');
        });
    // Ouput:
    //   Task 1 completed
    //   Task 2 completed
    //   Task 3 completed
    //   All done
}

async function sequentialAsyncAwait() {
    await _getTask('Task 1', 1500);
    await _getTask('Task 2', 500);
    await _getTask('Task 3', 1000);
    console.log('All done');
    // Ouput:
    //   Task 1 completed
    //   Task 2 completed
    //   Task 3 completed
    //   All done
}


function _getTask(taskName, taskDuration) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`${taskName} completed`);
            resolve();
        }, taskDuration);
    });
}