前端培訓-中級階段（28）- fetch 請求（2019-12-05期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

前言

fetch 用於獲取資源（包括跨域請求），其實和 XMLHttpRequest 差很少。那麼爲何 AJAX 的解決方案已經有了，咱們還要搞出一個新的API？

其實這是符合規則的。不是說 XMLHttpRequest 很差。而是科技發展就是這樣，過個幾年就要來點顛覆性的更新。

XMLHttpRequest 後面都叫 XHR 吧。

fetch 特色

1. 默認不帶 Cookie，這是一大槽點，我才接觸的時候就常常吐槽（可是如今已經改了）。

   自從2017年8月25往後，默認的 credentials 政策變動爲 same-originFirefox 也在 61.0b13 中改變默認值
   使用 Fetch - mdn

2. 請求不能中途終止（XHR有abort()）

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

3. Promise，寫起來的確是比回調舒服
4. 上傳進度、下載進度（當作流，而後處理也能模擬）

fetch 語法

fetch(input [, init]);

input 入參

1. 字符串類型、一個能夠訪問的URL地址。
2. Request 對象。在 sw 中 fetch 事件捕獲到的就是 Request 對象。

init 入參

這是一個對象。

1. method 請求方式

   1. 字符串類型 get、post、put 等

2. headers 請求頭

   1. Headers 對象
   2. 對象形式

3. body 消息體，支持的和 XHR 同樣。get 須要本身拼接在URL上

   1. Blob、File 好比input選擇的文件
   2. Buffer
   3. FormData 表單上傳 content-type: multipart/form-data
   4. URLSearchParams content-type: application/x-www-form-urlencoded
   5. String

4. mode

   1. 字符串類型

      1. cors 跨域請求
      2. no-cors 正常的網絡請求（默認）
      3. same-origin 只請求同域

5. credentials cookie攜帶的方式

   1. 字符串類型

      1. omit 不攜帶 cookie （早期默認值，後來改了）
      2. same-origin 同域請求攜帶 cookie （默認值）
      3. include 一直攜帶 cookie。不考慮同域跨域

6. cache 緩存模式

   1. 字符串類型 default、no-store、reload、no-cache、force-cache、only-if-cached

7. redirect 重定向處理方式

   1. 字符串類型

      1. follow 自動處理，跟隨跳轉（早期默認值，後來改了）
      2. manual 阻止、（默認值）
      3. error 禁止處理

8. referrer 請求來源

   1. 字符串類型 url地址，不可跨域。能夠是相對路徑

      1. client 標識客戶端本身處理。默認
      2. no-referrer 不傳遞

9. referrerPolicy

   1. 字符串類型 no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url
10. integrity 校驗

fetch 使用實戰

get請求

fetch(`https://www.lilnong.top/cors/get?ref=SF`)
    .then(v=>v.json())
    .then(v=>console.log(v))

post請求

由於get的不涉及到 content-type 因此還相對的簡單一些。下面咱們來針對不一樣的 content-type 寫一下

application/json

fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        headers: {'content-type':'application/json'},
        body:JSON.stringify({bodyRef:'SF'})
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

multipart/form-data

fm = new FormData();
fm.append('type','formdata')
fm.append('bodyRef','SF')
fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        body:fm
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

application/x-www-form-urlencoded

fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        body:new URLSearchParams({type: 'URLSearchParams',bodyRef:'SF'})
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

post 上傳文件

上傳文件只能使用multipart/form-data。因此咱們就是用FormData 對象。有時候咱們須要給文件添加 filename。

append 方案

fm.append(name,value,filename) value裏面放 Blob 對象或者File 均可以。這裏能夠傳入 filename。

File 方案

File 對象自帶 filename, new File(fileBits, fileName, options) 能夠把 Blob 初始化成 File 對象。

ajax 獲取圖片並渲染

fetch(`//cors-www.lilnong.top/static/img/wx-linong.jpg`)
    .then(v=>v.blob())
    .then(v=>console.log(v,URL.createObjectURL(v)))

fetch 下載進度條展現

文章地址
測試地址-fetch顯示進度條並下載

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