只知道ajax?你已经out了
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~
随着前端技术的发展,请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般,蓬勃发展,本文主要想介绍其中的axios和fetch。 0.引入ajax(Asynchronous JavaScript and XML--异步JavaScript 和 XML),是一种客户端向服务器请求数据的方式,并且不需要去刷新整个页面;它依赖的是XMLHttpRequest对象。在我之前的文章中,介绍过ajax的创建过程,可以移步这次,我们聊聊ajax的创建过程。 当然项目中我们一般没有直接使用原生的ajax,而是使用javascript的各种库,例如jQuery。jQuery对原生的XHR对象进行了封装,还增添了对JSONP的支持,且经过多年维护,各种文档资料非常丰富,非常适合学习和上手。不过随着前端技术的快速发展,react、vue框架的兴起,XHR对象都有了替代的方案(fetch)。另外如果为了要使用$.ajax方法,就导入整个jQuery这个大而全的库,也未免显得臃肿了些。所以本文将介绍两个目前常用的获取服务器数据的js库:axios和fetch。 1.axios是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。 随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 进入了很多人的目光。axios本质也是对原生的XHR的封装,不过它是Promise 的实现版本,符合最新的ES规范,axios的几条特性: (1)从浏览器中创建XHR; (2)从node.js创建http请求; (3)支持Promise API; (4)客户端支持防御CSRF (5)提供了一些并发请求的接口 使用npm安装: npm install axios 示例--执行GET请求: //axios axios.get(‘/user‘,{ params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); axios的优点:体积较小、使用简单、还可以执行多个并发请求,并且可以直接得到返回结果,不会像fetch需要自己去转换,个人还是比较喜欢使用axios。 2.fetchfetch API脱离了XHR,是基于Promise设计。旧浏览器不支持Promise,需要使用polyfill es6-promise。 2.1 使用使用npm安装: npm install whatwg-fetch --save 示例--执行GET请求: //use ‘whatwg-fetch‘ import ‘whatwg-fetch‘ var result = fetch(url,{ credentials: ‘include‘,//跨域请求带上cookie headers: { ‘Accept‘: ‘application/json,text/plain,*/*‘ }//设置http请求的头部信息 }).then(res => { return res.text() //将请求来的数据转化成 文本形式 // return res.json() //将数据转换成 json格式 }).then(text => { console.log(text) }).catch(e => { throw (e) }) 可以在这个代码的基础上,增加一些操作,比如说在对请求数据处理前,先检查下返回结果的状态。对状态非200的结果,增加对应状态码的错误提示;在得到请求数据后,转换成需要的文本格式,或者json格式;另外,还可以对转换后的数据进行进一步的处理,比如请求的数据返回的是下划线类型的数据,可以处理成驼峰形式。 2.2 fetch的优点及需要注意的地方为什么要使用fetch呢?直接使用jQuery和axios也能满足我们的开发需要。看了些文章,提及到使用fetch的好处:
需要注意的是:
var result = fetch(url,}); 3.小结本文简单地分别介绍了axios和fetch的使用方法和特点。如果要详细了解fetch的应用,推荐阅读 MDN Fetch 教程和WHATWG Fetch 规范。如有问题,欢迎指正。
此文已由作者授权腾讯云+社区发布,更多原文请点击 搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包! 海量技术实践经验,尽在云加社区! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |