Fetch 代替 Ajax 的瀏覽器 API

Nick發表於2019-10-02
瀏覽器API

Fetch 是什麼？

Fetch 是基於 Promise 的用於傳送非同步 HTTP 請求的瀏覽器 API，目前大部分瀏覽器都支援，除了 IE ，如果需要相容 IE , GitHub 上有釋出的 polyfill https://github.com/github/fetch ，使 Fetch API 可以在任何瀏覽中使用。

語法說明

一共兩個引數，第一個為 url 字串型別，必傳引數，第二個為配置項，物件型別，可選引數。\
Fetch API 一共包含四個物件，分別為： Headers Body Request Response\
fetch() 會返回一個 promise 。然後我們用 then() 方法編寫處理函式來處理 promise 中非同步返回的結果。

fetch(url, [{options}])
  .then(response => response.json())
  .then(data => console.log(data))

常用配置項說明

// 請求方式
method: "GET",

// 請求頭headers   
headers: {
 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},

// 是否攜帶 cookie , omit: 從不傳送cookies, same-origin 只有當URL與響應指令碼同源才傳送 cookies , include 總是傳送請求資源域在本地的 cookies 驗證資訊  
credentials: 'include', 

// cors 表示同域和帶有 CORS 響應頭的跨域下可請求成功. 其他請求將被拒絕,包含請求的模式 (例如： cors, no-cors, same-origin)
mode: 'cors',

//包含請求的快取模式 (例如： default, reload, no-cache)
cache: 'default',

default: 瀏覽器從 HTTP 快取中尋找匹配的請求.
no-store: 瀏覽器在不先檢視快取的情況下從遠端伺服器獲取資源，並且不會使用下載的資源更新快取
reload: 請求之前將忽略 http 快取的存在, 但請求拿到響應後, 它將主動更新 http 快取.
no-cache: 如果存在快取, 那麼 fetch 將傳送一個條件查詢 request 和一個正常的 request , 拿到響應後, 它會更新 http 快取.
force-cache: 瀏覽器在其 HTTP 快取中查詢匹配的請求。1,如果存在匹配，新鮮或過時，則將從快取中返回。2,如果沒有匹配，瀏覽器將發出正常請求，並使用下載的資源更新快取
only-if-cached: fetch 強行取快取,（ 即使快取過期了也從快取取）. 如果沒有快取, 瀏覽器將返回錯誤

Fetch 使用方式

普通呼叫

fetch('https://wp.hellocode.name')
  .then(response => response.text())
  .then(data => console.log(data))

捕獲錯誤

fetch('https://wp.hellocode.name')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(err => console.log(err))

GET 請求

fetch(url, { 
    method: 'GET'
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

POST 請求

fetch(url, { 
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({ name: 'a', password: 'b',})
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

完整示例

fetch(url, { 
    method: 'POST',
    credentials: 'include',
    mode: 'cors',
    cache: 'default',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({ name: 'a', password: 'b',})
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

Fetch 的缺點

  1. 由於是基於 Promise 一旦傳送請求就無法中斷，需要自己實現。
  2. 沒有請求超時配置，需要自己實現。
  3. 當後端發生錯誤，fetch 響應依然是正常，需要自己處理

MDN 文件： https://developer.mozilla.org/zh-CN/docs/W...

本作品採用《CC 協議》，轉載必須註明作者和本文連結
微信訂閱號：我愛Coding

相關文章