一、不使用 fetch時 獲取異步資源

使用實例：

// 發(fā)送一個get請求
// 實例化一個XMLHttpResquest對象
let xhr = new XMLHttpResquest();
// 注冊httpRequest.readyState改變時會回調(diào)的函數(shù),xhr.onreadystatechange
// readyState共有5個可能的值,
//0    UNSENT (未打開)    open()方法還未被調(diào)用;
//1    OPENED  (未發(fā)送)    send()方法還未被調(diào)用;
//2    HEADERS_RECEIVED (已獲取響應頭)    send()方法已經(jīng)被調(diào)用, 響應頭和響應狀態(tài)已經(jīng)返回;
//3    LOADING (正在下載響應體)    響應體下載中; responseText中已經(jīng)獲取了部分數(shù)據(jù);
//4    DONE (請求完成)    整個請求過程已經(jīng)完畢.
xhr.onreadystatechange = function () {
    //該回調(diào)函數(shù)會被依次調(diào)用4次
    console.log(xhr.resdyState);
    //請求已完成
    if (xhr.readyState === 4) {
        //http狀態(tài)為200
        if (xhr.status === 200) {
            //打印響應來的數(shù)據(jù)
            console.log(xhr.response);
            //JSON.parse()將JSON格式的字符串轉(zhuǎn)化為JSON對象
            let data = JSON.parse(xhr.response);
            //打印得到的JSON對象
            console.log(data);
        }
    }
};

請求的網(wǎng)址

let url = '網(wǎng)址';
// 該方法為初始化請求,第一個參數(shù)是請求的方法,比如GET,POST,PUT,
// 第二個參數(shù)是請求的url,第三個參數(shù)為true表示發(fā)送異步請求
xhr.open('GET', url, true);
//設置http請求頭
httpRequest.setRequestHeader('Content-Type', 'application/json');
//發(fā)出請求,參數(shù)為要發(fā)送的body體,如果是GET方法的話，一般無需發(fā)送body,設為空就可以
httpRequest.send(null);

二、使用fetch

// 請求的網(wǎng)址
let url = '網(wǎng)址';
//發(fā)起get請求
let _fetch = fetch(url).then(function (response) {
    //response.status表示響應的http狀態(tài)碼
    if (response.status === 200) {
        // json是返回的response提供的一個方法,
        // 會把返回的json字符串反序列化成對象,也被包裝成一個Promise了
        return response.json();
    } else {
        return {};
    }
});
_fetch = _fetch
    .then(function (data) {
        //響應的內(nèi)容
        console.log(data);
        // 響應數(shù)據(jù)格式化
        console.log(data.json());
    })
    .catch(function (err) {
        console.log(err);
    });

比較

• fetch()使用 Promise，不使用回調(diào)函數(shù)，因此大大簡化了寫法，寫起來更簡潔。
• fetch()采用模塊化設計，API 分散在多個對象上（Response 對象、
• Request 對象、Headers 對象），更合理一些；
• 相比之下，XMLHttpRequest 的 API 設計并不是很好，
• 輸入、輸出、狀態(tài)都在同一個接口管理，容易寫出非常混亂的代碼。
• fetch()通過數(shù)據(jù)流（Stream對象）處理數(shù)據(jù)，可以分塊讀取，
• 有利于提高網(wǎng)站性能表現(xiàn)，減少內(nèi)存占用，對于請求大文件或者網(wǎng)速慢的場景相當有用。
• XMLHTTPRequest對象不支持數(shù)據(jù)流，所有的數(shù)據(jù)必須放在緩存里，
• 不支持分塊讀取，必須等待全部拿到后，再一次性吐出來。

fetch的語法

fetch(url)
  .then(...)
  .catch(...)

使用實例

// 接口的來源 https://api.uomg.com/doc-rand.qinghua.html
const data = {
    format: '搭訕',
};
const url = 'https://api.uomg.com/api/rand.qinghua';
fetch(url, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Content-Type': 'application/json',
    },
    credentials: 'same-origin',
})
    .then(res => {
        //轉(zhuǎn)換后返回的數(shù)據(jù)
        console.log(res.json());
    })
    .catch(err => {
        //請求的錯誤處理
        console.log(err);
    });

 必須使用 json 方法才能得到需要的響應數(shù)據(jù)（即后端的數(shù)據(jù)）

使用實例：

fetch 中自帶then 和 catch 方法

