Tìm hiểu Fetch API (P1)

fetch api là một api đơn giản để gửi và nhận các yêu cầu bằng js. tìm nạp giúp đưa ra các yêu cầu web và xử lý phản hồi dễ dàng hơn so với xmlhttprequest cũ.

Bạn có thể kiểm tra xem trình duyệt hiện tại của mình có hỗ trợ “tìm kiếm” hay không. ví dụ:

phương thức fetch () nhận làm đầu vào url để truy vấn và trả về phản hồi của yêu cầu đó.

xem một ví dụ đơn giản về cách tải tệp json:

thêm url để truy xuất dưới dạng tham số get. trong trường hợp này, url là ví dụ / example.json. phương thức fetch () trả về một lời hứa với trạng thái đã được giải quyết và giá trị là phản hồi cho yêu cầu đó.

khi lời hứa được giải quyết, phản hồi được chuyển đến .then. đây là nơi câu trả lời có thể được sử dụng. nếu yêu cầu không thành công, nó sẽ chuyển đến .catch với thông số lỗi tương ứng.

phản hồi

​​được trả về bởi yêu cầu chứa kết quả cũng như các thuộc tính và phương thức hữu ích. ví dụ: response.ok, response.status và response.statustext có thể được sử dụng để đánh giá trạng thái của phản hồi.

Đánh giá mức độ thành công của các phản hồi là đặc biệt quan trọng khi sử dụng tìm nạp vì các phản hồi không tốt (như 404) vẫn được giải quyết. Chỉ có một trường hợp mà lời hứa sẽ bị từ chối nếu không thực hiện được yêu cầu (không có kết nối mạng). nếu mã ở trên đã được cập nhật để xác thực các phản hồi, thì như sau:

bây giờ, nếu thuộc tính ok của đối tượng trả về false, hàm sẽ trả về lỗi bao gồm response.statustext.

câu trả lời có một phương pháp để truy cập nội dung được trả về. ví dụ: response.json () trả về một lời hứa json đã giải quyết. thêm bước này vào ví dụ hiện có sẽ cập nhật mã thành:

dễ hiểu hơn:

tóm tắt lại:

bước 1. lấy url ví dụ / example.json. fetch trả về một lời hứa, lời hứa sẽ được giải quyết, giá trị trả về sẽ được chuyển đến hàm validresponse.

bước 2. validateresponse sẽ lấy phản hồi làm đầu vào và kiểm tra xem nó có hợp lệ không (trạng thái 2xx có phải không?). nếu không, một lỗi sẽ được tạo ra và hàm .catch sẽ được thực thi. bước này rất quan trọng, nếu không các phản hồi có lỗi này sẽ chuyển đến mã tiếp theo. nếu câu trả lời hợp lệ, nó sẽ được chuyển đến hàm readresponseasjson.

bước 3. readresponseasjson sẽ đọc nội dung của phản hồi bằng phương thức response.json (). phương thức này trả về một lời hứa json đã phân giải. khi lời hứa được giải quyết, dữ liệu json được chuyển đến hàm logresult.

bước 4. cuối cùng, logresult ghi lại dữ liệu json từ yêu cầu ban đầu đến example / example.json.

tài liệu dịch: https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *