Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

JavaScript Fetch: Hướng Dẫn Sử Dụng

Bạn có biết rằng có thể tạo yêu cầu web trong JavaScript thuần túy? Đúng vậy, bạn không cần cài đặt bất kỳ thư viện nào để tạo yêu cầu web. Không chỉ vậy: chúng ta không nói về công cụ XMLHttpRequest cũ, phức tạp.

Fetch API cho phép bạn tạo yêu cầu Ajax trong JavaScript đơn giản. Đây là công cụ hữu ích để truy xuất dữ liệu và thay đổi dữ liệu trên máy chủ web.

Trong hướng dẫn này, chúng ta sẽ thảo luận Fetch API là gì và cách tạo yêu cầu web dùng API. Chúng ta sẽ nói qua hai ví dụ: yêu cầu GET và yêu cầu POST.

Fetch API Là Gì?

JavaScript có khả năng gửi yêu cầu mạng từ lâu. Công cụ XMLHTTPRequest cung cấp tài nguyên cần thiết để truy xuất dữ liệu từ máy chủ và cập nhật thông tin từ máy chủ.

Mặc dù công cụ này hiệu quả, nhưng cũng khá dài dòng và phức tạp để dùng. Fetch, mặt khác, là giải pháp mới làm cho việc tạo yêu cầu web đơn giản hơn.

Fetch API được hỗ trợ trong tất cả trình duyệt hiện đại. Điều này nghĩa là một khi bạn học cách dùng nó, bạn không phải lo lắng về tương thích trình duyệt khi tạo yêu cầu web.

Cách Tạo Yêu Cầu GET Dùng Fetch

Cách tốt nhất minh họa cách fetch hoạt động là qua ví dụ. Trong hướng dẫn này, chúng ta sẽ dùng dịch vụ web JSONPlaceholder. Đây là API đi kèm dữ liệu giả định sẵn có để test yêu cầu web.

Mã sau tạo yêu cầu GET truy xuất bài đăng đầu tiên từ JSONPlaceholder:

fetch('https://jsonplaceholder.typicode.com/posts/1') 
 .then(response => response.json()) 
 .then(json => console.log(json))

Mã trả về:

{ body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto", id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", userId: 1 }

Phân tích mã. Trên dòng đầu, dùng phương thức fetch() khởi tạo yêu cầu web đến API JSONPlaceholder. Sau đó dùng phương thức .then() nói cho mã biết làm gì sau khi yêu cầu web hoàn tất.

Trong .then() đầu tiên, chuyển phản hồi từ API sang JSON. Điều này làm dữ liệu dễ đọc hơn. Dùng .then() khác để ghi phản hồi ra bảng điều khiển. Điều này cho thấy bài đăng ID 1 từ API JSONPlaceholder.

Cách Tạo Yêu Cầu POST

GET không phải loại yêu cầu duy nhất bạn có thể tạo với Fetch API. Cũng có chức năng hỗ trợ POST, PUT, và DELETE. Cú pháp cho các loại này giống nhau, nên chúng ta chỉ đi qua một ví dụ: cách tạo yêu cầu POST.

Khi tạo yêu cầu POST, PUT, hoặc DELETE, thường có ba thông tin cần chỉ định:

  • URL bạn tạo yêu cầu đến.
  • Phương thức dùng để tạo yêu cầu (trong trường hợp này, POST)
  • Dữ liệu bạn muốn gửi đến máy chủ

Đoạn mã sau tạo bình luận mới dùng API JSONPlaceholder:

const data = { 
    name: "Leslie Tudor", 
    email: "leslie.tudor@email.com", 
    body: "This is an example post by Career Karma!", 
    postId: 1 
} 
const options = { 
    method: "POST", 
    body: JSON.stringify(data), 
    headers: { 
        "Content-Type": "application/json" 
    } 
}; 
fetch('https://jsonplaceholder.typicode.com/comments', options) 
 .then(response => response.json()) 
 .then(json => console.log(json))

Mã trả về bài đăng mới tạo ở định dạng JSON:

{ body: "This is an example post by Career Karma!", email: "leslie.tudor@email.com", id: 501, name: "Leslie Tudor", postId: 1 }

Trong mã, đầu tiên khai báo đối tượng data. Đối tượng này lưu dữ liệu muốn gửi đến máy chủ. Trong trường hợp này, gửi dữ liệu về bình luận của người dùng Leslie Tudor.

Sau đó khai báo đối tượng khác lưu tùy chọn liên quan đến yêu cầu fetch. Đối tượng này chỉ định phương thức dùng (POST), dữ liệu muốn gửi, cũng như header muốn gửi.

Cuối cùng, dùng phương thức fetch() thực sự tạo yêu cầu. Giống ví dụ đầu, dùng .then() để nhận phản hồi, chuyển sang JSON, sau đó in ra bảng điều khiển.

Cách Xử Lý Lỗi Dùng JavaScript Fetch

Thực tế đáng buồn là một số yêu cầu web không hoạt động như ý định. Có thể dữ liệu cấu trúc không đúng, hoặc có vấn đề máy chủ. Quan trọng là dự đoán các sự kiện này trước để xử lý nếu và khi chúng xảy ra.

Có phương thức .catch() dùng để bắt bất kỳ lỗi nào được trả về bởi mã. Kết hợp với phương thức Promise.reject(), bạn có thể dùng nó xử lý lỗi:

fetch('https://jsonplaceholder.typicode.com/comments/999, options) 
 .then(response => { 
    if (response.ok) { 
        console.log(response.json()); 
        return response.json(); 
    } else { 
        return Promise.reject({ statusText: response.statusText }) 
    } 
 }) 
 .catch(error => console.log("ERROR:", error.statusText));

Mã trả về:

"ERROR:", "Not Found"

Trong mã, dùng phương thức response.ok kiểm tra xem yêu cầu có thành công không. Trong ví dụ này, thử truy xuất bình luận không tồn tại, bình luận #999. Điều này khiến nội dung câu lệnh else thực thi, trả về promise bị từ chối. Promise này chứa thông báo lỗi từ API JSONPlaceholder.

Sau đó dùng câu lệnh .catch() nhận lỗi và in ra bảng điều khiển.

Kết Luận

Fetch API làm cho việc tạo yêu cầu web trong JavaScript trở nên dễ dàng. API là một phần của JavaScript thuần túy nên không cần cài đặt hoặc tham chiếu thư viện. Hơn nữa, bạn có thể dùng Fetch API tạo yêu cầu GET, POST, PUT, và DELETE.

Bây giờ bạn đã sẵn sàng bắt đầu tạo yêu cầu web dùng Fetch API như nhà phát triển chuyên nghiệp!

No