Tối ưu hóa Code bất đồng b�?Javascript với Promise Archives - Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển

ThanNT (PRHO - CTV) — Thu, 16 Nov 2023 18:27:03 +0000

Javascript là ngôn ng�?lập trình hàng đầu cho c�?front end và back end với tính linh hoạt và d�?học. Tuy nhiên, việc viết mã đ�?vừa chạy tốt mà còn d�?bảo trì và m�?rộng là một thách thức đối với lập trình viên. Trong bài viết này, chúng ta s�?khám phá cách s�?dụng Promise đ�?tối ưu hóa code bất đồng b�?trong Javascript, giúp code tr�?nên sạch s�?và d�?đọc hơn.

Tối ưu hóa Code bất đồng b�?Javascript với Promise

Tại sao Promise là một lựa chọn tuyệt vời?

Promise cung cấp một cách tiếp cận mạch lạc và hiệu qu�?đ�?x�?lý các tác v�?bất đồng b�?trong Javascript. Điều này giúp giảm thiểu vấn đ�?“callback hell”, một hiện tượng ph�?biến khi s�?dụng các phương thức gọi lại truyền thống.

Xét một trường hợp c�?th�? bạn cần truy xuất d�?liệu t�?API (ví d�? //catfact.ninja/fact) và hiển th�?nó trên giao diện. Bằng cách s�?dụng Promise thay vì phương thức callback thông thường, mã nguồn của bạn không ch�?gọn gàng hơn mà còn d�?đọc và bảo trì hơn.

{

“fact”: “In Japan, cats are thought to have the power to turn into super spirits when they die. This may be because according to the Buddhist religion, the body of the cat is the temporary resting place of very spiritual people.i”,

“length”: 220

}

Cách s�?dụng Promise

Hãy so sánh hai cách tiếp cận: s�?dụng callback thông thường và s�?dụng Promise. Chúng ta s�?thấy rõ s�?khác biệt v�?cách viết mã, cũng như cách x�?lý các trường hợp thành công và thất bại trong từng phương pháp.

Bình thường, nếu bạn s�?dụng Jquery đ�?gọi API s�?dùng callback như sau:

$.getJSON(‘//catfact.ninja/fact’,function(data)

{

console.log(data.fact)

$(‘body’).append(data.fact);

});

Đoạn code rất đơn giản, chúng ta s�?dụng Jquery đ�?gọi tới API, khi nào API phản hồi và tr�?v�?kết qu�?s�?được đẩy vào trong callback function(data). Với d�?án nh�?thì đoạn code không vấn đ�?gì, nhưng nếu phát sinh yêu cầu phải gọi thêm API ngay trong callback. Điều này s�?dẫn tới vấn đ�?callback hell.

Đ�?code được được “đẹp�?hơn, chúng ta chuyển sang s�?dụng promise như sau:

var promise = $.getJSON(‘//catfact.ninja/fact’);

promise.done(function(data)

{

console.log(data.fact)

$(‘body’).append(data.fact);

});

V�?cơ bản thì nó tương t�?như dùng callback. Trường hợp trên là nếu request thành công, còn nếu thất bại promise s�?có hàm đ�?x�?lý.

var promise = $.getJSON(‘//catfact.ninja/fact’);

promise.done(function(data)

{

console.log(data.fact)

$(‘body’).append(data.fact);

});

promise.fail(function()

{

$(‘body’).append(‘

Đã gặp lỗi, đ�?ngh�?th�?lại!

’);

});

Có th�?viết lại như sau:

$.getJSON(‘//catfact.ninja/fact’)

.done(function(data)

{

console.log(data.fact)

$(‘body’).append(data.fact);

})

.fail(function()

{

$(‘body’).append(‘

Đã gặp lỗi, đ�?ngh�?th�?lại!

’);

});

Tái s�?dụng mã với Promise

Một lợi ích đặc biệt khác của Promise là kh�?năng tạo ra mã nguồn có tính tái s�?dụng cao. Việc tạo các hàm gọi API riêng biệt tr�?v�?đối tượng Promise giúp tăng cường tính modular và d�?dàng quản lý.

var catfact = {

html : function() {

return $.getJSON(‘//catfact.ninja/fact’).then(function(data)

{

return data.fact;

});

} }

Đối tượng catfact lúc này có một thuộc tính html là một promise object. Điều thú v�?là nếu viết như vậy khi cần phải hiển th�?ra giao diện chúng ta không quan tâm khi nào thì hàm gọi API x�?lý xong mà ch�?quan tâm tới việc hiển th�?nó như th�?nào.

catfact.html().done(function(html) {

$(“body”).append(html);

});

Hàm then() của promise cho phép chúng ta sửa đổi kết qu�?của một promise và chuyển nó cho trình x�?lý tiếp theo.

Kết hợp nhiều Promise

Kh�?năng kết hợp nhiều Promise là một trong những tính năng nổi bật nhất. Chúng ta s�?xem xét cách thức hoạt động của $.when() trong việc x�?lý đồng thời nhiều tác v�?bất đồng b�? Ví d�?

var firstData = null;

var secondData = null;

var responseCallback = function() {

if (!firstData || !secondData)

return;

// do something

}

$.get(“//example.com/first”,function(data)

{

firstData = data;

responseCallback();

});

$.get(“//example.com/second”, function(data)

{

secondData = data;

responseCallback();

});

Khi s�?dụng hàm when() của Promise đ�?gọi một handler khi c�?hai request hoàn thành.

var firstPromise = $.get(“//example.com/first”);

var secondPromise = $.get(“//example.com/second”);

$.when(firstPromise, secondPromise).done(function(firstData, secondData) {

// do something

});

Promise không ch�?giúp mã nguồn của bạn tr�?nên d�?đọc và bảo trì hơn mà còn mang lại lợi ích trong việc xây dựng các ứng dụng Javascript mạnh m�?và linh hoạt. Hy vọng rằng, với những thông tin và mẹo được chia s�? các bạn s�?có thêm công c�?đ�?tối ưu hóa các d�?án của mình. Chúc các bạn thành công!

Giảng viên Trần Văn K�?/strong>
B�?môn Công ngh�?thông tin
Trường Cao đẳng FPT M?ng c�� c??c b��ng ?�� cơ s�?TP HCM

The post Mẹo hay tối ưu hóa Code bất đồng b�?Javascript với Promise appeared first on Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển.