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

創(chuàng)新互聯(lián)專注于遼寧企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都做商城網(wǎng)站。遼寧網(wǎng)站建設(shè)公司,為遼寧等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

　　一、基本用法

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

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

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

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

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

fetch(url)

.then(...)

.catch(...)

下面是一個例子，從服務(wù)器獲取 JSON 數(shù)據(jù)。

fetch('')

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

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

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

上面示例中，fetch()接收到的response是一個 Stream 對象，response.json()是一個異步操作，取出所有內(nèi)容，并將其轉(zhuǎn)為 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里面，這樣才能捕捉異步操作中可能發(fā)生的錯誤。

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

　　二、Response 對象：處理 HTTP 回應(yīng)

2.1 Response 對象的同步屬性

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

const response = await fetch(url);

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

async function fetchText() {

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

console.log(response.status);

console.log(response.statusText);

}

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

標(biāo)頭信息屬性有下面這些。

Response.ok

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

Response.status

Response.status屬性返回一個數(shù)字，表示 HTTP 回應(yīng)的狀態(tài)碼(例如200，表示成功請求)。

Response.statusText

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

Response.url

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

Response.type

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

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

cors：跨域請求。

error：網(wǎng)絡(luò)錯誤，主要用于 Service Worker。

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

表單的那種跨域請求。

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

Response.redirected

Response.redirected屬性返回一個布爾值，表示請求是否發(fā)生過跳轉(zhuǎn)。

2.2 判斷請求是否成功

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

這就是說，即使服務(wù)器返回的狀態(tài)碼是 4xx 或 5xx，fetch()也不會報錯(即 Promise 不會變?yōu)?rejected狀態(tài))。

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

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——299)，才能認定請求成功。這里不用考慮網(wǎng)址跳轉(zhuǎn)(狀態(tài)碼為 3xx)，因為fetch()會將跳轉(zhuǎn)的狀態(tài)碼自動轉(zhuǎn)為 200。

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

if (response.ok) {

// 請求成功

} else {

// 請求失敗

}

2.3 Response.headers 屬性

Response 對象還有一個Response.headers屬性，指向一個 Headers 對象，對應(yīng) HTTP 回應(yīng)的所有標(biāo)頭。

Headers 對象可以使用for...of循環(huán)進行遍歷。

const response = await fetch(url);

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

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

}

// 或者

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

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

}

Headers 對象提供了以下方法，用來操作標(biāo)頭。

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

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

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

Headers.append()：添加標(biāo)頭。

Headers.delete()：刪除標(biāo)頭。

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

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

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

Headers.forEach()：依次遍歷標(biāo)頭，每個標(biāo)頭都會執(zhí)行一次參數(shù)函數(shù)。

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

感謝各位的閱讀，以上就是“fetch請求html頁面的方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對fetch請求html頁面的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！