Javascript: SERIES JAVASCRIPT SIDA – PROMISE – HỨA THẬT NHIỀU THẤT HỨA THẬT NHIỀU

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.

// Hàm ajax chạy bất đồng bộ, do đó giá trị xxxImage là undefined
var xxxImage = ajax.get("gaixinh.info");
console.log(xxxImage);

view raw ajax.js hosted with

by GitHub

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.

// 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);
})

view raw ajax_callback.js hosted with

by GitHub

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.

// Do javascript 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
        });
    });
});

view raw callback_hell.js hosted with

by GitHub

Để 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:

The Promise object is used for asynchronous computations. A Promise represents 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.

// 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 ....");
  });

view raw bmw_promise.js hosted with

by GitHub

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.

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));

view raw ajax_promise.js hosted with

by GitHub

Ủ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:

// 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*/ });

view raw callback_hell_promise.js hosted with

by GitHub

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

// 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");
  });
  

view raw promise_catch.js hosted with

by GitHub

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.

// 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
  }) 

view raw promise_all.js hosted with

by GitHub

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ệtChrome 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é:

Javascript

Tuesday, January 16, 2018

SERIES JAVASCRIPT SIDA – PROMISE – HỨA THẬT NHIỀU THẤT HỨA THẬT NHIỀU

Lập trình bất đồng bộ trong Javascript

Promise là chi? Promise là… lời hứa!

Ủa, cũng là dùng callback thôi mà??

1. Promise chaining

2. Bắt lỗi với promise

3. Xử lý bất đồng bộ

Tổng kết

No comments:

Post a Comment

	// Hàm ajax chạy bất đồng bộ, do đó giá trị xxxImage là undefined
	var xxxImage = ajax.get("gaixinh.info");
	console.log(xxxImage);

	// 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);
	})

	// Do javascript 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
	});
	});
	});

	// 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 ....");
	});

	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));

	// 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/ });

	// 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");
	});

	// 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
	})