fetch請求html頁面的方法

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

　　一、基本用法

　　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 對象不支持?jǐn)?shù)據(jù)流，所有的數(shù)據(jù)必須放在緩存里，不支持分塊讀取，必須等待全部拿到后，再一次性吐出來。

　　在用法上，fetch()接受一個 URL 字符串作為參數(shù)，默認(rèn)向該網(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屬性返回請求的類型?？赡艿闹等缦拢?/p>

　　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ā)出請求以后，有一個很重要的注意點(diǎn)：只有網(wǎng)絡(luò)錯誤，或者無法連接時，fetch()才會報錯，其他情況都不會報錯，而是認(rèn)為請求成功。

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

　　只有通過Response.status屬性，得到 HTTP 回應(yīng)的真實(shí)狀態(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&mdash;&mdash;299)，才能認(rèn)定請求成功。這里不用考慮網(wǎng)址跳轉(zhuǎn)(狀態(tài)碼為 3xx)，因?yàn)閒etch()會將跳轉(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)進(jìn)行遍歷。

　　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 對象提供了以下方法，用來操作標(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)頭，那是因?yàn)槔^承自 Headers 接口。對于 HTTP 回應(yīng)來說，修改標(biāo)頭意義不大，況且很多標(biāo)頭是只讀的，瀏覽器不允許修改。

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