用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请求的详细内容,更多请关注其它相关文章!
上一篇: JS中的this变量的简单介绍
推荐阅读
-
详解ES6 Fetch API HTTP请求实用指南
-
nodejs 使用http进行post或get请求的实例(携带cookie)
-
C++ 用libcurl库进行http通讯网络编程
-
微信退款(在.net core 用http方式请求)
-
用VBS实现的发送带Cookie的HTTP请求的代码
-
详解AngularJS用Interceptors来统一处理HTTP请求和响应
-
angular 用拦截器统一处理http请求和响应的方法
-
Springboot用RestTemplate发送http请求
-
C++用libcurl库进行http通讯网络编程
-
Blazor Server 应用程序中进行 HTTP 请求