Last active
November 15, 2018 09:47
-
-
Save novalagung/8f5d1fa297f72599bde574fdb8a16902 to your computer and use it in GitHub Desktop.
a simple comparison on handling asynchronous processes sequentially, using callback vs promise, in javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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") | |
}) | |
}) | |
}) | |
}) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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) | |
}) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment