GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 05/10/2017 | 00:00 GMT+7

Một lớp lót API tìm nạp

Tìm nạp là một API mới, dựa trên lời hứa cho phép ta thực hiện các yêu cầu Ajax mà không gặp phải tất cả các phiền phức liên quan đến XMLHttpRequest . Như bạn sẽ thấy trong bài đăng này, Tìm nạp rất dễ sử dụng và làm việc và đơn giản hóa đáng kể việc tìm nạp tài nguyên từ một API. Thêm vào đó, nó hiện được hỗ trợ trong tất cả các trình duyệt hiện đại, vì vậy việc sử dụng Tìm nạp thực sự là một điều không cần bàn cãi.

Nhận yêu cầu

Hãy chứng minh một yêu cầu đơn giản GET bằng cách và GET mình một số dữ liệu giả từ JSONPlaceholder API:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(res => res.map(user => user.username))
  .then(userNames => console.log(userNames));

Và kết quả sẽ là một mảng tên user như thế này:

["Bret", "Antonette", "Samantha", "Karianne", "Kamren", "Leopoldo_Corkery", "Elwyn.Skiles", "Maxime_Nienow", "Delphine", "Moriah.Stanton"]

Vì ta mong đợi một phản hồi JSON, trước tiên ta cần gọi phương thức json () để biến đổi đối tượng Response thành một đối tượng mà ta có thể tương tác. Văn text() được dùng nếu ta mong đợi một phản hồi XML.

Đăng, Đặt và Xóa Yêu cầu

Để thực hiện các yêu cầu khác ngoài GET , hãy chuyển vào một đối tượng làm đối số thứ hai cho lệnh gọi tìm nạp với phương thức để sử dụng cũng như bất kỳ tiêu đề cần thiết nào và nội dung của yêu cầu:

const myPost = {
  title: 'A post about true facts',
  body: '42',
  userId: 2
}

const options = {
  method: 'POST',
  body: JSON.stringify(myPost),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://jsonplaceholder.typicode.com/posts', options)
  .then(res => res.json())
  .then(res => console.log(res));

JSONPlaceholder gửi lại cho ta dữ liệu ĐÃ ĐĂNG với một ID đính kèm:

Object {
  body: 42,
  id: 101,
  title: "A post about true facts",
  userId: 2
}

Bạn sẽ lưu ý nội dung yêu cầu cần phải được chuỗi . Các phương pháp khác mà bạn có thể sử dụng để tìm nạp cuộc gọi là DELETE , PUT , HEAD và OPTIONS

Xử lý lỗi

Có một vấn đề (ý định chơi chữ 😉) khi nói đến xử lý lỗi với API Tìm nạp: nếu yêu cầu chạm đúng vào điểm cuối và quay lại, sẽ không có lỗi nào được đưa ra. Điều này nghĩa là việc xử lý lỗi không đơn giản như chuỗi một cuộc gọi bắt ở cuối chuỗi hứa tìm nạp của bạn.

Tuy nhiên, may mắn thay, đối tượng phản hồi từ một cuộc gọi tìm nạp có một thuộc tính ok sẽ là true hoặc false tùy thuộc vào sự thành công của yêu cầu. Sau đó, bạn có thể sử dụng Promise.reject () nếu ok là false:

fetch('https://jsonplaceholder.typicode.com/postsZZZ', options)
  .then(res => {
    if (res.ok) {
      return res.json();
    } else {
      return Promise.reject({ status: res.status, statusText: res.statusText });
    }
  })
  .then(res => console.log(res))
  .catch(err => console.log('Error, with message:', err.statusText));

Với ví dụ trên, lời hứa của ta sẽ từ chối vì ta đang gọi một điểm cuối không tồn tại. Lệnh gọi bắt chuỗi sẽ được thực hiện và thông tin sau sẽ được xuất:

"Error, with message: Not Found"

Tìm nạp + Không đồng bộ / Chờ đợi

Kể từ khi Fetch là một API hứa hẹn dựa trên, sử dụng chức năng async là một lựa chọn tuyệt vời để làm cho mã của bạn dễ dàng hơn để lý do về và đồng bộ-looking. Ví dụ ở đây là một hàm async / await thực hiện một yêu cầu GET đơn giản và extract tên user từ phản hồi JSON trả về để sau đó ghi lại kết quả tại console :

async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);
  let data = await res.json();

  data = data.map(user => user.username);

  console.log(data);
}

fetchUsers('https://jsonplaceholder.typicode.com/users');

Hoặc, bạn có thể chỉ trả về một lời hứa từ hàm async / await của bạn và sau đó bạn có khả năng tiếp tục chuỗi sau đó gọi sau khi gọi hàm:

async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);
  const data = await res.json();

  return data;
}

fetchUsers('https://jsonplaceholder.typicode.com/users')
  .then(data => {
    console.log(data.map(user => user.username));
  });

Gọi json () trả về một lời hứa vì vậy trong ví dụ trên, khi ta return data trong hàm không đồng bộ, ta sẽ trả về một lời hứa.

Và , bạn cũng có thể gặp lỗi nếu kết quả ok của phản hồi là sai và bắt lỗi như bình thường trong chuỗi hứa hẹn của bạn:

async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);

  if (!res.ok) {
    throw new Error(res.status); // 404
  }

  const data = await res.json();
  return data;
}

fetchUsers('https://jsonplaceholder.typicode.com/usersZZZ')
  .then(data => {
    console.log(data.map(user => user.website));
  })
  .catch(err => console.log('Ooops, error', err.message));

Ooops, error 404

Polyfills

  • Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, như Internet Explorer 11, bạn cần sử dụng polyfill Tìm nạp như thế này từ Github .
  • Nếu bạn cần sử dụng Tìm nạp trong Node.js, hai trong số các tùy chọn phổ biến nhất là isomorphic-fetch và node-fetch .

Hỗ trợ trình duyệt

Tôi có thể sử dụng tìm nạp không? Dữ liệu về hỗ trợ tính năng tìm nạp trên các trình duyệt chính từ caniuse.com.

Tags:

Các tin liên quan