1. 程式人生 > >fetch竟然都是瀏覽器自帶的了?==》window.fetch

fetch竟然都是瀏覽器自帶的了?==》window.fetch

現在window.fetch基本上每一個瀏覽器都已經自帶(IE除外),以後再也不用引入$.ajax、axios、fetch了就能用了

axios沒有這殊榮,原生自帶意味著什麼,不用說什麼了、多麼重要能讓window當中自帶fetch方法,以前聽過一種說法叫傳統ajax已死,fetch永生,當時還以為是一句笑話,現在看來,fetch已經征服了各個js大佬,正在走向通用化的道路

如果fetch組建通用之後,不再考慮瀏覽器相容問題,那麼會有多麼可怕的事實、就是強迫所有人放棄任何ajax封裝方法、因為這是自帶的,無論你使用與否,瀏覽器都會把它放到window物件當中,對於那些對網頁效能要求極高的前段工作者們,是絕對不會允許自己的程式碼中引入不必要的程式碼、而對於那些不願意引入資源的人、也會強迫自己熟悉fetch得到使用方法

所以說fetch走向了成功!!!!!!!

總結一下,Fetch 優點主要有:

  1. 語法簡潔,更加語義化

  2. 基於標準 Promise 實現,支援 async/await

  3. 同構方便,使用 isomorphic-fetch

先看一下 Fetch 原生支援率:

原生支援率並不高,幸運的是,引入下面這些 polyfill 後可以完美支援 IE8+ :

  1. 由於 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham

  2. 引入 Promise 的 polyfill: es6-promise

  3. 引入 fetch 探測庫:fetch-detector

  4. 引入 fetch 的 polyfill: fetch-ie8

  5. 可選:如果你還使用了 jsonp,引入 fetch-jsonp

  6. 可選:開啟 Babel 的 runtime 模式,現在就使用 async/await

Fetch polyfill 的基本原理是探測是否存在 window.fetch 方法,如果沒有則用 XHR 實現。這也是 github/fetch 的做法,但是有些瀏覽器(Chrome 45)原生支援 Fetch,但響應中有

中文時會亂碼,老外又不太關心這種問題,所以我自己才封裝了 fetch-detector 和 fetch-ie8 只在瀏覽器穩定支援 Fetch 情況下才使用原生 Fetch。這些庫現在每天有幾千萬個請求都在使用,絕對靠譜

最後說一句   傳統AJAX已死,Fetch永生!!