Bài viết này sẽ giới thiệu về khái niệm promise và các ứng dụng của nó trong javascript. Promise được sử dụng khá nhiều ở cả front-end (AngularJS) và back-end(NodeJS), do đó nắm vững khái niệm này sẽ giúp bạn rất nhiều trong việc code và … trả lời phỏng vấn.
Lưu ý: Bài viết sử dụng nhiều ngôn ngữ 16+, khuyến phụ nữ dưới 18 tuổi và trẻ em có thai không nên đọc.
Lập trình bất đồng bộ trong Javascript
Bạn nào từng làm AJAX đều biết rằng Javascript kết nối với server theo cơ chế bất đồng bộ, các hàm phía sau không đợi hàm AJAX chạy xong mà tiếp tục chạy luôn.
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
| // Hàm ajax chạy bất đồng bộ, do đó giá trị xxxImage là undefined | |
| var xxxImage = ajax.get("gaixinh.info"); | |
| console.log(xxxImage); | |
Do đó, để lấy kết quả của hàm ajax, ta phải truyền cho nó 1 callback. Sau khi hàm AJAX lấy được kết quả, nó sẽ gọi hàm callback với kết quả thu được.
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
| // Truyền callback vào hàm ajax | |
| var callback = function(image){ | |
| console.log(image); | |
| }; | |
| ajax.get("gaixinh.info", callback); | |
| // Có thể viết gọn như sau | |
| ajax.get("gaixinh.info", function(image) { | |
| console.log(image); | |
| }) |
Cách làm này có gì không ổn? Sử dụng callback chồng chéo sẽ làm code trở nên rối rắm, khó đọc; việc bắt exception, hiển thị lỗi trở cũng nên phức tạp.
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
| // Do những hàm dưới chạy bất đồng bộ, bạn không thể lấy dữ liệu lần lượt kiểu này | |
| var xe = xin_mẹ_mua_xe(); // Chờ cả năm mới có xe | |
| var gái = chở_gái_đi_chơi(xe); // Lấy xe chở gái đi chơi | |
| var abcd = chở_gái_vào_hotel(y); // Đi chơi xong chở gái đi đâu đó | |
| // Mà phải sử dụng đống callback "gớm ghiếc", tạo thành callback hell | |
| xin_mẹ_mua_xe(function(xe) { | |
| chở_gái_đi_chơi(xe, function(gái) { | |
| chở_gái_vào_hotel(hotel, function(z) { | |
| // Làm gì đó, ai biết | |
| }); | |
| }); | |
| }); |
Để giải quyết vấn đề này, các bác developer đã sáng tạo ra một khái niệm gọi là promise.
Promise là chi? Promise là… lời hứa!
Khái niệm promise được MDN giải thích một cách khá mù mờ và hơi… khó hiểu:
ThePromiseobject is used for asynchronous computations. APromiserepresents an operation that hasn't completed yet, but is expected in the future.
Để dễ hiểu, mình gọi Promise là lời hứa. Tương tự như trong thực tế, có người hứa rồi làm, có người hứa rồi … thất hứa.
Một lời hứa có 3 trạng thái sau:
- pending: Hiện lời hứa chỉ là lời hứa suông, còn đang chờ người khác thực hiện
- fulfilled: Lời hứa đã được thực hiện
- reject: Bạn đã bị thất hứa, hay còn gọi là bị “xù”
Khi xưa, để dụ bạn cố gắng học hành, bố mẹ bảo “Ráng đậu đại học bố mẹ sẽ mua cho con BMW đi học cho bằng bạn bằng bè”. Lúc này, thứ bạn nhận được là một lời hứa, chứ không phải xe BMW.
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
| // Hàm này trả ra lời hứa chứ không phải chiếc BMW | |
| function hứa_cho_có() { | |
| return Promise((thuc_hien_loi_hua, that_hua) => { | |
| // Sau 1 thời gian dài dài dàiiiiiii | |
| // Nếu vui bố mẹ sẽ thực hiện lời hứa | |
| if (vui) { | |
| thuc_hien_loi_hua("Xe BMW"); | |
| // Lúc này trạng thái của lời hứa là fulfilled | |
| } else { | |
| that_hua("Xe dap"); | |
| // Lúc này trạng thái của lời hứa là rejected | |
| } | |
| }); | |
| } | |
| // Lời hứa bây giờ đang là pendding | |
| // Nếu được thực hiện, bạn có "Xe BMW" | |
| // Nếu bị reject, bạn có "Xe đạp" | |
| var promise = hứa_cho_có(); | |
| promise | |
| .then((xe_bmw) => { | |
| console.log("Được chiếc BMW vui quá"); | |
| }) | |
| .catch((xe_dap) => { | |
| console.log("Được chiếc xe đạp …."); | |
| }); |
Khi lời hứa được thực hiện, promise sẽ gọi callback trong hàm then. Ngược lại, khi bị thất hứa, promise sẽ gọi callback trong hàm catch.
Quay lại với ví dụ ở đầu bài. Lúc này hàm ajax sẽ trả ra một lời hứa. Hàm này hứa là “Nếu lấy ảnh XXX, ta sẽ đưa cho mày”. Lúc này kết quả của hàm là một promise, chứ không phải là ảnh XXX.
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 get(url) { | |
| return new Promise((resolve, reject) => { | |
| // Lấy hình từ gái xinh.com | |
| // Nếu bị lỗi thì đành thất hứa | |
| if (error) reject("Error"); | |
| // Nếu lấy được thì thực hiện lời hứa | |
| resolve(xxxImage); | |
| }); | |
| } | |
| var promise = ajax.get("gaixinh.info"); | |
| // Có hình thì fap, không có thì alert lỗi | |
| promise | |
| .then(image => fap) | |
| .catch((error) => alert(error)); |
Ủa, cũng là dùng callback thôi mà??
Ừ, hồi mới tìm hiểu về promise mình cũng nghĩ tương tự như các bạn vậy đó. Vậy thì promise có gì hay mà phải dùng?
Promise hay ở các điểm sau:
- Promise hỗ trợ “chaining”
- Promise giúp bắt lỗi dễ dàng hơn
- Xử lý bất đồng bộ
Cùng phân tích các điểm hay của Promise nhé.
1. Promise chaining
Giá trị trả về của hàm then là 1 promise khác. Do vậy ta có thể dùng promise gọi liên tiếp các hàm bất đồng bộ. Có thể viết lại hàm phía trên như sau:
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
| // Dùng callback hell | |
| xin_mẹ_mua_xe(function(xe) { | |
| chở_gái_đi_chơi(xe, function(gái) { | |
| chở_gái_vào_hotel(hotel, function(z) { | |
| // Làm gì đó, ai biết | |
| }); | |
| }); | |
| }); | |
| // Dùng promise, code gọn nhẹ dễ đọc | |
| xin_mẹ_mua_xe | |
| .then(chở_gái_đi_chơi) | |
| .then(chở_gái_vào_hotel) | |
| .then(function() { /*Làm gì đó, ai biết*/ }); |
2. Bắt lỗi với promise
Trong ví dụ trên, ta gọi lần lượt 3 hàm: xin_mẹ_mua_xe, chở_gái_đi_chơi, chở_gái_vào_hotel.
Chỉ cần một trong 3 hàm này bị lỗi, promise sẽ chuyển qua trạng thái reject. Lúc này callback trong hàm catch sẽ được gọi. Việc bắt lỗi trở nên dễ dàng rất nhiều
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
| // Khi một function bị lỗi, promise bị reject (thất hứa) | |
| function chở_gái_vào_hotel() { | |
| return Promise((response, reject) => { | |
| reject("Xin lỗi hôm nay em đèn đỏ"); | |
| }); | |
| } | |
| xin_mẹ_mua_xe | |
| .then(chở_gái_đi_chơi) | |
| .then(chở_gái_vào_hotel) | |
| .then(function() { /*Làm gì đó, ai biết*/ }) | |
| .catch(function(err) { | |
| console.log(err); //"Xin lỗi hôm nay em đèn đỏ" | |
| console.log("xui vl"); | |
| }); | |
3. Xử lý bất đồng bộ
Giả sử bạn muốn 3 hàm AJAX khác nhau. Bạn cần kết quả trả về của 3 hàm này trước khi tiếp tục chạy. Với callback, việc này sẽ khá khó thực hiện. Tuy nhiên, promise hỗ trợ hàm Promise.all, cho phép gộp kết quả của nhiều promise lại với nhau.
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
| // Ba hàm này phải được thực hiện "cùng lúc" | |
| // chứ không phải "lần lượt" | |
| var sờ_trên = new Promise((resolve, reject) => { | |
| resolve("Phê trên"); | |
| }); | |
| var sờ_dưới = new Promise((resolve, reject) => { | |
| resolve("Phê dưới"); | |
| }); | |
| var sờ_tùm_lum = new Promise((resolve, reject) => { | |
| resolve("Phê tùm lum chỗ"); | |
| }); | |
| // Truyền 1 array chứa toàn bộ promise vào hàm Promise.all | |
| // Hàm này trả ra 1 promise, tổng hợp kết quả của các promise đưa vào | |
| Promise.all([sờ_trên, sờ_dưới, sờ_tùm_lum]) | |
| .then(function(result) { | |
| console.log(result); // ["Phê trên", "Phê dưới", "Phê tùm lum chỗ"] | |
| // Phê xong làm gì ai biết | |
| }) |
Tổng kết
Với các ưu điểm của mình, promise đang dần dần thay thế cho callback. Dĩ nhiên là không thay thế hoàn toàn đâu. Với các hàm đơn giản thì dùng callback sẽ ngắn và dễ hiểu hơn promise.
Promise được sử dụng nhiều trong AngularJS và một số module của NodeJS. Nắm vững khái niệm promise sẽ giúp bạn code đỡ cực hơn nhiều.
Hiện tại, các bạn có thể dùng Promise trong trình duyệt Chrome và các bản NodeJS mới nhất. Với các trình duyệt khác, các bạn phải thêm thư viện promise-polyfill thì mới sử dụng được.
Vì khái niệm promise khá là khó tiêu hóa, mình khuyên các bạn nên đọc lại nhiều lần, kết hợp với xem những bài viết khác liên quan tới nó nhé:
Từ coder đến developer - Tôi đi code dạo 
Đọc cười bể ruột 😀 a mà làm thầy giáo chắc học sinh ghiền lắm 😀
LikeLike
sáng tạo. dễ hiểu, thanks admin!!!
LikeLiked by 1 person
A bựa quá nhưng mà e thích
LikeLike
Rất hay, khá dễ hiểu. Nhưng mà ông nên tách code ở mấy đoạn ra làm 2 phần. Ông viết vậy cứ tưởng là xài chung, có đoạn đọc vừa thấy xài call back vừa xài promise =.=, giá như có cái demo trên fiddle thì sẽ rạch ròi hơn nữa. Anyway, this article is helpful !
LikeLike
Greate article, this is easiest article to understand about promise in JS. Thanks
LikeLike
Mình thấy đâu cần thiết dùng đến Promise. Ajax cơ bản đã cung cấp cho chúng ta cơ bất đồng bộ hoặc bất đồng bộ rồi. Mặc định là bất đồng bộ, khi khai báo async: false trong hàm ajax hàm script sẽ dừng lại đợi đoạn code ajax chạy xong mới thực hiện tiếp.
LikeLike
Khi khai báo async:false trong ajax, việc gọi JavaScript sẽ làm toàn bộ giao diện freeze, điều này tạo ra UX vô cùng tệ bạn ạ :D.
LikeLike
: )) cảm ơn a hoàng, a rảnh có thể viết thêm vài bài về javascript nữa đc ko anh
LikeLiked by 1 person
Giong van ha`i vai~. Lau lau vo doc giai xi tret. Ma bua nay de quang cao nhieu qua vay e =.=
LikeLike
khi viết ajax em thường dùng nó với sự kiện nào đó, chẳng hạn như click vào button. có xáy ra trường hợp code chồng chéo đâu nhỉ -_-
LikeLike
Code chồng chéo khi mà bạn có quá nhiều call back lồng nhau.
LikeLike
good example (y)
LikeLike
javascript thuần túy là đồng bộ đơn luồng mà anh, chỉ khi nào mình cần xử lý bất đồng bộ mới dùng thêm promise, chỗ này anh ghi // Do javascript bất đồng bộ, bạn không thể lấy dữ liệu lần lượt kiểu này em chưa hiểu lắm, anh giải thích giúp em
LikeLike
À để anh sửa lại cho dễ hiểu nha 😀
LikeLiked by 1 person
ok anh
LikeLiked by 1 person
Đọc cười vl, dễ hiểu vô cùng, cảm ơn anh
LikeLike