fetch請求出來了一段時間,短暫的在項目中使用過.這次好好學(xué)習(xí)匯總一下.
第一: fetch的使用
????https://github.com/github/fetch? 這個是fetch的github 上面給出了fetch用法.
????https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 這個是fetch的mdn文檔,更加的詳細(xì).
? ? 查看兩份文檔的時候,github上面沒有設(shè)置headers 而在 mdn上有.一開始我也很迷茫,最后我讀到了一句話
因為fetch 會自己的匹配數(shù)據(jù)類型設(shè)置 content type, 所以發(fā)送json 或者formdata 等其他數(shù)據(jù)類型的時候,不需要你手動設(shè)置.
so intelligently.
所以在大部分使用的的情況下,直接使用就行. 和傳統(tǒng)的ajax比起來,fetch 使用起來更加方便,少了繁瑣的配置,又是基于promise,開發(fā)者專注于業(yè)務(wù)就行.
第二: fetch 的缺點
? ? 1.兼容性,fetch的兼容性并不太好,ie 和 safari 都不支持
在移動端和pc端 兼容性不好因為 返回的reponse body 是readable stream 不支持.?
解決方案: 使用第三方庫?whatwg-fetch, 如果同構(gòu)在node端使用isomorphic-fetch.
?2.fetch 請求默認(rèn)不帶cookie
前端請求的時候都會設(shè)計到token 權(quán)限驗證,很多時候是存在cookie里面的.fetch里面又一個參數(shù)credentials設(shè)計cookie
credentials 有三個值:
????????????????????????????omit: 默認(rèn)值猩谊，忽略cookie的發(fā)送
????????????????????????????same-origin: 表示cookie只能同域發(fā)送情屹，不能跨域發(fā)送
????????????????????????????include: cookie既可以同域發(fā)送，也可以跨域發(fā)送 ( 推薦使用)
推薦使用include.
3.fetch 跨域問題
? fetch跨域也有對應(yīng)的參數(shù)設(shè)置mode
????????????????????????????????same-origin：該模式是不允許跨域的，它需要遵守同源策略窟扑，否則瀏覽器會返回一個error告知不能跨域讯蒲；其對應(yīng)的response type為basic汹忠。
????????????????????????????????cors: 該模式支持跨域請求被辑，顧名思義它是以CORS的形式跨域；當(dāng)然該模式也可以同域請求不需要后端額外的CORS支持已球；其對應(yīng)的response type為cors臣镣。
????????????????????????????????no-cors: 該模式用于跨域請求但是服務(wù)器不帶CORS響應(yīng)頭，也就是服務(wù)端不支持CORS智亮；這也是fetch的特殊跨域請求方式忆某；其對應(yīng)的response type為opaque。
4.fetch 返回400 500 問題
當(dāng)一個請求發(fā)送完成,服務(wù)返回狀態(tài)碼,fetch 不會reject這個response,仍然resolve,但是 response.ok 會設(shè)置成false.很多時候我們會二次封裝fetch reject error.
5 fetch 無法 abort 請求 和timeout
目前fetch 沒有傳統(tǒng)ajax 的abort 方法,還在草案之中
給fetch內(nèi)部的promise添加一個abort方法--實際就是reject一個error.
使用promise 的race, 因為promise 里面的resolve 和 reject 只能執(zhí)行一次, 利用race reject 一個error.
上面的abort 并沒有真正的abort 此次請求,只是通過promise promise reject 一個error而已.我在翻閱fetch的源碼的時候發(fā)現(xiàn)了這個
在配置中確實又一個signal 參數(shù)可以abort 請求,發(fā)現(xiàn)是基于AbortController,但是這個是一個實驗中屬性,基本不能使用.
以上是我對fetch粗淺的總結(jié),有不足的地方歡迎指出.
