Trong lập trình web, đôi khi chúng ta cần xử lý việc get dữ liệu từ server cho client. Thông thường chúng ta làm việc đó bằng ajax. Ajax là gì?

Chúng ta sẽ thực hiện một số thao tác gì đó bằng code javascript sau khi get ajax đúng không nào? Cụ thể là ta lấy dữ liệu hoặc dùng data để kiểm tra hay hiển thị lên website. Nhưng có một số trường hợp ajax sẽ xử lý chậm, tức là thời gian chờ để server response về client lâu. Lúc đó, chắc chắn code của chúng ta lỗi, vì một số nguyên nhân nhưng đa số là thiếu biến hoặc biến không có dữ liệu. Code sẽ “chết” ngay!

Để giải quyết vấn đề bất đồng bộ này chúng ta sẽ sử dụng kỹ thuật $.when().then() của js. Nó rất là dễ để hình dung đúng không nào. Dịch nôm na ra thế này: Khi cái gì đó thì đến cái gì đó. hehe

OK, mình vào cụ thể nhé!

Mình sẽ có 1 ajax như sau:

var ajax = function() {
  var d = $.Deferred();
  $.ajax({
    type: "POST",
    url: "abc.php",
    error: function(error) {
        d.resolve( {status: false, message: error} );
    },
    success: function(res) {
        d.resolve( {status: false, message: "Success", data: res} );
    }
  });
  return d.promise();
}

Rồi nhé, đoạn ajax của bạn sẽ trả về một promise sau khi ajax chạy xong. Bây giờ bạn sử dụng $.when cho code của mình như sau.

$.when(ajax).done(function(res1) {
  console.log("Ajax 1 done");
  // Bây giờ code của bạn thực hiện tiếp theo sẽ đặt ở đây
  // Nó giải quyết cho bạn thực hiện một số công việc nhằm đảm bảo ajax đã được xử lý xong.
  // Hạn chế được lỗi.
});

Đơn giản thôi đúng không nào? Các bạn đọc thêm về Promise trong Javascript để hiểu cơ chế bất đồng bộ nhé.

Hẹn các bạn trong những bài viết tiếp theo!