fetch('網(wǎng)址')
    // fetch()接收到的response是一個 Stream 對象
    // response.json()是一個異步操作，取出所有內(nèi)容，并將其轉(zhuǎn)為 JSON 對象
    .then(response => response.json())
    .then(json => console.log(json)) //獲取到的json數(shù)據(jù)
    .catch(err => console.log('Request Failed', err));

等價于以下寫法

async function getJSON() {
    let url = '請求的網(wǎng)址';
    try {
        let response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.log('失敗', error);
    }
}
console.log(getJSON()); // 獲取到的數(shù)據(jù)

fetch的Response對象

同步屬性

fetch()請求成功以后，得到的是一個 Response 對象。它對應服務器的 HTTP 回應。
Response 包含的數(shù)據(jù)通過 Stream 接口異步讀取，但是它還包含一些同步屬性，對應 HTTP 回應的標頭信息（Headers），可以立即讀取。

用法示例

async function getFetchText() {
    let response = await fetch('網(wǎng)址');
    console.log(response.status); // 獲取http狀態(tài)碼 200
    console.log(response.statusText); // 獲取http響應的狀態(tài)信息
}
getFetchText();

標頭信息的屬性有：

const response = await fetch(url);
response.ok：返回一個布爾值，表示請求是否成功
例如：true對應 HTTP 請求的狀態(tài)碼 200 到 299，false對應其他的狀態(tài)碼。

response.status：返回一個數(shù)字，表示 HTTP 回應的狀態(tài)碼
例如：200，表示成功請求

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

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

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

response.type：返回請求的類型?？赡艿闹等缦拢?br />    basic：普通請求，即同源請求。
    cors：跨域請求。
    error：網(wǎng)絡錯誤，主要用于 Service Worker。

判斷請求是否成功發(fā)出

第一種方法：

fetch()發(fā)出請求以后，只有網(wǎng)絡錯誤或者無法連接時，fetch()才會報錯，其他情況都不會報錯，而是認為請求成功。

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

使用實例

• 例子1

async function getfetchText() {
  let response = await fetch('網(wǎng)址');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

• 例子2

判斷response.ok是否為true

if (response.ok) {
  // 請求成功
  console.log('請求成功')
} else {
  // 請求失敗
  console.log(‘請求失敗')
}

操作標頭

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

Headers 對象可以使用fo ... 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()) { 
// response.heasers.entries()方法返回一個遍歷器，可以依次遍歷所有鍵值對([key,value])
  console.log(`${key} : ${value}`);  
}

用來操作標頭的方法有：

繼承自 Headers 接口 的 可以修改標頭。但是對于 HTTP響應來說，修改標頭意義不大，并且很多標頭是只讀的，瀏覽器不允許修改。

比較常用的也就是response.headers.get()

const response = await fetch(url);
response.headers.get()：根據(jù)指定的鍵名，返回鍵值。
response.headers.has()： 返回一個布爾值，表示是否包含某個標頭。
response.headers.set()：將指定的鍵名設置為新的鍵值，如果該鍵名不存在則會添加。
response.headers.append()：添加標頭。
response.headers.delete()：刪除標頭。
response.headers.keys()：返回一個遍歷器，可以依次遍歷所有鍵名。
response.headers.values()：返回一個遍歷器，可以依次遍歷所有鍵值。
response.headers.entries()：返回一個遍歷器，可以依次遍歷所有鍵值對（[key, value]）。
response.headers.forEach()：依次遍歷標頭，每個標頭都會執(zhí)行一次參數(shù)函數(shù)。

讀取Response對象內(nèi)容的方法

const response = await fetch(url);
response.text()：得到文本字符串，用于獲取文本數(shù)據(jù)，比如 HTML 文件。
response.json()：得到 返回格式化的 JSON 數(shù)據(jù)。
response.blob()：得到二進制 Blob 對象，例如讀取圖片文件，顯示在網(wǎng)頁上。
response.formData()：得到 FormData 表單對象，主要用在 Service Worker 里面，攔截用戶提交的表單，修改某些數(shù)據(jù)以后，再提交給服務器。
response.arrayBuffer()：得到二進制 ArrayBuffer 對象，主要用于獲取流媒體文件。返回數(shù)組緩沖區(qū)數(shù)據(jù)
response.formData() ：返回 formData 數(shù)據(jù)。

 由于 res.text( ) 具有可以獲取URL 的文本內(nèi)容的功能，所以可以使用它來獲取網(wǎng)站的整個 HTML 。一旦運行 res.text( )，我們可以用另一個 then 捕獲響應并在控制臺記錄它：

使用實例

使用 JavaScript Fetch 獲取網(wǎng)站的 HTML 內(nèi)容
由于res.text()具有可以獲取URL 的文本內(nèi)容的功能，所以可以使用它來獲取網(wǎng)站的整個 HTML 。一旦運行 res.text()，我們可以用另一個 then 捕獲響應并在控制臺記錄它：

fetch('https://api.uomg.com/api/rand.qinghua', {
    body: JSON.stringify({ format: '搭訕' }),
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
}).then(res => console.log(res.json())); // 隨機的搭訕內(nèi)容

如果鏈接不存在或發(fā)生錯誤，響應對象將返回錯誤。

例如，找不到頁面將返回 404，或者網(wǎng)關(guān)錯誤將返回 502。

使用 JavaScript Fetch 從鏈接中獲取 JSON 內(nèi)容

Fetch 的另一個常見用途是獲取數(shù)組的響應。如果想從 JSON 格式的 API 中獲取響應，我們可以使用 res.json()。

例如，以下代碼將從 URL 返回一個 JSON 對象，假設 URL 正在發(fā)送有效的 JSON：

fetch('https://api.uomg.com/api/rand.qinghua', {
    body: JSON.stringify({ format: '搭訕' }),
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
}).then(res => console.log(res.json())); // 隨機的搭訕內(nèi)容

JavaScript Fetch 的選項

由于 Fetch 可以發(fā)送和接收 HTTP 請求，當我們想要使用它獲取 URL數(shù)據(jù)的時候，還可以帶一些選項，即 fetch(URL, { options })。

如果你以前使用過 HTTP 請求就會對這很熟悉了。所有可用選項的示例，如下所示：

fetch('https://api.uomg.com/api/rand.qinghua', {
    body: JSON.stringify({ format: '搭訕' }),
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
}).then(res => console.log(res.json())); // 隨機的搭訕內(nèi)容

創(chuàng)建副本

Stream 對象只能讀取一次，讀取完就沒了,這意味著五個讀取方法，只能使用一個，否則會報錯。

使用實例：

// 先使用了response.text()，就把 Stream 讀完了。
// 后面再調(diào)用response.json()，就沒有內(nèi)容可讀了，所以報錯。
let text = await response.text();
let json = await response.json(); // 報錯

Response 對象提供Response.clone()方法，創(chuàng)建Response對象的副本，實現(xiàn)多次讀取。

使用實例

const response1 = await fetch('圖片地址');
// response.clone()復制了一份 Response 對象，然后將同一張圖片讀取了兩次
const response2 = response1.clone();
const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();
image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);

