fetch請求html頁面的方法

這篇文章主要講解了“fetch請求html頁面的方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“fetch請求html頁面的方法”吧！

　　一、基本用法

　　fetch()的功能與 XMLHttpRequest 基本相同，但有三個主要的差異。

　　(1)fetch()使用 Promise，不使用回調函數，因此大大簡化了寫法，寫起來更簡潔。

　　(2)fetch()采用模塊化設計，API 分散在多個對象上(Response 對象、Request 對象、Headers 對象)，更合理一些；相比之下，XMLHttpRequest 的 API 設計并不是很好，輸入、輸出、狀態都在同一個接口管理，容易寫出非常混亂的代碼。

　　(3)fetch()通過數據流(Stream 對象)處理數據，可以分塊讀取，有利于提高網站性能表現，減少內存占用，對于請求大文件或者網速慢的場景相當有用。XMLHTTPRequest 對象不支持數據流，所有的數據必須放在緩存里，不支持分塊讀取，必須等待全部拿到后，再一次性吐出來。

　　在用法上，fetch()接受一個 URL 字符串作為參數，默認向該網址發出 GET 請求，返回一個 Promise 對象。它的基本用法如下。

　　fetch(url)

　　.then(...)

　　.catch(...)

　　下面是一個例子，從服務器獲取 JSON 數據。

　　fetch('')

　　.then(response => response.json())

　　.then(json => console.log(json))

　　.catch(err => console.log('Request Failed', err));

　　上面示例中，fetch()接收到的response是一個 Stream 對象，response.json()是一個異步操作，取出所有內容，并將其轉為 JSON 對象。

　　Promise 可以使用 await 語法改寫，使得語義更清晰。

　　async function getJSON() {

　　let url = '';

　　try {

　　let response = await fetch(url);

　　return await response.json();

　　} catch (error) {

　　console.log('Request Failed', error);

　　}

　　}

　　上面示例中，await語句必須放在try...catch里面，這樣才能捕捉異步操作中可能發生的錯誤。

　　后文都采用await的寫法，不使用.then()的寫法。

　　二、Response 對象：處理 HTTP 回應

　　2.1 Response 對象的同步屬性

　　fetch()請求成功以后，得到的是一個 Response 對象。它對應服務器的 HTTP 回應。

　　const response = await fetch(url);

　　前面說過，Response 包含的數據通過 Stream 接口異步讀取，但是它還包含一些同步屬性，對應 HTTP 回應的標頭信息(Headers)，可以立即讀取。

　　async function fetchText() {

　　let response = await fetch('/readme.txt');

　　console.log(response.status);

　　console.log(response.statusText);

　　}

　　上面示例中，response.status和response.statusText就是 Response 的同步屬性，可以立即讀取。

　　標頭信息屬性有下面這些。

　　Response.ok

　　Response.ok屬性返回一個布爾值，表示請求是否成功，true對應 HTTP 請求的狀態碼 200 到 299，false對應其他的狀態碼。

　　Response.status

　　Response.status屬性返回一個數字，表示 HTTP 回應的狀態碼(例如200，表示成功請求)。

　　Response.statusText

　　Response.statusText屬性返回一個字符串，表示 HTTP 回應的狀態信息(例如請求成功以后，服務器返回"OK")。

　　Response.url

　　Response.url屬性返回請求的 URL。如果 URL 存在跳轉，該屬性返回的是最終 URL。

　　Response.type

　　Response.type屬性返回請求的類型。可能的值如下：

　　basic：普通請求，即同源請求。

　　cors：跨域請求。

　　error：網絡錯誤，主要用于 Service Worker。

　　opaque：如果fetch()請求的type屬性設為no-cors，就會返回這個值，詳見請求部分。表示發出的是簡單的跨域請求，類似

　　表單的那種跨域請求。

　　opaqueredirect：如果fetch()請求的redirect屬性設為manual，就會返回這個值，詳見請求部分。

　　Response.redirected

　　Response.redirected屬性返回一個布爾值，表示請求是否發生過跳轉。

　　2.2 判斷請求是否成功

　　fetch()發出請求以后，有一個很重要的注意點：只有網絡錯誤，或者無法連接時，fetch()才會報錯，其他情況都不會報錯，而是認為請求成功。

　　這就是說，即使服務器返回的狀態碼是 4xx 或 5xx，fetch()也不會報錯(即 Promise 不會變為 rejected狀態)。

　　只有通過Response.status屬性，得到 HTTP 回應的真實狀態碼，才能判斷請求是否成功。請看下面的例子。

　　async function fetchText() {

　　let response = await fetch('/readme.txt');

　　if (response.status >= 200 && response.status < 300) {

　　return await response.text();

　　} else {

　　throw new Error(response.statusText);

　　}

　　}

　　上面示例中，response.status屬性只有等于 2xx (200&mdash;&mdash;299)，才能認定請求成功。這里不用考慮網址跳轉(狀態碼為 3xx)，因為fetch()會將跳轉的狀態碼自動轉為 200。

　　另一種方法是判斷response.ok是否為true。

　　if (response.ok) {

　　// 請求成功

　　} else {

　　// 請求失敗

　　}

　　2.3 Response.headers 屬性

　　Response 對象還有一個Response.headers屬性，指向一個 Headers 對象，對應 HTTP 回應的所有標頭。

　　Headers 對象可以使用for...of循環進行遍歷。

　　const response = await fetch(url);

　　for (let [key, value] of response.headers) {

　　console.log(&mdash;&mdash;${key} : ${value}&mdash;&mdash;);

　　}

　　// 或者

　　for (let [key, value] of response.headers.entries()) {

　　console.log(&mdash;&mdash;${key} : ${value}&mdash;&mdash;);

　　}

　　Headers 對象提供了以下方法，用來操作標頭。

　　Headers.get()：根據指定的鍵名，返回鍵值。

　　Headers.has()： 返回一個布爾值，表示是否包含某個標頭。

　　Headers.set()：將指定的鍵名設置為新的鍵值，如果該鍵名不存在則會添加。

　　Headers.append()：添加標頭。

　　Headers.delete()：刪除標頭。

　　Headers.keys()：返回一個遍歷器，可以依次遍歷所有鍵名。

　　Headers.values()：返回一個遍歷器，可以依次遍歷所有鍵值。

　　Headers.entries()：返回一個遍歷器，可以依次遍歷所有鍵值對([key, value])。

　　Headers.forEach()：依次遍歷標頭，每個標頭都會執行一次參數函數。

　　上面的有些方法可以修改標頭，那是因為繼承自 Headers 接口。對于 HTTP 回應來說，修改標頭意義不大，況且很多標頭是只讀的，瀏覽器不允許修改。

感謝各位的閱讀，以上就是“fetch請求html頁面的方法”的內容了，經過本文的學習后，相信大家對fetch請求html頁面的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！