兼容IE6的fetch polyfill

macg0406 发布于2019-08-20 10:13 / 2333人阅读

摘要：社区起来后，不满足现在的方案，搞了一个。只有在一些非常新的浏览器才支持，而上的却最多兼容到，并且麻烦得要死，需要安装一大堆才能运行起来。于是我搞了一个兼容的。用法与原生的一模一样。

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不兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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