請求 - Fetch

概念和用法

• 提供了對 Request（請求）和 Response（響應） （以及其餘與網絡請求有關的）對象的通用定義
• 能夠被使用到更多地應用場景中：不管是service workers、Cache API、又或者是其餘處理請求和響應的方式，甚至是任何一種須要你本身在程序中生成響應的方式。
• 爲有關聯性的概念，例如CORS和HTTP原生頭信息，提供一種新的定義，取代它們原來那種分離的定義。
• 在Window 和 WorkerGlobalScope接口上實現了這個方法。所以在幾乎全部環境中均可以用這個方法獲取到資源。
• fetch() 必須接受一個參數——資源的路徑。也能夠傳一個可選的第二個參數init
• 不管請求成功與否，它都返回一個 Promise 對象
• 能夠經過 Request() 和 Response() 的構造函數直接建立請求和響應，可是咱們不建議這麼作。他們應該被用於建立其餘 API 的結果（好比，service workers 中的 FetchEvent.respondWith）。

停止 fetch

• 瀏覽器已經開始爲AbortController 和AbortSignal 接口（也就是Abort API）添加實驗性支持，容許像 Fetch 和 XHR 這樣的操做在還未完成時被停止 。

Fetch

• fetch() 方法用於發起獲取資源的請求。它返回一個 promise，這個 promise 會在請求響應後被 resolve，並傳回 Response 對象。
• Window 和 WorkerGlobalScope 都實現了 WorkerOrGlobalScope。 ——這意味着基本在任何場景下只要你想獲取資源，均可以使用 位於 WorkerOrGlobalScope 中的 fetch() 方法。
• 當遇到網絡錯誤時，fetch() 返回的 promise 會被 reject，並傳回 TypeError（HTTP 404 狀態並不被認爲是網絡錯誤。）
• fetch() 方法由 Content Security Policy 的 connect-src指令控制，而不是它請求的資源。
  • Content Security Policy HTTP 響應頭容許站點管理者控制用戶代理可以爲指定的頁面加載哪些資源。將幫助防止跨站腳本攻擊（Cross-Site Script）（XSS）
  • connect-src 限制能經過腳本接口加載的URL。

語法

Promise<Response> fetch(input[, init]);

參數

• input 定義要獲取的資源。這多是：
  • 一個 USVString 字符串，包含要獲取資源的 URL。
    • USVString 對應 unicode 標量值的全部可能序列的集合。它一般僅用於執行文本處理的 API，須要一串 unicode 標量值才能進行操做。除了不容許不成對的代理代碼（應該是代理碼點）以外， USVString 等同於 DOMString 。
    • 一個字符集通常能夠用一張或多張由多個行和多個列所構成的二維表來表示。二維表中行與列相交的點，稱之爲碼點(Code Point代碼點)，也稱之爲碼位(Code position代碼位)
    • 除開高代理碼點(high-surrogate)和低代理碼點(low-surrogat )以外的任何 Unicode 碼點都是標量值。只有標量值可被映射爲"編碼單元序列"。根據"編碼單元序列"的長度是否可變，可將Unicode 字符編碼模式分爲兩類。
    • 不成對的代理代碼（ Unpaired surrogate codepoints ）：高代理代碼後面沒有低代理代碼，或者低代理代碼以前沒有高代理代碼。
    • DOMString 是一個UTF-16字符串。因爲JavaScript已經使用了這樣的字符串，因此DOMString 直接映射到 一個String。
  • 一個 Request 對象
• init 一個配置項對象，包括全部對請求的設置。可選的參數有：
  • method: 請求使用的方法，如 GET、POST。
  • headers: 請求的頭信息，形式爲 Headers 的對象或包含 ByteString 值的對象字面量。
    • ByteString is a UTF-8 String that corresponds to the set of all possible sequences of bytes. （bytestring是一個utf-8字符串，它對應於全部可能的字節序列集。）
  • body: 請求的 body 信息：多是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息。
    • BufferSource 一個類型，包括ArrayBuffer和ArrayBufferView.
  • mode: 請求的模式，如 cors、 no-cors 或者 same-origin。
  • credentials: 請求的 credentials，如 omit、same-origin 或者 include。
  • 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=）。
    • subresource integrity 資源的哈希編碼，用於校驗資源的完整性

返回值

• 一個 Promise，resolve 時回傳 Response 對象。

例外

• AbortError：The request was aborted (using AbortController.abort()).（請求被終止，使用了 AbortController.abort()）
• TypeError：Since Firefox 43, fetch() will throw a TypeError if the URL has credentials, such as http://user:password@example.com.（傳入的URL包含憑據時拋出，例如http://user:password@example.com）

示例

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response); // 把圖片2進制對象轉換爲URL地址，供帶有src屬性的標籤使用。`objectURL = blob:https://www.w3cschool.cn/93496b0c-601c-4675-8a25-c64df2d662df`
  myImage.src = objectURL;
});

Headers

• Headers 接口容許您對HTTP請求和響應頭執行各類操做。
• 在該接口的全部方法中，標題名稱由不區分大小寫的字節序列匹配。
• 出於安全考慮，某些頭只能由用戶代理控制。這些頭信息包括
  • 請求首部
    • 禁止修改的消息首部包括以 Proxy- 和 Sec- 開頭的消息首部，
    • Accept-Charset
    • Accept-Encoding
    • Access-Control-Request-Headers
    • Access-Control-Request-Method
    • Connection
    • Content-Length
    • Cookie
    • Cookie2
    • Date
    • DNT
    • Expect
    • Host
    • Keep-Alive
    • Origin
    • Referer
    • TE
    • Trailer
    • Transfer-Encoding
      
    • Upgrade
    • Via
  • 響應頭部
    • Set-Cookie
    • Set-Cookie2
• 一個Headers對象也有一個關聯的guard，它具備不可變的值，request，request-no-cors，response或none。 這會影響 set(), delete(), 和append() 方法 改變header.
• 能夠經過 Request.headers 和Response.headers 屬性檢索一個Headers對象
• 使用 Headers.Headers() 構造函數建立一個新的Headers 對象