Fetch API 入門使用

html5 引入了新的網絡請求接口Fetch API，原生支持Promise，可配合 async/await 語法使用。

Fetch 實例

使用 fetch 用戶數據列表。

fetch('/users')
.then(res=>res.json())//服務器返回的是json
.then(user=>{console.log(user);})
.catch(error=>{console.log(error);})
複製代碼

async/await 語法

async function getUsers() {
  try {
    let res = await fetch('/users');
    let users = await res.json();
    console.log(users)
  } catch (error) {
   console.log(error)
  }
}
複製代碼

fetch 返回的不是真正須要的數據，而是一個 Promise，全部還須要使用它提供的方法進一步獲取想要的數據。

具體用法

兩種調用方式：

fetch(url,options)
fetch(req,options)
複製代碼

推薦使用第一種，一眼就能夠看到url,更加直觀。

options 是一個對象，可設置如下字段：

• method：請求方法，默認GET;
• headers：請頭信息，能夠是簡單的對象，也能夠是 Headers 的實例；
• body：發送數據。Blod、bufferSource、FormData、URLSearchParams、USVstring，GET、HEAD 沒有body；
• mode：請求模式。
  • cors：跨域請求；
  • no-cors：只容許使用GET、HEAD、POST;
  • same-origin：同源請求；
  • navigate：支持頁面導航（不太明白）。
• credentials：是否發送 cookies：
  • omit：不發送，默認；
  • same-origin：同源發送；
  • include：發送。
• cache：緩存策略：
  • default：請求以前檢查緩存；
  • no-cache：有緩存，發送一個查詢請求，緩存失效，再發送正常請求；
  • no-store：不檢查緩存，直接請求；
  • reload：忽略緩存，拿到響應後，更新緩存；
  • force-cache：強制讀取緩存，緩存過時，再發送正常請求；
  • only-if-cached：讀取緩存，過時就報網絡錯誤。 mode 設置爲 same-origin 時有效。
• redirect：重定向時的處理方法：
  • follow：跟隨；
  • error：報錯；
  • manual：用戶手動跟隨。
• integrity：包含一個驗證資源完整性的字符串。

Headers

Headers 用於構造請求頭信息，構造函數接收一個對象，對象的key-value就是請求頭的信息。

let headers = new Headers(
  {
    'content-type':'text/plain',
    'content-length':data.toString().length
  }
);
headers.append('X-Custom-header','AnotherValue');//追加
headers.has('content-type');//true 查詢
headers.get('content-type');//'text/plain' 獲取
// headers.getAll('content-type');//['text/plain'] getAll 被移除了
headers.delete('content-type');//刪除
headers.set('content-type','json');//重寫
複製代碼

Request

請求對象。能夠新建一個，也能夠從已有的對象中繼承。

let Url = '/users';
let req = new Request(Url,{method:'GET',headers})
// 擴展 request
let postReq= new Requset(req,{method:'POST'})
複製代碼

Response

Response 實例是 fertch 處理完 promise 以後的返回的。也能夠手動建立，在servoceWorkers 中才真實有用。

let res = new Response(body,init)
複製代碼

body 能夠是Bolb、BufferSource、FormData、URLSearchParams、USVString 這些值。

init 是一個對象，可包含如下字段：

• status：響應狀態碼；
• statusText：狀態文本；
• headers：頭部信息，普通對象或Headers 的實例。

response 的實例還有一些可讀屬性：

• ok：請求是否成功，狀態碼爲 2xx 都爲 true ；
• status：狀態碼；
• statusText：狀態文本；
• bodyUesed：響應數據是否被用過；
• headers：頭部信息；
• url：響應地址；
• type：響應類型：
  • basic：同源；
  • cors：跨域；
  • error：出錯；
  • opaque：Request mode 設置爲 no-cors 的響應。

response 有一些方法來 reslove 響應信息。

• json，解析響應信息爲對象，resolve promise；
• text，…………字符串…………；
• bolb，轉化響應Bold，resolve;
• formData,………………；
• arrayBuffer，…………。

Fetch Vs AJAX

• 響應狀態爲404或5xx，都resolve，可是 ok 爲false。只有當網絡故障或者請求被阻止了，纔會 reject；
• 默認狀況不發送不接收cookies，須要設置；
• POST 的數據須要轉爲JSON;
• 不能設置超時和取消請求，能夠經過Promise.race，了模擬二者；
• 文件上傳和下載獲取不到進度，可以使用 response.body 是可讀流，具備getReader，可根據這個來獲取下載進度。；
• 不能直接獲取到響應數據，須要調用響應方法，resolve 一下；

總結

• Fetch API 很底層，使用起來並不絲滑；
• Fetch 錯誤處理有點複雜；
• Fetch 不支持取消和超時設置；
• 上傳和下載進度沒有，使用可讀流來獲取，複雜性忽然升高了。

仍是使用原生的 xhr 和 axios 庫來的爽快。

參考

• Fetch: Download progress
• Fetch: Abort
• 瞭解 Fetch API
• Fetch進階指南