Video học lập trình mỗi ngày

Ajax jquery không còn lạ gì với anh em developers nữa, những có nhiều thứ tôi nghĩ sẽ có nhiều bạn còn chưa biết và chưa sử dụng bao giờ như sử dụng ajax with Promises and deferred objects? Làm thể nào gọi Multiple AJAX một cách tốt nhất? Thì trong bài viết này sẽ giới thiệu sâu và kỹ hơn về ajax. 

# Giới Thiệu

Đầu tiên Ajax trong Jquery là gì? thì cái này mình chịu =]], các bạn có thể tìm hiểu thêm tại đây 

Cấu trúc cơ bản của một AJAX - by using the $.ajax() function:

$.ajax({
  data: someData,
  dataType: 'json',
  url: '/path/to/script',
  success: function(data, textStatus, jqXHR) {
  // When AJAX call is successfuly
    console.log('AJAX call successful.');
    console.log(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
   // When AJAX call has failed
    console.log('AJAX call failed.');
    console.log(textStatus + ': ' + errorThrown);
  },
  complete: function() {
  // When AJAX call is complete, will fire upon success or when error is thrown
    console.log('AJAX call completed');
  };
})

Đó là cấu trúc cơ bản của một $.ajax() function. Rất đơn giản và hiệu quả. Nếu bạn nào quen thuộc thì cảm thấy nó thân thiện và dễ sử dụng. Nhưng hãy đoc tiếp với promise có thể bạn sẽ thay đổi cách nghĩ. 

#Promises and deferred objects

Đọc thêm deferred objects trong jquery 

Với Promises và deferred objects thì có những thay đổi mới trong ajax function như: 

• .done() thay thế cho .success() 
• .fail() thay thế cho .error() 
• .always() thay thế cho .complete()

Cú pháp như sau:

$.ajax({
  data: someData,
  dataType: 'json',
  url: '/path/to/script'
}).done(function(data) {
  // If successful
  console.log(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
  // If fail
  console.log(textStatus + ': ' + errorThrown);
})

Có vẻ ngắn gọn và thân thiện hơn đối với những bạn đã quen với Promises như tôi phải không? 

Thậm chí tốt hơn nguyên bản của Ajax thì chúng ta có thể gắn $.ajax function với một variable(biến) như thế này

var ajaxCall = $.ajax({
  context: $(element),
  data: someData,
  dataType: 'json',
  url: '/path/to/script'
});

ajaxCall.done(function(data) {
  console.log(data);
});

Một khi bạn đã quen lập trình với Promise thì .on() là một trong những callback() khá tốt, chúng ta có thể tách riêng biệt việc xử lý kết quả một cách rõ ràng, đó cũng là một lợi thế về cách lập trình trong ứng dụng. Không giống như nguyên bản của $.ajax function thì tất cả callback() được lồng vào nhau, nhìn vào không thân thiện chút nào phải không? đặt biệt là trong môi trường mà có thể gọi nhiều function không đồng bộ. 

Chú ý: Promises and deferred objects, được tích hợp kể từ jQuery v1.5 trở đi. 

Phần thưởng cho những bạn đọc tới đây đó là việc gọi Multiple Ajax giờ đây không còn khó xử như trước nữa, bới vì với promise thì việc gọi nhiều ajax trở nên dễ dàng hơn bao giờ hết, với .when() thì các bạn chỉ cần lắng nghe status trả về mà thôi. 

Ví dụ;

var a1 = $.ajax({...}),
    a2 = $.ajax({...});

$.when(a1, a2).done(function(r1, r2) {
  // Each returned resolve has the following structure:
  // [data, textStatus, jqXHR]
  // e.g. To access returned data, access the array at index 0
  console.log(r1[0]);
  console.log(r2[0]);
});

Quá tuyệt vời đúng không khi có thể xử lý song song nhiều ajax. Vậy nếu trường hợp xử lý theo tuần tự thì như thế nào? 

Ví dụ cuộc gọi Ajax thứ hai phụ thuộc vào cuộc gọi Ajax thứ nhất, để lấy ID thì thì có thể thực hiện được không? Xin trả lời là có, và nó còn tuyệt với hơn khi có .then() thậm chí là .done() trong Promiess. 

Cú pháp:

var a1 = $.ajax({
      url: '/path/to/file',
      dataType: 'json'
    }),
    a2 = a1.then(function(data) {
      // .then() returns a new promise
      return $.ajax({
        url: '/path/to/another/file',
        dataType: 'json',
        data: data.sessionID
      });
    });

a2.done(function(data) {
  console.log(data);
})

#Kết Luận 

Có thể nhiều bạn chưa biết có những cách sử dụng AJAX hiệu quả như thế này. Và bài viết này đã giúp bạn có thêm kiến thức để có thể sự dụng linh hoạt hơn trong những trường hợp cụ thể trong từng dự án của mình tham gia. Nếu bạn cảm thấy hữu ích thì hãy share cho các bạn khác để có được những kiến thức bổ ích hơn. 

Cảm ơn các bạn đã đọc. 

repush: https://ramsatt.com/2019/07/21/writing-better-ajax/