用Fetch进行http请求
传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。
XMLHttpRequest是一个设计粗糙的API,其中配置和调用方式非常混乱。
使用XHR发送一个json请求:
var xhr = new XMLHttpRequest(); xhr.open('GET',url); xhr.responseType = 'json'; xhr.onload = function(){ console.log(xhr.response); } xhr.onerror = function(){ console.log('xhr error'); } xhr.send();
使用fetch做请求后:
fetch(url).then(function(response){ return response.json(); }).then(function(data){ console.log(data); }).catch(function(e){ console.log('error' + e); });
es6写法:
fetch(url).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e));
处理text/html响应:
fetch(url).then(response=>response.text()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e));
获取头信息:
fetch(url).then((response)=>{ console.log(response.status); console.log(response.statusText); console.log(response.headers.get('Content-Type')); console.log(response.headers.get('Date')); return response.json(); }).then(data=>console.log(data)) .catch(e=>console.log('error' + e);
设置头信息
fetch(url,{ headers:{ 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e);
提交表单
fetch(url,{ method: 'post', body: new FormData(document.getElementById('form')) }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e);
提交json数据
fetch(url,{ method: 'post', body: JSON.stringify({ username: document.getElementById('username').value, password: document.getElementById('password').value }) }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e);
fetch特点
语法简洁,更加语义化
基于标准 Promise 实现,支持 async/await
同构方便,使用isomorphic-fetch
fetch兼容性
浏览器兼容性
fetch原生支持性不高,不过可以使用一些polyfill。
IE8是es3语法,需要引入es5的polyfill:es5-shim
支持promise语法:es6-promise
fetch的polyfill:fetch-polyfill
使用jsonp还需要引入:fetch-jsonp
开启babel的runtime模式,可以使用async/await
fetch常见问题
fetch请求默认不带cookie,需要设置fetch(url,{credentials: 'include'});
服务器返回400、500错误码不会reject,只有网路错误请求不能完成时才会reject;
总结
fetch API看起来简单,却是js语法不断增强提高带来的改善。
由于项目中普遍会引入各种库去解决底层问题,对于基础api的新增、拓展不太关注,久而久之会产生一种与标准的脱离感。以后应多多关注底层api的变化与基础实现。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是用Fetch进行http请求的详细内容,更多请关注其它相关文章!
上一篇: 趁着我们还年轻
下一篇: php 命令行参数详解及运用
推荐阅读
-
用 PHP 进行 HTTP 认证
-
用httpclient4.x 发送http get post请求 中文编码问题 博客分类: 技术总结HttP httpclient4.xgetpost中文编码
-
webpack插件compression-webpack-plugin配合nginx进行gzip压缩,提高http请求速度
-
详解使用Spring的restTemplete进行Http请求
-
用PHP的Socket实现HTTP请求_PHP教程
-
如何设置Fiddler来拦截Java代码发送的HTTP请求,进行各种问题排查 fiddlejavahttp抓包
-
如何设置Fiddler来拦截Java代码发送的HTTP请求,进行各种问题排查
-
用 PHP 进行 HTTP 认证
-
详解使用Spring的restTemplete进行Http请求
-
详解ES6 Fetch API HTTP请求实用指南