Xử lý bất đồng bộ trong JQuery với when then

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!

0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest

0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

More Post

MySQL Procedure là gì?

Procedure trong MySQL là một tập các khai báo sql được lưu trữ trong cơ sở dữ liệu(database) thực...

Dependency Injection và Service Container trong Laravel

Service Container trong Laravel như là trung tâm của một ứng dụng, có mặt mọi nơi trong dự án,...

Laravel Swagger là gì? Hướng dẫn tạo Swagger trong Laravel

Swagger là một framework giúp bạn định nghĩa, mô tả các API trong dự án một cách trực quan, rõ...

2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x