a simple comparison on handling asynchronous processes sequentially, using callback vs promise, in javascript

using-callback.js

function doA(callback) {
    $.ajax({
        // ...
        success: function (res) {
            if (callback) callback(res, true)
        },
        error: function (res) {
            if (callback) callback(res, false) 
        }
    })
}

function doB(callback) {
    $.ajax({
        // ...
        success: function (res) {
            if (callback) callback(res, true)
        },
        error: function (res) {
            if (callback) callback(res, false) 
        }
    })
}

function doC(callback) {
    // do some stuff, a lot one

    if (!callback) {
        return
    }

    if (success) {
        callback(someData, true)
    } else {
        callback(someData, false)
    }
}

function doD(callback) {
    // do another stuff

    if (!callback) {
        return
    }

    if (success) {
        callback(someData, true)
    } else {
        callback(someData, false)
    }
}

$(function () {
    doA(function (resFromA, ok) {
        console.log(resFromA)
        if (!ok) return

        doB(function (resFromB, ok) {
            console.log(resFromB)
            if (!ok) return

            doC(function (resFromC, ok) {
                console.log(resFromC)
                if (!ok) return

                doD(function (resFromD) {
                    console.log(resFromD)
                    console.log("everything is", ok ? "ok" : "not ok")
                })
            })
        })
    })
})

using-promise.js

// by default, jQuery.ajax returns a promise object

function doA() {
    return $.ajax(url, param).then(function (res) {
        Promise.resolve(res)
    }).catch(function (err) {
        Promise.reject(err)
    })
}

function doB() {
    return $.ajax(url, param).then(function (res) {
        Promise.resolve(res)
    }).catch(function (err) {
        Promise.reject(err)
    })
}

// `new Promise()` used to create promise object.
// promise does have good compatibility with various browser.
// more information check https://caniuse.com/promises;
//
// for older browser, the compatibility issue can be solved using 3rd party library like http://bluebirdjs.com;
// simply import the js, then your promise codes will work properly.

function doC() {
    return new Promise(function (resolve, reject) {
        // do some stuff, a lot one

        if (success) {
            resolve(someData)
        } else {
            reject(someError)
        }
    })
}

// this is another way to create promise object.
// `Promise.resolve()` -> will create a promise object that `resolve()` is called inside.
// `Promise.reject()` -> will create a promise object that `reject()` is called inside.

function doD() {
    // do another stuff

    if (success) {
        return Promise.resolve(someData)
    } else {
        return Promise.reject(someError)
    }
}

$(function () {
    doA().then(function (resFromA) {
        console.log(resFromA)
        return doB()
    }).then(function (resFromb) {
        console.log(resFromb)
        return doC()
    }).then(function (resFromC) {
        console.log(resFromC)
        return doD()
    }).then(function (resFromD) {
        console.log(resFromD)
    }).catch(function (err) {
        // this block will be called if some error happen or `reject()` called inside any promise from current chain.
        // better to put this `.catch()` on the very on of promises chain, so any possible error will always be handled.
        console.log('everything is not ok')
        console.log('error', err)
    })

})