当前位置:首页 > 谈谈我使用fetchjs,在你的项目中使用fetch

谈谈我使用fetchjs,在你的项目中使用fetch

发布于 2018-06-07 阅读 429 次 Ajax Javascript

某一天突然脑瓜一机灵就想把网站里面的jquery请求全部换成fetch。
下面说说我的心路历程。

兼容性

首先要了解兼容性,Can I Use这个网站了解下:

polyfill

原生支持率并不高,幸运的是,引入下面这些 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

几个简单的例子

发送post请求
var formdata = 'content=xxx&id=123';
fetch(url, {
    method: 'post',
    body: formdata,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'//自己根据需要设置
    },
    'credentials': 'include' //如果需要回传cookie需要设置这个属性
})
    .then(function(response){
    return response.json();
})
    .then(function(data){
})
    .catch(function(e) {
    console.log("Oops, error");
});
发送get请求
var url = 'http://abc.com?a=1&b=2';
fetch(url, {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    }
})
.then(function(response){
    return response.json(); //.json将返回结果转成json
})

content-type设置可以参考我另一篇文章原生ajax设置Header之设置发送数据类型,设置请求方式
参考:
传统 Ajax 已死,Fetch 永生
M D N