底層接口

Response.body是 Response 對象暴露出的底層接口，返回一個 ReadableStream 對象，供用戶操作
例如：用來分塊讀取內(nèi)容，顯示下載的進度

const response = await fetch('圖片地址');
// response.body.getReader()方法返回一個遍歷器
const reader = response.body.getReader();
while(true) {
  // 這個遍歷器的read()方法每次返回一個對象，表示本次讀取的內(nèi)容塊
  const {done, value} = await reader.read();
  // done屬性是一個布爾值，用來判斷有沒有讀完
  if (done) {
    break;
  }
  // value屬性是一個 arrayBuffer 數(shù)組，表示內(nèi)容塊的內(nèi)容，而value.length屬性是當前塊的大小
  console.log(`Received ${value.length} bytes`)
}

定制HTTP請求

fetch()的第一個參數(shù)是 URL，
還可以接受第二個參數(shù)optionObj，
作為配置對象，定制發(fā)出的 HTTP 請求。

HTTP 請求的方法、標頭、數(shù)據(jù)體都在這個optionObj對象里面設置

fetch(url,optionObj)

fetch()請求的底層用的是 Request() 對象的接口，參數(shù)完全一樣，因此上面的 API 也是 Request()的 API

fetch()的第二個參數(shù)的完整API如下：

const response = fetch(url, {
  method: "GET",//請求方式
  headers: {//定制http請求的標頭
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,//post請求的數(shù)據(jù)體，因為此時為get請求，故為undefined
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",//用于設定fetch請求的referer標頭
  mode: "cors", //指定請求模式，此時為cors表示支持跨域請求
  credentials: "same-origin",//發(fā)送cookie
  cache: "default",//指定如何處理緩存
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined 
});

參數(shù)詳解：

method：HTTP 請求的方法，POST、DELETE、PUT都在這個屬性設置。

headers：一個對象，用來定制 HTTP 請求的標頭, 形式為 Headers 的對象或包含 ByteString 值的對象字面量

body：POST 請求的數(shù)據(jù)體(請求的參數(shù))，可能是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對象，注意 GET 或 HEAD 方法的請求不能包含 body 信息

mode：請求是否允許跨域

    cors：默認值，允許跨域請求，遵守 CORS 協(xié)議

    same-origin：不允許跨域請求(只允許同源請求)

    no-cors：允許來自 CDN 的腳本、其他域的圖片和其他一些跨域資源，前提條件是請求的 method 只能是 HEAD、GET 或 POST，而且 js 不能訪問 Response 對象中的任何屬性, 并且只能使用有限的幾個簡單標頭，不能添加跨域的復雜標頭，相當于提交表單所能發(fā)出的請求

credentials：請求是否攜帶cookie

    omit：默認值，不攜帶cookie

    same-origin：同源請求下攜帶cookie

    include：同源和跨域請求下都攜帶cookie

cache：指定如何處理緩存?？赡艿娜≈等缦拢?/p>

    default：默認值，先在緩存里面尋找匹配的請求。

    no-store：直接請求遠程服務器，并且不更新緩存。

    reload：直接請求遠程服務器，并且更新緩存。

    no-cache：將服務器資源跟本地緩存進行比較，有新的版本才使用服務器資源，否則使用緩存。

    force-cache：緩存優(yōu)先，只有不存在緩存的情況下，才請求遠程服務器。

    only-if-cached：只檢查緩存，如果緩存里面不存在，將返回504錯誤。

credentials：指定是否發(fā)送 Cookie?？赡艿娜≈等缦拢?/p>

    same-origin：默認值，同源請求時發(fā)送 Cookie，跨域請求時不發(fā)送。

    include：不管同源請求，還是跨域請求，一律發(fā)送 Cookie。

    omit：一律不發(fā)送。

signal：指定一個 AbortSignal 實例，用于取消fetch()請求

keepalive：用于頁面卸載時，告訴瀏覽器在后臺保持連接，繼續(xù)發(fā)送數(shù)據(jù)。

    一個典型的場景就是，用戶離開網(wǎng)頁時，腳本向服務器提交一些用戶行為的統(tǒng)計信息。

這時，如果不用keepalive屬性，數(shù)據(jù)可能無法發(fā)送，因為瀏覽器已經(jīng)把頁面卸載了。

redirect: 指定 HTTP 跳轉(zhuǎn)的處理方法?？赡艿娜≈等缦拢?/p>

    follow：默認值，fetch()跟隨 HTTP 跳轉(zhuǎn)。

    error：如果發(fā)生跳轉(zhuǎn)，fetch()就報錯。

    manual：fetch()不跟隨 HTTP 跳轉(zhuǎn)，但是response.url屬性會指向新的 URL，response.redirected屬性會變?yōu)閠rue，由開發(fā)者自己決定后續(xù)如何處理跳轉(zhuǎn)。

integrity：指定一個哈希值，用于檢查 HTTP 回應傳回的數(shù)據(jù)是否等于這個預先設定的哈希值。

比如，下載文件時，檢查文件的 SHA-256 哈希值是否相符，確保沒有被篡改

fetch('http://site.com/file', {

  integrity: 'sha256-abcdef'

});

referrer: 用于設定fetch請求的referer標頭。

這個屬性可以為任意字符串，也可以設為空字符串（即不發(fā)送referer標頭）。

referrerPolicy: 用于設定Referer標頭的規(guī)則?？赡艿娜≈等缦拢?/p>

    no-referrer-when-downgrade：默認值，總是發(fā)送Referer標頭，除非從 HTTPS 頁面請求 HTTP 資源時不發(fā)送。

    no-referrer：不發(fā)送Referer標頭。

    origin：Referer標頭只包含域名，不包含完整的路徑。

    origin-when-cross-origin：同源請求Referer標頭包含完整的路徑，跨域請求只包含域名。

    same-origin：跨域請求不發(fā)送Referer，同源請求發(fā)送。
    strict-origin：Referer標頭只包含域名，HTTPS 頁面請求 HTTP 資源時不發(fā)送Referer標頭。
    strict-origin-when-cross-origin：同源請求時Referer標頭包含完整路徑，跨域請求時只包含域名，HTTPS 頁面請求 HTTP 資源時不發(fā)送該標頭。
    unsafe-url：不管什么情況，總是發(fā)送Referer標頭。

取消fetch請求

fetch()請求發(fā)送后，如果中途想要取消，需要使用AbortController對象

//創(chuàng)建一個AbortController實例
let controller = new AbortController();
fetch(url, {
  signal: controller.signal
});
//給controller.signal綁定監(jiān)聽事件，controller.signal的值改變則會觸發(fā)abort事件
controller.signal.addEventListener('abort',
  () => console.log('abort!')
);
// controller.abort()方法用于發(fā)出取消信號。這時會觸發(fā)abort事件，這個事件可以監(jiān)聽
controller.abort(); // 取消
// 可以通過controller.signal.aborted屬性判斷取消信號是否已經(jīng)發(fā)出
console.log(controller.signal.aborted); // true

使用實例：

//創(chuàng)建實例
let controller = new AbortController();
//設置定時器
setTimeout(() => controller.abort(), 300);
try {
  let response = await fetch('請求路徑', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') {
    console.log('Aborted!');
  } else {
    throw err;
  }
}

response 實例的屬性

fetch('https://api.uomg.com/api/rand.qinghua', {
    body: JSON.stringify({ format: '搭訕' }),
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
}).then(response => console.log(response.json())); // 隨機的搭訕內(nèi)容

參數(shù)如下

status    
HTTP響應狀態(tài)碼

statusText    
HTTP響應狀態(tài)描述

headers    
HTTP響應頭，headers無法直接通過.來獲取響應頭，而要通過get方法來獲取，原因時headers是Header類型，該類實現(xiàn)了Symbol.iterator，是一個可迭代對象，他需要通過get方法獲取指定響應頭

body 
HTTP響應體。一個簡單的 getter，用于暴露一個 ReadableStream 類型的 body 內(nèi)容。

bodyUsed 
包含了一個布爾值 (en-US)來標示該 Response 是否讀取過 Body。
ok    
本次響應是否成功，true成功，false失敗。

判斷標準是：HTTP響應狀態(tài)碼在200~299之間表示成功，其他表示失敗

type    
響應類型，有如下值：

basic
標準值, 同源響應, 帶有所有的頭部信息除了“Set-Cookie” 和 “Set-Cookie2″.

cors
Response 接收到一個有效的跨域請求. 

error
網(wǎng)絡錯誤. 沒有有用的描述錯誤的信息。響應的狀態(tài)為0，header為空且不可變。從 

Response.error()中獲得的響應的類型.

opaque
響應 “no-cors” 的跨域請求.

url
HTTP請求URL

redirected  
表示該 Response 是否來自一個重定向，如果是的話，它的 URL 列表將會有多個條目。

需要注意的是body屬性值是一個可讀流，所以我們無法直接獲取body內(nèi)容，需要從可讀流中讀取內(nèi)容，而讀取可讀流中內(nèi)容也是一個異步操作，Response貼心的為我們提供了如下實例方法去異步地獲取body可讀流中的內(nèi)容

json()    讀取body內(nèi)容為JSON對象

text()    讀取body內(nèi)容為普通文本字符串

formData()    讀取body內(nèi)容為FormData對象

blob()    讀取body內(nèi)容為Blob對象

arrayBuffer()    讀取body內(nèi)容為ArrayBuffer對象

以上方法都返回一個Promise對象，且Promise對象的結(jié)果值為它們讀取到并轉(zhuǎn)換為對應格式的數(shù)據(jù)。

async function fetchFun(){
    const response = await fetch('http://127.0.0.1:3000/api?name=tom&age=18')
    console.log('bodyUsed:', response.bodyUsed)
    const body = await response.json()
    console.log(body)
    console.log('bodyUsed:', response.bodyUsed)
    const bodyAgain = await response.json()
    console.log(bodyAgain)
}
fetchFun()

 需要注意的是，可讀流的內(nèi)容只能讀取一次，再次讀取則會報錯

如果我們想進行多次讀取，則可以對可讀流進行克隆，然后操作克隆的可讀流，具體操作如下：

async function fetchFun(){
    const response = await fetch('http://127.0.0.1:3000/api?name=tom&age=18')
    const clone1 = response.clone()
    const body = await clone1.json()
    console.log(body)
    const clone2 = response.clone()
    const bodyAgain = await clone2.json()
    console.log(bodyAgain)
}
fetchFun()

主流瀏覽器對 fetch 的支持

Chrome 42+
Edge 14+
Firefox 39+

IE 使用fetch

安裝npm插件 whatwg-fetch

npm install whatwg-fetch --save

使用

import 'whatwg-fetch'

ie8 下需要安裝 fetch-ie8

以上就是JavaScript中fetch方法的使用示例全面詳解的詳細內(nèi)容，更多關(guān)于JavaScript fetch方法使的資料請關(guān)注腳本之家其它相關(guān)文章！