Giao tiếp API JQuery vs Vanilla JavaScript có gì khác?

Posted on by mtoplistChuyên mục:Top List

Thời gian đọc:

3

phút

Chào các bạn lại là mình đây 😀 😀 . Sau khi hướng dẫn các bạn xong về cách tạo social button thì mình tiếp tục viết thêm bài nêu rõ sự khác biệt khi giao tiếp API bằng JQuery và Vanilla JavaScript. Bài này mình sẽ không đào sâu và giải thích API là gì mà sẽ nói rõ về cách thức giao tiếp API giữa JQuery và Vanilla JavaScript.

Giao tiếp API bằng JQuery

Trước tiên mình có link API được lưu vào biến apiUrlWolfactive. Sau đó mình bắt đầu thực hiện gọi API trên method GET

 $.ajax({
      type : "GET",
      dataType : "json",
      async: false,
      url : apiUrlWolfactive,
      data : {},
      success: function(response) { console.log(response)},
      error: function(error) { console.log(error)}
});

Vậy là đã xong phương thức giao tiếp của JQuery với API. Tuy nhiên nếu các bạn muốn thực hiện một function khác sau nhân giá trị response thì như thế nào? Có thể một số bạn sẽ làm như sau:

 $.ajax({
      type : "GET",
      dataType : "json",
      async: false,
      url : apiUrlWolfactive,
      data : {},
      success: function(response) { console.log(response)},
      error: function(error) { console.log(error)}
});
alert("Thông báo đã nhận được dữ liệu nha!!!");

Các bạn để code như thế này thì vẫn chạy nhưng alert sẽ có trước khi console.log biến response. Vậy chúng ta sẽ sửa đoạn code trên lại như sau:

 $.ajax({
      type : "GET",
      dataType : "json",
      async: false,
      url : apiUrlWolfactive,
      data : {},
      success: function(response) { console.log(response)},
      error: function(error) { console.log(error)}
 })
 .then(alert("Thông báo đã nhận được dữ liệu nha!!!"));

Thì lúc này sau khi giao tiếp với API và nhận giá trị response trả về thì alert sẽ hiện thông lên. Như vậy mình đã tóm gọn sơ qua về phần giao tiếp API của JQuery vậy còn Vanilla JavaScript thì sẽ như thế nào?? Chúng ta cùng qua mục tiếp theo.

wolfactive-api-jquery-vanilla-javascript

Giao tiếp API bằng Vanilla JavaScript

Cũng như trên mình cũng lưu link API vào biến apiUrlWolfactive. Sau đó mình bắt đầu thực hiện lấy data với method GET

fetch(apiUrlWolfactice)
      .then(response => response.json())
      .then( data => console.log(data))
      .catch(err => console.log(err));

Ở đây mình dùng fetch Api của Vanilla JavaScript để giao tiếp. Như các bạn thấy các viết nó tường minh hơn đễ hiểu hơn, ngắn gọn hơn. Một phần cũng vì fetch của Vanilla JavaScript ra đời sau Ajax của Jquery. Nhìn vào đoạn code các cũng thấy rằng sau khi mình fetch link api. Mình cũng phải hứng dữ liệu trả về của API. Để giao tiếp không bị lỗi khi truyến bất đồng bộ như thế này. Chúng ta sẽ có 3 cách để xử lý:

  • Callback function
  • Promise
  • Async Await

Thì cách hiện tại mình đang dùng là promise trong Vanilla JavaScript. Mỗi lần mình .then() thì function trong .then() sẽ thực thi sau khi có giá trị trả về. Tuy nhiên giá trị trả về không phải là data Api muốn trả lại mà sẽ là 1 object  response , các bạn console.log ngay .then đầu tiên sẽ thấy được điều đó. Để lấy được giá trị api muốn trả về chúng ta sẽ .json() của object response thì  ở .then() kế tiếp thì giá trị tra về sẽ là data. Lúc này bạn có thể sử dụng data mà api muốn trả về rồi. Tuy nhiên vậy để chờ sau khi .then() thứ 2 xử lý để thực hiện tiếp function khác thì sao ?? thì các bạn chỉ cần then() thêm lần nữa để thực thi lệnh

fetch(apiUrlWolfactice)
      .then(response => response.json())
      .then( data => console.log(data))
      .then(alert("Thông báo đã nhận được dữ liệu nha!!!"))
      .catch(err => console.log(err));

Và khi bạn muốn .then() thứ 3 được sử dụng data của .then() thứ 2 thì các bạn phải return data để .then() thứ ba hứng đươc giá trị đó. Vậy là phần giao tiếp api ở Vanilla JavaScript đã xong.

Tổng kết

Vừa rồi mình và các bạn cùng điểm qua cách thức gọi api giữa JQuery và Vanilla JavaScript. Theo quan điểm của mình thì mình đánh giá cao fetch api của vanilla javascript. Vì cách viết ngắn gọn, dễ hiểu và tường mình. Và nguyên nhân sâu xa hơn nữa là có thể bỏ được thư viện Jquery giúp tăng hiệu suất load web nói chung cũng như là giảm được mớ cồng kềnh trong file .js 😀 😀 Đây là quan điểm của mình thôi. Bạn nào có ý kiến hay quan điểm nào khác thì có thể comment ngay bên dưới bài share ở facebook để trao đổi dễ hơn. Cảm ơn các bạn đã theo dõi.

mtoplist