一、不使用 fetch時(shí) 獲取異步資源

使用實(shí)例：

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

請(qǐng)求的網(wǎng)址

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

二、使用fetch

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

比較

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

fetch的語(yǔ)法

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

使用實(shí)例

// 接口的來源 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 => {
        //請(qǐng)求的錯(cuò)誤處理
        console.log(err);
    });

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

使用實(shí)例：

fetch 中自帶then 和 catch 方法

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

等價(jià)于以下寫法

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

fetch的Response對(duì)象

同步屬性

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

用法示例

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

標(biāo)頭信息的屬性有：

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

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

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

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

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

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

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

第一種方法：

fetch()發(fā)出請(qǐng)求以后，只有網(wǎng)絡(luò)錯(cuò)誤或者無法連接時(shí)，fetch()才會(huì)報(bào)錯(cuò)，其他情況都不會(huì)報(bào)錯(cuò)，而是認(rèn)為請(qǐng)求成功。

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

使用實(shí)例

• 例子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) {
  // 請(qǐng)求成功
  console.log('請(qǐng)求成功')
} else {
  // 請(qǐng)求失敗
  console.log(‘請(qǐng)求失敗')
}

操作標(biāo)頭

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

Headers 對(duì)象可以使用fo ... of循環(huán)進(jìn)行遍歷

使用實(shí)例

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()方法返回一個(gè)遍歷器，可以依次遍歷所有鍵值對(duì)([key,value])
  console.log(`${key} : ${value}`);  
}

用來操作標(biāo)頭的方法有：

繼承自 Headers 接口 的 可以修改標(biāo)頭。但是對(duì)于 HTTP響應(yīng)來說，修改標(biāo)頭意義不大，并且很多標(biāo)頭是只讀的，瀏覽器不允許修改。

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

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

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

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

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

使用實(shí)例

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

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())); // 隨機(jī)的搭訕內(nèi)容

如果鏈接不存在或發(fā)生錯(cuò)誤，響應(yīng)對(duì)象將返回錯(cuò)誤。

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

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

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

例如，以下代碼將從 URL 返回一個(gè) JSON 對(duì)象，假設(shè) 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())); // 隨機(jī)的搭訕內(nèi)容

JavaScript Fetch 的選項(xiàng)

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

如果你以前使用過 HTTP 請(qǐng)求就會(huì)對(duì)這很熟悉了。所有可用選項(xiàng)的示例，如下所示：

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())); // 隨機(jī)的搭訕內(nèi)容

創(chuàng)建副本

Stream 對(duì)象只能讀取一次，讀取完就沒了,這意味著五個(gè)讀取方法，只能使用一個(gè)，否則會(huì)報(bào)錯(cuò)。

使用實(shí)例：

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

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

使用實(shí)例

const response1 = await fetch('圖片地址');
// response.clone()復(fù)制了一份 Response 對(duì)象，然后將同一張圖片讀取了兩次
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 對(duì)象暴露出的底層接口，返回一個(gè) ReadableStream 對(duì)象，供用戶操作
例如：用來分塊讀取內(nèi)容，顯示下載的進(jìn)度

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

定制HTTP請(qǐng)求

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

HTTP 請(qǐng)求的方法、標(biāo)頭、數(shù)據(jù)體都在這個(gè)optionObj對(duì)象里面設(shè)置

fetch(url,optionObj)

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

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

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

參數(shù)詳解：

method：HTTP 請(qǐng)求的方法，POST、DELETE、PUT都在這個(gè)屬性設(shè)置。

headers：一個(gè)對(duì)象，用來定制 HTTP 請(qǐng)求的標(biāo)頭, 形式為 Headers 的對(duì)象或包含 ByteString 值的對(duì)象字面量

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

mode：請(qǐng)求是否允許跨域

    cors：默認(rèn)值，允許跨域請(qǐng)求，遵守 CORS 協(xié)議

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

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

credentials：請(qǐng)求是否攜帶cookie

    omit：默認(rèn)值，不攜帶cookie

    same-origin：同源請(qǐng)求下攜帶cookie

    include：同源和跨域請(qǐng)求下都攜帶cookie

cache：指定如何處理緩存。可能的取值如下：

    default：默認(rèn)值，先在緩存里面尋找匹配的請(qǐng)求。

    no-store：直接請(qǐng)求遠(yuǎn)程服務(wù)器，并且不更新緩存。

    reload：直接請(qǐng)求遠(yuǎn)程服務(wù)器，并且更新緩存。

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

    force-cache：緩存優(yōu)先，只有不存在緩存的情況下，才請(qǐng)求遠(yuǎn)程服務(wù)器。

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

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

    same-origin：默認(rèn)值，同源請(qǐng)求時(shí)發(fā)送 Cookie，跨域請(qǐng)求時(shí)不發(fā)送。

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

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

signal：指定一個(gè) AbortSignal 實(shí)例，用于取消fetch()請(qǐng)求

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

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

這時(shí)，如果不用keepalive屬性，數(shù)據(jù)可能無法發(fā)送，因?yàn)闉g覽器已經(jīng)把頁(yè)面卸載了。

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

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

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

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

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

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

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

  integrity: 'sha256-abcdef'

});

referrer: 用于設(shè)定fetch請(qǐng)求的referer標(biāo)頭。

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

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

    no-referrer-when-downgrade：默認(rèn)值，總是發(fā)送Referer標(biāo)頭，除非從 HTTPS 頁(yè)面請(qǐng)求 HTTP 資源時(shí)不發(fā)送。

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

    origin：Referer標(biāo)頭只包含域名，不包含完整的路徑。

    origin-when-cross-origin：同源請(qǐng)求Referer標(biāo)頭包含完整的路徑，跨域請(qǐng)求只包含域名。

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

取消fetch請(qǐng)求

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

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

使用實(shí)例：

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

response 實(shí)例的屬性

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())); // 隨機(jī)的搭訕內(nèi)容

參數(shù)如下

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

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

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

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

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

判斷標(biāo)準(zhǔn)是：HTTP響應(yīng)狀態(tài)碼在200~299之間表示成功，其他表示失敗

type    
響應(yīng)類型，有如下值：

basic
標(biāo)準(zhǔn)值, 同源響應(yīng), 帶有所有的頭部信息除了“Set-Cookie” 和 “Set-Cookie2″.

cors
Response 接收到一個(gè)有效的跨域請(qǐng)求. 

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

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

opaque
響應(yīng) “no-cors” 的跨域請(qǐng)求.

url
HTTP請(qǐng)求URL

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

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

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

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

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

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

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

以上方法都返回一個(gè)Promise對(duì)象，且Promise對(duì)象的結(jié)果值為它們讀取到并轉(zhuǎn)換為對(duì)應(yīng)格式的數(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)容只能讀取一次，再次讀取則會(huì)報(bào)錯(cuò)

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

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()

主流瀏覽器對(duì) 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方法的使用示例全面詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript fetch方法使的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論