GALAXY TECH
Chuyên gia Công nghệ
Thứ ba, 15/09/2020 | 00:00 GMT+7

Cách sử dụng API tìm nạp JavaScript để lấy dữ liệu

Tất cả ta đều nhớ XMLHttpRequest đáng sợ mà ta đã sử dụng ngày trước để đưa ra yêu cầu, nó liên quan đến một số mã thực sự lộn xộn, nó không mang lại cho ta lời hứa và thành thật mà nói, nó không phải là JavaScript đẹp, phải không? Có thể nếu bạn đang sử dụng jQuery, bạn đã sử dụng cú pháp rõ ràng hơn với jQuery.ajax() .

Giờ thì JavaScript đã được tích hợp sẵn theo cách sạch sẽ. Cùng với đó, API Tìm nạp trở thành một tiêu chuẩn mới để thực hiện yêu cầu server đầy hứa hẹn và tất cả những thứ mà ta đã học được để yêu thích trong nhiều năm.

Làm cách nào để ta sử dụng API Tìm nạp?

Theo một cách rất đơn giản, tất cả những gì bạn thực sự làm là gọi tìm nạp với URL bạn muốn, theo mặc định API Tìm nạp sử dụng phương thức GET, vì vậy, một lệnh gọi rất đơn giản sẽ như sau:

fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function() {
    // Your code for handling the data you get from the API
})
.catch(function() {
    // This is where you run code if the server returns any errors
});

Trông khá đơn giản phải không? Vì vậy, hãy bắt đầu sử dụng nó…

Sử dụng tìm nạp để lấy dữ liệu từ API

Bây giờ ta sẽ xây dựng một yêu cầu GET đơn giản, trong trường hợp này, tôi sẽ sử dụng API user ngẫu nhiên và ta sẽ có 10 user và hiển thị họ trên trang bằng cách sử dụng vanilla JavaScript.

Hãy bắt đầu với HTML, tất cả những gì ta thực sự cần là một tiêu đề và một danh sách không có thứ tự:

  <h1>Authors</h1>
  <ul id="authors"></ul>

Ý tưởng là lấy tất cả dữ liệu từ API user ngẫu nhiên và hiển thị nó trong các mục danh sách bên trong danh sách của tác giả.

Bước đầu tiên là thực sự đặt URL mà ta cần và cũng là danh sách ta sẽ đưa dữ liệu vào, vì vậy trong Javascript, ta viết:

  const ul = document.getElementById('authors'); // Get the list where we will place our authors
  const url = 'https://randomuser.me/api/?results=10'; // Get 10 random users

Tôi đã đặt những điều này thành khuyết điểm để bạn không có nguy cơ thay đổi những điều này trong tương lai và hai điều này nghĩa là hằng số trong tất cả các dự án.
Bây giờ ta đi vào API tìm nạp thực tế:

fetch(url)
  .then(function(data) {
    // Here you get the data to modify as you please
    })
  })
  .catch(function(error) {
    // If there is any error you will catch them here
  });

Ta hãy xem lại mã này, phải không?
Vì vậy, trước tiên, ta đang gọi API Tìm nạp và chuyển cho nó URL mà ta đã xác định là một hằng số ở trên và vì không có thêm tham số nào được đặt nên đây là một yêu cầu GET đơn giản.
Sau đó, ta nhận được một phản hồi nhưng phản hồi mà ta nhận được không phải là JSON mà là một đối tượng với một loạt các phương thức mà ta có thể sử dụng tùy thuộc vào những gì ta muốn làm với thông tin, các phương thức này bao gồm:

  • clone () - Như phương thức ngụ ý phương thức này tạo ra một bản sao của phản hồi.
  • redirect () - Phương thức này tạo một phản hồi mới nhưng với một URL khác.
  • arrayBuffer () - Ở đây, ta trả về một lời hứa giải quyết bằng ArrayBuffer.
  • formData () - Cũng trả về một lời hứa nhưng một lời hứa giải quyết bằng đối tượng FormData.
  • blob () - Đây là một giải quyết với một Blob.
  • text () - Trong trường hợp này, nó giải quyết bằng một chuỗi.
  • json () - Cuối cùng ta có phương thức để giải quyết lời hứa với JSON.

Nhìn vào tất cả các phương thức này, phương thức ta muốn là JSON vì ta muốn xử lý dữ liệu của bạn như một đối tượng JSON, vì vậy ta thêm:

  fetch(url)
  .then((resp) => resp.json()) // Transform the data into json
  .then(function(data) {
    // Create and append the li's to the ul
    })
  })

Bây giờ ta hãy đến phần ta tạo các mục danh sách, vì điều đó, tôi đã tạo hai hàm trợ giúp ở đầu file của bạn chỉ để làm cho mã đơn giản hơn xuống dòng:

  function createNode(element) {
    return document.createElement(element); // Create the type of element you pass in the parameters
  }

  function append(parent, el) {
    return parent.appendChild(el); // Append the second parameter(element) to the first one
  }

Tất cả những chức năng này làm là thêm và tạo các phần tử như bạn thấy .
Khi điều này được thực hiện, ta có thể chuyển sang giải quyết lời hứa của ta và thêm mã ta cần để nối các mục danh sách này vào danh sách không có thứ tự của ta :

