Phiên bản tiếng Anh: https://www.javascripttutorial.net/javascript-fetch-api/

Các Fetch API là một giao diện hiện đại cho phép bạn thực hiện HTTP yêu cầu đến các máy chủ từ các trình duyệt web.

Nếu bạn đã làm việc với đối tượng XMLHttpRequest( XHR), API Tìm nạp có thể thực hiện tất cả các tác vụ với tư cách là đối tượng XHR.

Ngoài ra, API Tìm nạp đơn giản và gọn gàng hơn nhiều. Nó sử dụng Promiseđể cung cấp các tính năng linh hoạt hơn để thực hiện các yêu cầu đến máy chủ của trình duyệt web.

Phương pháp fetch()có sẵn trong phạm vi toàn cầu hướng dẫn các trình duyệt web gửi yêu cầu đến một URL.

Yêu cầu: Gửi yêu cầu

Các fetch()chỉ yêu cầu một tham số đó là địa chỉ URL của tài nguyên mà bạn muốn tìm kiếm:

Phương thức fetch()trả về một Promise(một lời hứa) để bạn có thể sử dụng các phương thức then()và catch():

Khi yêu cầu hoàn tất, tài nguyên sẽ có sẵn. Tại thời điểm đó, ý Promisechí được giải quyết cho một đối tượng Response.

Đối tượng Responselà trình bao bọc API cho tài nguyên được tìm kiếm. Đối tượng Responsecó một số thuộc tính và phương thức hữu ích để kiểm tra phản hồi.

Phản hồi: Đọc câu trả lời

Nếu nội dung phản hồi ở định dạng văn bản thô, bạn có thể sử dụng phương pháp này text(). Phương thức text()trả về một phương thức phân Promisegiải với nội dung đầy đủ của tài nguyên được tìm kiếm:

Trong thực tế, bạn thường sử dụng async/awaitphương pháp này fetch(), như sau:

Ngoài ra để phương pháp này text(), các đối tượng Responsecó phương pháp khác như json(), blob(), formData()và arrayBuffer()để đối phó với các loại dữ liệu của họ.

Xử lý mã trạng thái phản hồi

Đối tượng Responsecung cấp mã tình huống và văn bản tình huống thông qua các thuộc tính statusvà statusText. Khi một yêu cầu thành công, mã statuslà 200và statusTextlà OK:

Kết quả:

Nếu tài nguyên được yêu cầu không tồn tại, mã phản hồi sẽ là 404:

Kết quả:

Nếu URL được yêu cầu tạo ra lỗi máy chủ, thì mã phản hồi sẽ là 500.

Nếu URL được yêu cầu được chuyển hướng đến URL mới có phản hồi 300-309, trạng thái của đối tượng Responsesẽ được đặt thành 200. Ngoài ra, thuộc tính được chuyển hướng sẽ được đặt thành true.

Trả fetch()về Promisengười từ chối khi có lỗi thực sự, chẳng hạn như trình duyệt hết thời gian chờ, mất kết nối mạng hoặc vi phạm CORS.

Ví dụ về API tìm nạp JavaScript

Giả sử bạn có một tệp jsonnằm trên máy chủ web với nội dung sau:

Và một trang HTML như thế này:

Trong app.js, chúng ta sẽ sử dụng phương thức này fetch()để lấy dữ liệu người dùng và kết xuất dữ liệu bên trong phần tử <div>với lớp container.

Đầu tiên, khai báo chức năng getUsers()bạn đang tìm kiếm users.jsontừ máy chủ.

Sau đó, phát triển chức năng renderUsers()hiển thị dữ liệu người dùng:

Kết quả:

tóm lược

• Các Fetch API cho phép bạn yêu cầu một tài nguyên không đồng bộ.
• Sử dụng phương thức fetch()để trả về một lời hứa giải quyết cho một đối tượng Response. Để lấy dữ liệu thực tế, bạn gọi một trong các phương thức của đối tượng Response, chẳng hạn text()hoặc json(). Các phương pháp này được giải quyết trong dữ liệu thực tế.
• Sử dụng các thuộc tính statusvà statusTextđối tượng Responseđể có được tình huống và văn bản của tình huống phản ứng.
• Sử dụng phương pháp catch()hoặc hướng dẫn try...catchđể xử lý yêu cầu thất bại.

Xem một loạt các hướng dẫn JavaScript khác mà tôi đã viết bằng cách nhấp vào liên kết bên dưới: