Js中fetch方法
fetch()方法定義在Window對象以及WorkerGlobalScope對象上，用於發起獲取資源的請求，其返回一個Promise對象，這個Promise對象會在請求響應后被resolve，並傳回Response對象。
描述
Promise<Response> fetch(input[, init])
input: 定義要獲取的資源，其值可以是：
- 一個字符串，包含要獲取資源的
URL，一些瀏覽器會接受blob和data作為schemes。 - 一個
Request對象。
init: 一個配置項對象，包括所有對請求的設置。可選的參數有：
method: 請求使用的方法，如GET、POST。headers: 請求的頭信息，形式為Headers的對象或包含ByteString值的對象字面量。body: 請求的body信息：可能是一個Blob、BufferSource、FormData、URLSearchParams或者USVString對象，注意GET或HEAD方法的請求不能包含body信息。mode: 請求的模式，如cors、no-cors或者same-origin。credentials: 請求的credentials，如omit、same-origin或者include，為了在當前域名內自動發送cookie，必須提供這個選項。cache: 請求的cache模式:default、no-store、reload、no-cache、force-cache或者only-if-cached。redirect: 可用的redirect模式:follow自動重定向，error如果產生重定向將自動終止並且拋出一個錯誤，或者manual手動處理重定向。referrer: 一個USVString可以是no-referrer、client或一個URL，默認是client。referrerPolicy: 指定了HTTP頭部referer字段的值，可能為以下值之一：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url。integrity: 包括請求的subresource integrity值，例如:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=。
返回一個Promise，resolve時回傳Response對象。
fetch與jQuery.ajax區別
- 當接收到一個代表錯誤的
HTTP狀態碼時，從fetch()返回的Promise不會被標記為reject， 即使響應的HTTP狀態碼是404或500，其會將Promise狀態標記為resolve，但是返回的Promise會將resolve的返回值的ok屬性設置為false，僅當網絡故障時或請求被阻止時，才會標記為reject。 fetch()不會接受跨域cookies，你也不能使用fetch()建立起跨域會話，其他域的Set-Cookie頭部字段將會被無視。fetch()不會發送cookies，除非使用了credentials的初始化選項。
實例
發起請求
發起一個簡單的資源請求，對於fetch請求返回一個Promise對象，這個Promise對象會在請求響應后被resolve，並傳回Response對象。
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js")
.then(res => console.log(res))
設置參數
通過init配置對象設置參數，可以設置method、headers、body、mode、credentials、cache、redirect、referrer、referrerPolicy、integrity。
var headers = new Headers({
"accept": "application/javascript"
});
headers.append("accept", "application/xml");
headers.set("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36");
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js", {
method: "GET",
headers: headers,
cache: 'no-cache',
})
.then(res => console.log(res))
Headers對象
Headers.append(): 給現有的header添加一個值, 或者添加一個未存在的header並賦值。Headers.delete(): 從Headers對象中刪除指定header。Headers.entries(): 以迭代器的形式返回Headers對象中所有的鍵值對。Headers.get(): 以ByteString的形式從Headers對象中返回指定header的全部值。Headers.has(): 以布爾值的形式從Headers對象中返回是否存在指定的header。Headers.keys(): 以迭代器的形式返回Headers對象中所有存在的header名。Headers.set(): 替換現有的header的值, 或者添加一個未存在的header並賦值。Headers.values(): 以迭代器的形式返回Headers對象中所有存在的header的值。
響應處理
通過Response對象對響應的數據作處理，包括獲取響應狀態以及響應體的處理等操作。
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js")
.then(res => res.text())
.then(data => console.log(data))
Response對象
Response對象的相關屬性與方法：
Response.headers: 只讀，包含此Response所關聯的Headers對象。Response.ok: 只讀，包含了一個布爾值，標示該Response成功，HTTP狀態碼的范圍在200-299。Response.redirected: 只讀，表示該Response是否來自一個重定向，如果是的話，它的URL列表將會有多個條目。Response.status: 只讀，包含Response的狀態碼。Response.statusText: 只讀，包含了與該Response狀態碼一致的狀態信息。Response.type: 只讀，包含Response的類型，例如basic、cors。Response.url: 只讀，包含Response的URL。Response.useFinalURL: 包含了一個布爾值，來標示這是否是該Response的最終URL。Response.clone(): 創建一個Response對象的克隆。Response.error(): 返回一個綁定了網絡錯誤的新的Response對象。Response.redirect(): 用另一個URL創建一個新的Response。
Response實現了Body接口，相關屬性與方法可以直接使用：
Body.body: 只讀，一個簡單的getter，用於暴露一個ReadableStream類型的body內容。Body.bodyUsed: 只讀，包含了一個布爾值來標示該Response是否讀取過Body。Body.arrayBuffer(): 讀取Response對象並且將它設置為已讀，並返回一個被解析為ArrayBuffer格式的Promise對象，Responses對象被設置為了stream的方式，所以它們只能被讀取一次。Body.blob():
讀取Response對象並且將它設置為已讀，並返回一個被解析為Blob格式的Promise對象。Body.formData():
讀取Response對象並且將它設置為已讀，並返回一個被解析為FormData格式的Promise對象。Body.json():
讀取Response對象並且將它設置為已讀，並返回一個被解析為JSON格式的Promise對象。Body.text():
讀取Response對象並且將它設置為已讀，並返回一個被解析為USVString格式的Promise對象。
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://segmentfault.com/a/1190000012740215
https://developer.mozilla.org/zh-CN/docs/Web/API/Headers
https://developer.mozilla.org/zh-CN/docs/Web/API/Response
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch