兼容IE6的fetch polyfill

macg0406 發布于2019-08-20 10:13 / 2407人閱讀

摘要：社區起來后，不滿足現在的方案，搞了一個。只有在一些非常新的瀏覽器才支持，而上的卻最多兼容到，并且麻煩得要死，需要安裝一大堆才能運行起來。于是我搞了一個兼容的。用法與原生的一模一樣。

react社區起來后，不滿足現在的AJAX方案，搞了一個fetch。fetch只有在一些非常新的瀏覽器才支持，而github上的fetch卻最多兼容到IE8，并且麻煩得要死，需要安裝一大堆polyfill才能運行起來。

于是我搞了一個兼容IE6的polyfill。用法與原生的一模一樣。

npm install fetch-polyfill2

當然想要在IE6運行起來，還需要Promise與JSON3。

推薦使用性能最好的bluebird與JSON3

$ npm install bluebird -- save
$ npm install json3 -- save

它內部是使用4種通信手段與后端交換數據

HTML

fetch("/users.html")
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

JSON

fetch("/users.json")
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log("parsed json", json)
  }).catch(function(ex) {
    console.log("parsing failed", ex)
  })

Response metadata

fetch("/users.json").then(function(response) {
  console.log(response.headers.get("Content-Type"))
  console.log(response.headers.get("Date"))
  console.log(response.status)
  console.log(response.statusText)
})

Post form

var form = document.querySelector("form")

fetch("/users", {
  method: "POST",
  body: new FormData(form)
})

Post JSON

fetch("/users", {
  method: "POST",
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Hubot",
    login: "hubot",
  })
})

File upload

var input = document.querySelector("input[type="file"]")

var data = new FormData()
data.append("file", input.files[0])
data.append("user", "hubot")

fetch("/avatars", {
  method: "POST",
  body: data
})

IE6-7 cors

fetch("/users", { //jsonp!!!
  credentials: "include",
}).then(function(response){
   return response.json()
}).then(function(){

})

歡迎star與pull request https://github.com/RubyLouvre...

GPU云服務器云服務器 IE6兼容兼容IE6 ie6兼容性解決ie6不兼容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80049.html

分別使用 XHR、jQuery 和 Fetch 實現 AJAX

摘要：本文詳細講述如何使用原生和來實現。使用可以無刷新地向服務端發送請求接收服務端響應，并更新頁面。分別要用到的方法和方法。，，都是現在和未來解決異步的標準做法，可以完美搭配使用。這也是使用標準一大好處。本文詳細講述如何使用原生 JS、jQuery 和 Fetch 來實現 AJAX。 AJAX 即 Asynchronous JavaScript and XML，異步的 JavaScript...

Julylovin 2019-08-21 11:24 評論0 收藏0
Vue+webpack+Element 兼容問題總結

摘要：項目中用到了和官方文檔中給出明確范圍不支持及以下版本，因為使用了無法模擬的特性。但它支持所有兼容的瀏覽器。詞法分析階段把字符串形式的代碼轉換為令牌流。語法分析階段會把一個令牌流轉換成的形式方便后續操作。利用我們配置好的把生成的轉變為新的。項目中用到了Vue.js和Elenment-UIVue官方文檔中給出明確范圍：Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法...

fxp 2019-08-26 12:10 評論0 收藏0
Vue+webpack+Element 兼容問題總結

摘要：項目中用到了和官方文檔中給出明確范圍不支持及以下版本，因為使用了無法模擬的特性。但它支持所有兼容的瀏覽器。詞法分析階段把字符串形式的代碼轉換為令牌流。語法分析階段會把一個令牌流轉換成的形式方便后續操作。利用我們配置好的把生成的轉變為新的。項目中用到了Vue.js和Elenment-UIVue官方文檔中給出明確范圍：Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法...

sumory 2019-08-02 11:14 評論0 收藏0
兼容ie9以下的polyfill類庫

1、fetch： https://github.com/github/fetch 2、HTML5 History/State APIs (pushState, replaceState, onPopState)：https://github.com/browsersta... 3、REM unit polyfill：https://github.com/chuckcarpe... 4、HTML5 ...

Binguner 2019-08-20 17:46 評論0 收藏0