fetch API

fetch

• 一個獲取資源的接口，相似於ajax
• 是基於 Promise之上設計，舊版本IE 徹底不支持，須藉助 polyfill來兼容
• 提供了對 Request 和 Response （以及其餘與網絡請求有關的）對象的通用定義
• 發送請求或者獲取資源，須要使用 window.fetch or WindowOrWorkerGlobalScope.fetch 方法。

參數

資源路徑（url string）

• 他必須接收一個須要請求的資源路徑，返回一個promise對象，請求成功的數據返回到Responese回調中，請求失敗的信息返回到 Request中。
• 當接收到一個表明錯誤的 HTTP狀態碼時，fetch返回的promise不會被標記爲 reject而會被標記爲resolve，好比狀態碼爲 404，500.只有網絡故障或請求被阻止時才被標記爲reject

fetch('https://api.apiopen.top/musicDetails1')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson); //{code: 400, message: "404 Not Found", result: "https://api.apiopen.top/musicDetails1"}
  })

• fetch 默認是不會從服務端發送接收或發送任何 cookie,若是須要則必須設置 credentials,自 2017/8 起默認的credentials政策變動爲same-originFirefox也在61.0b13中改變默認值

[, config]

• 配置項對象，包括全部對請求的設置

1. method: 請求使用的方法，如 GET、POST。

2. headers: 請求的頭信息，形式爲 Headers 的對象或包含 ByteString值的對象字面量。

3. body:
   請求的 body信息：
   多是:
   Blob（ 表示一個不可變、原始數據的類文件對象）、
   BufferSource （ 用於表示自身爲ArrayBuffer或者TypedArray提供對象的對象ArrayBufferView。）、
   FormData（表示表單數據的鍵值對的構造方式，通過它的數據可使用XMLHttpRequest.send() 方法送出，本接口和此方法都至關簡單直接。若是送出時的編碼類型被設爲 "multipart/form-data"，它會使用和表單同樣的格式。）、
   URLSearchParams （接口定義了一些實用的方法來處理 URL 的查詢字符串）
   或者 USVString 對象。
   注意GET 或HEAD方法的請求不能包含 body 信息。

4. mode: 請求的模式，如 cors、 no-cors 或者 same-origin。

5. credentials: 請求的 credentials，如 omit、same-origin 或者 include。爲了在當前域名內自動發送 cookie ， 必須提供這個選項， 從 Chrome 50 開始， 這個屬性也能夠接受 FederatedCredential 實例或是一個 PasswordCredential 實例。
   5.1 若是須要跨域請求需設置爲 "include"
   5.2 若是隻在同域內發送cookie 則設置爲 "same-origin"
   5.3 若是任何狀況都不發送cookie 則設置爲 "omit"

6. cache: 請求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。

7. redirect: 可用的redirect 模式:follow(自動重定向), error (若是產生重定向將自動終止而且拋出一個錯誤), 或者manual (手動處理重定向). 在Chrome中，Chrome 47以前的默認值是 follow，從 Chrome 47開始是manual。

8. referrer: 一個USVString 能夠是 no-referrer、client或一個URL。默認是client。

9. referrerPolicy:指定引用HTTP頭的值。多是一個 no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。

10. integrity: 包括請求的 subresource integrity值 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

const Fetch = function (url,config){
   if(typeof(config) !== 'object' || config === null) return throw `Config needs to pass an object type`
  let data = config || {} ;
  let {method = 'GET', param = null, mode = "cors", cache = "no-cache",headers = {'Access-Control-Allow-Origin': '*',
    'content-type': 'application/json'}, redirect = "follow", credentials = "include", referrer = "no-referrer"} = data;
  /*  // 傳輸 JSON 數據 需將 param 轉換 
    JSON.stringify(param)
    //上傳文件 需傳輸 formData 格式
    let formData = new FormData()
    let fileField = document.querySelector("#myFile")
    formData.append('title',"My File")
    formData.append('fileField ',fileField .files[0])
    
  */

  return  fetch(url,{
   method:method.toUpperCase(),
   body:param,
   mode,
   cache,
   headers,
   redirect,
   credentials,
}).then(res =>{
   if(res.ok) return res.json() 
    throw new Error("Network response fail："+res.status)
}
).catch(err=>console.error(err))
}

Fetch('https://api.apiopen.top/musicDetails1',{credentials:'omit'}).then(res =>console.log(res)).catch(err=>console.error(err))

Headers constructor

• 建立一個 headers 對象

一個 headers 對象是一個簡單的多名值對：

let content = "Hello World";
let myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

能夠傳一個多維數組或者對象字面量：

let content = "Hello World";
let myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

//獲取和設置
console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue");
 
console.log(myHeaders.get("Content-Length")); // 11
console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
 
myHeaders.delete("X-Custom-Header");
console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

若是使用了一個不合法的HTTP Header屬性名，那麼Headers的方法一般都拋出 TypeError 異常。若是不當心寫入了一個不可寫的屬性，也會拋出一個 TypeError 異常。除此之外的狀況，失敗了並不拋出異常。

檢查 content type 是否正確

fetch(myRequest).then(function(response) {
  if(response.headers.get("content-type") === "application/json") {
    return response.json().then(function(json) {
      // process your JSON further
    });
  } else {
    console.log("Oops, we haven't got JSON!");
  }
});

Response 對象

• fetch 返回的對象

對象中經常使用的屬性

1. status： 響應狀態碼 如 200 404 等
2. statusText：返回和狀態碼對應信息
3. ok 檢查狀態碼是否 在 200-299之間，返回true or false

檢查環境支持度

if(this.fetch) {
    // run my fetch request here
} else {
    // do something with XMLHttpRequest?
}

兼容性

Fetch規範