then(function(data) {
    let authors = data.results; // Get the results
    return authors.map(function(author) { // Map through the results and for each run the code below
      let li = createNode('li'), //  Create the elements we need
          img = createNode('img'),
          span = createNode('span');
      img.src = author.picture.medium;  // Add the source of the image to be the src of the img element
      span.innerHTML = `${author.name.first} ${author.name.last}`; // Make the HTML of our span to be the first and last name of our author
      append(li, img); // Append all our elements
      append(li, span);
      append(ul, li);
    })
  })

Vì vậy, trước tiên ta xác định các tác giả là phản hồi mà ta nhận được từ yêu cầu, sau đó ta ánh xạ tất cả các tác giả và đối với mỗi tác giả, ta tạo một mục danh sách, một khoảng và một hình ảnh.
Trong nguồn hình ảnh, ta đặt hình ảnh của user , HTML của khoảng cách sẽ là họ và tên được nội suy và sau đó tất cả những gì ta cần làm là thêm điều này cho cha mẹ hợp lệ của họ và voilá, yêu cầu HTTP của ta trong JavaScript vani là xong và trả lại nội dung nào đó cho HTML.

Để xử lý lỗi của ta , tất cả những gì tôi sẽ làm là console ghi lại lỗi khi ta nhận được nó nhưng bạn có thể làm bất cứ điều gì bạn muốn với lỗi chẳng hạn như thêm nó vào HTML với các chức năng ta đã tạo. Đây là mã đầy đủ của yêu cầu nhỏ của ta :

  function createNode(element) {
      return document.createElement(element);
  }

  function append(parent, el) {
    return parent.appendChild(el);
  }

  const ul = document.getElementById('authors');
  const url = 'https://randomuser.me/api/?results=10';
  fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let authors = data.results;
    return authors.map(function(author) {
      let li = createNode('li'),
          img = createNode('img'),
          span = createNode('span');
      img.src = author.picture.medium;
      span.innerHTML = `${author.name.first} ${author.name.last}`;
      append(li, img);
      append(li, span);
      append(ul, li);
    })
  })
  .catch(function(error) {
    console.log(error);
  });

Xử lý các yêu cầu khác như POST

Vì vậy, đây là yêu cầu GET, yêu cầu mặc định cho hàm tìm nạp nhưng tất nhiên ta có thể thực hiện tất cả các loại yêu cầu khác và cũng có thể thay đổi tiêu đề và gửi dữ liệu, tất cả những gì ta cần cho điều này là đặt đối tượng của ta và chuyển nó như đối số thứ hai của hàm tìm nạp:

const url = 'https://randomuser.me/api';
// The data we are going to send in our request
let data = {
    name: 'Sara'
}
// The parameters we are gonna pass to the fetch function
let fetchData = { 
    method: 'POST', 
    body: data,
    headers: new Headers()
}
fetch(url, fetchData)
.then(function() {
    // Handle response you get from the server
});

Bạn cũng có thể xác định bộ nhớ cache, chế độ và tất cả những thứ bạn quen xác định trong các yêu cầu ĐĂNG của bạn .

Để tạo đối tượng của ta và sử dụng hàm tìm nạp, ta cũng có một tùy chọn khác và đó là sử dụng hàm tạo yêu cầu để tạo đối tượng yêu cầu của ta , vì vậy thay vì xác định đối tượng trong chính hàm, ta thực hiện điều này:

const url = 'https://randomuser.me/api';
// The data we are going to send in our request
let data = {
    name: 'Sara'
}
// Create our request constructor with all the parameters we need
var request = new Request(url, {
    method: 'POST', 
    body: data, 
    headers: new Headers()
});

fetch(request)
.then(function() {
    // Handle response we get from the API
})

Bạn có thể sử dụng cách bạn thấy phù hợp nhất để xây dựng đối tượng yêu cầu của bạn .

Lời kết

Mặc dù API Tìm nạp chưa được hỗ trợ bởi tất cả các trình duyệt (hiện tại Safari không hỗ trợ nó) nhưng nó là sự thay thế tuyệt vời cho XMLHttpRequest mà ta rất cần trong cuộc sống của bạn .
Ngoài ra còn có polyfills nếu bạn thực sự muốn sử dụng nó trong các dự án chuyên nghiệp hơn.

Tags:

Các tin liên quan

Lời hứa của JavaScript dành cho người giả
2020-09-15
Sao chép các đối tượng trong JavaScript
2020-09-15
Cách mã hóa và giải mã chuỗi với Base64 trong JavaScript
2020-09-15
Toán tử đơn nguyên JavaScript: Đơn giản và hữu ích
2020-09-15
Hiểu Hoisting trong JavaScript
2020-09-15
5 Mẹo để Viết Điều kiện Tốt hơn trong JavaScript
2020-09-15
Hiểu Vòng lặp sự kiện, Gọi lại, Hứa hẹn và Không đồng bộ / Chờ đợi trong JavaScript
2020-09-10
Bốn phương pháp để tìm kiếm thông qua các mảng trong JavaScript
2020-09-09
Sử dụng phương thức Array.find trong JavaScript
2020-09-09
split () Phương thức chuỗi trong JavaScript
2020-09-09