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

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

发布于 2018-06-07 阅读 1023 次 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请求
  1. var formdata = 'content=xxx&id=123';
  2. fetch(url, {
  3. method: 'post',
  4. body: formdata,
  5. headers: {
  6. 'Accept': 'application/json',
  7. 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'//自己根据需要设置
  8. },
  9. 'credentials': 'include' //如果需要回传cookie需要设置这个属性
  10. })
  11. .then(function(response){
  12. return response.json();
  13. })
  14. .then(function(data){
  15. })
  16. .catch(function(e) {
  17. console.log("Oops, error");
  18. });
发送get请求
  1. var url = 'http://abc.com?a=1&b=2';
  2. fetch(url, {
  3. method: 'get',
  4. headers: {
  5. 'Accept': 'application/json',
  6. 'Content-Type': 'application/json',
  7. }
  8. })
  9. .then(function(response){
  10. return response.json(); //.json将返回结果转成json
  11. })

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