Tìm hiểu Fetch API (P1)

api tìm nạp là một api đơn giản để gửi và nhận các yêu cầu bằng js. Sử dụng tìm nạp giúp dễ dàng thực hiện các yêu cầu web và xử lý phản hồi 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 nạp hay không. Ví dụ:

Bạn Đang Xem: Tìm hiểu Fetch API (P1)

Phương thức

fetch () nhận làm đầu vào url được truy vấn và trả về phản hồi cho yêu cầu đó.

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

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

Xem Thêm : Jackpot là gì? Hướng dẫn cách tham gia dành cho người mới

Khi lời hứa được giải quyết, phản hồi sẽ được chuyển đến .then. Đây là nơi phản hồ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 tham 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 đều có thể được sử dụng để đánh giá trạng thái của một phản hồi.

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

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

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 để phân tích cú pháp. Thêm bước này vào một ví dụ hiện có sẽ cập nhật mã thành:

Xem Thêm : REACT TRÊN FACEBOOK LÀ GÌ? THUẬT NGỮ TRÊN FACEBOOK

Dễ hiểu hơn:

Tóm tắt lại:

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

Bước 2. validateresponse 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?). 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 thì phản hồi có chứa lỗi này sẽ được chuyển sang đoạn mã tiếp theo. Nếu phản hồi hợp lệ, hãy chuyển nó đến hàm readresponseasjson.

Bước 3. readresponseasjson sẽ sử dụng phương thức response.json () để đọc nội dung của phản hồi. Phương thức này trả về một lời hứa json để phân tích cú pháp. Khi lời hứa được giải quyết, dữ liệu json được chuyển đến hàm logresult.

Bước thứ tư. Cuối cùng, dữ liệu json từ yêu cầu ban đầu đến các ví dụ / example.json được ghi lại bằng logresult.

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