Tìm hiểu Fetch API (P1)

Bài viết Tìm hiểu Fetch API (P1) thuộc chủ đề về HỎi Đáp thời gian này đang được rất nhiều bạn quan tâm đúng không nào !! Hôm nay, Hãy cùng https://hangnhatcaocap.com.vn/ tìm hiểu Tìm hiểu Fetch API (P1) trong bài viết hôm nay nhé ! Các bạn đang xem bài viết : “Tìm hiểu Fetch API (P1)”

Fetch API là một API đơn giản cho việc gửi và nhận requesst bằng js. Với fetch thì việc thực hiện 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 trình duyệt đang sử dụng của mình có hỗ trợ “fetch” không. Ví dụ:

if (!('fetch' in window)) console.log('Fetch API not found, try including the polyfill'); return; // We can safely use fetch from now on 

Phương thức fetch () nhận đầu vào là url để truy vấn rồi trả về response của request đó.

Hãy xem một ví dụ đơn giản về fetch một file JSON:

fetch('examples/example.json') .then(function(response) // Do stuff with the response ) .catch(function(error) console.log('Looks like there was a problem: n', error); ); 

Chúng ta thêm url cho truy xuất dưới dạng parameter để fetch. Trong trường hợp này, đây url là examples/example.json. Phương thức fetch() trả về một promise có trạng thái resolves với giá trị là response cho request đó.

Khi promise resolves, response được truyền tới .then. Đây là nơi mà có thể sử dụng response. Nếu request không thành công, thì sẽ chuyển tới .catch với tham số là lỗi tương ứng.

Response trả về của request chứa kết quả và các thuộc tính, phương thức hữu ích. Ví dụ, response.ok, response.statusresponse.statusText đều có thể được sử dụng để đánh giá trạng thái của response.

Đánh giá sự thành công của các response là đặc biệt quan trọng khi sử dụng fetch bởi vì các bad response (như 404) vẫn được resolve. Chỉ có duy nhất một trường hợp promise sẽ bị reject là nếu request không thể thực hiện (không có kết nối mạng). Nếu code trước đó đã được update validate cho responses, giống như sau:

fetch('examples/example.json') .then(function(response) if (!response.ok) throw Error(response.statusText); // Do stuff with the response ) .catch(function(error) console.log('Looks like there was a problem: n', error); ); 

Bây giờ nếu thuộc tính ok của object trả về là false thì function sẽ gửi về lỗi gồm response.statusText.

Responses có phương thức truy cập vào nội dung trả về. Ví dụ, Response.json() trả về một promise resolves dạng JSON. Thêm bước này vào ví dụ hiện tại sẽ cập nhật code thành:

fetch('examples/example.json') .then(function(response) if (!response.ok) throw Error(response.statusText); // Read the response as json. return response.json(); ) .then(function(responseAsJson) // Do stuff with the JSON console.log(responseAsJson); ) .catch(function(error) console.log('Looks like there was a problem: n', error); ); 

Dễ hiểu hơn:

function logResult(result) console.log(result); function logError(error) console.log('Looks like there was a problem: n', error); function validateResponse(response) if (!response.ok) throw Error(response.statusText); return response; function readResponseAsJSON(response) return response.json(); function fetchJSON(pathToResource) fetch(pathToResource) // 1 .then(validateResponse) // 2 .then(readResponseAsJSON) // 3 .then(logResult) // 4 .catch(logError); fetchJSON('examples/example.json'); 

Tóm tắt lại:

Bước 1. Fetch một url example/example.json. Fetch trả về một promise, promise sẽ được resolves, giá trị trả về sẽ được truyền tới hàm validateResponse.

Bước 2. validateResponse sẽ nhận đầu vào là response và kiểm tra xem có hợp lệ không (status là 2xx không?). Nếu không, sẽ có lỗi và chuyển đến hàm .catch thực thi. Bước này rất quan trọng nếu không có thì responses chứa lỗi này được sẽ truyền xuống code tiếp theo. Nếu responses là valid, nó được chuyển tới hàm readResponseAsJSON.

Bước 3. readResponseAsJSON sẽ đọc nội dung của response bằng phương thức Response.json(). Phương thức này trả về một promise resolves dạng JSON. Khi promise được resolves, dữ liệu JSON được chuyển tới hàm logResult.

Bước 4. Cuối cùng, dữ liệu JSON từ request ban đầu tới examples/example.json được ghi lại bởi logResult.

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



Các câu hỏi về fetch api là gì


Nếu có bắt kỳ câu hỏi thắc mắt nào vê fetch api là gì hãy cho chúng mình biết nhé, mõi thắt mắt hay góp ý của các bạn sẽ giúp mình cải thiện hơn trong các bài sau nhé <3 Bài viết fetch api là gì ! được mình và team xem xét cũng như tổng hợp từ nhiều nguồn. Nếu thấy bài viết fetch api là gì Cực hay ! Hay thì hãy ủng hộ team Like hoặc share. Nếu thấy bài viết fetch api là gì rât hay ! chưa hay, hoặc cần bổ sung. Bạn góp ý giúp mình nhé!!

Các Hình Ảnh Về fetch api là gì


Các hình ảnh về fetch api là gì đang được chúng mình Cập nhập. Nếu các bạn mong muốn đóng góp, Hãy gửi mail về hộp thư [email protected] Nếu có bất kỳ đóng góp hay liên hệ. Hãy Mail ngay cho tụi mình nhé

Xem thêm kiến thức về fetch api là gì tại WikiPedia

Bạn nên tham khảo nội dung chi tiết về fetch api là gì từ web Wikipedia tiếng Việt.◄ Tham Gia Cộng Đồng Tại

💝 Nguồn Tin tại: https://hangnhatcaocap.com.vn/

💝 Xem Thêm Chủ Đề Liên Quan tại : https://hangnhatcaocap.com.vn/wiki-hoi-dap/

Related Posts

About The Author