callback-vs-promise-vs-async-await

callback-vs-promise-vs-async-await.js

// callback
function callback() {
    setTimeout(function () {
        console.log('1. First thing setting up second thing');
        setTimeout(function () {
            console.log('2. Second thing setting up third thing');
            setTimeout(function () {
                console.log('3. Third thing setting up fourth thing');
                setTimeout(function () {
                    console.log('4. Fourth thing setting up fifth thing');
                    setTimeout(function () {
                        console.log('5. Fifth thing');
                        setTimeout(function () {
                            console.log('End');
                        }, 0);
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}
callback();

// promise
function promise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('1. First thing setting up second thing');
            resolve();
        }, 1000)
    })
    .then(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('2. Second thing setting up third thing');
                resolve();
            }, 1000)
        })
    })
    .then(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('3. Third thing setting up fourth thing');
                resolve();
            }, 1000)
        })
    })
    .then(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('4. Fourth thing setting up fifth thing');
                resolve();
            }, 1000)
        })
    })
    .then(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('5. Fifth thing');
                resolve();
            }, 1000)
        })
    })
    .catch(error => {
        console.log(`It's all a big mistake.`);
    })
    .finally(() => {
        console.log('End');
    })
}
promise();

// async await
async function func1() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('1. First thing setting up second thing');
            resolve();
        }, 1000)
    })
}

async function func2() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('2. Second thing setting up third thing');
            resolve();
        }, 1000)
    })
}

async function func3() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('3. Third thing setting up fourth thing');
            resolve();
        }, 1000)
    })
}

async function func4() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('4. Fourth thing setting up fifth thing');
            resolve();
        }, 1000)
    })
}

async function func5() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('5. Fifth thing');
            resolve();
        }, 1000)
    })
}


async function loadFuncs() {
    try {
        await func1();
        await func2();
        await func3();
        await func4();
        await func5();
    }
    catch (err) {
        console.error(`ERROR(${err.code}): ${err.message}`);
    }
    finally {
        console.log('End');
    }
}
loadFuncs();