只知道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.fetch
fetch 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的好处:
- 脱离的XHR,是ES规范里新的实现方式,支持async/await;
- 更加底层,提供了丰富的API(request,response);
- 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里;
- 更好更方便的写法;
需要注意的是:
- 兼容性;
- 当服务器返回400、500等错误码时并不会reject,只有网络错误等导致请求不能完成时,fetch才会被reject;
- fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制,并不能阻止请求过程继续在后台运行,造成了流量的浪费;
- fetch没有办法原生监测请求的进度,而XHR可以;
- fetch跨域请求时,默认不会带cookie,如果需要带cookie,则要指定:credentials:’include’,例如:
var result = fetch(url, {
credentials: 'include',
});
3.小结
本文简单地分别介绍了axios和fetch的使用方法和特点。如果要详细了解fetch的应用,推荐阅读 MDN Fetch 教程和WHATWG Fetch 规范。如有问题,欢迎指正。
此文已由作者授权腾讯云+社区发布,更多原文请点击
搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!
海量技术实践经验,尽在云加社区!
只知道ajax?你已经out了的更多相关文章
- Controller 的 Action 只接受 Ajax 请求
ASP.NET MVC 使 Controller 的 Action 只接受 Ajax 请求. 2014-08-27 14:19 by h82258652, 555 阅读, 2 评论, 收藏, 编辑 首 ...
- mvc 方法只允许ajax访问
有时候我们写一些方法 只想在ajax使用 其他的不想暴露 就可以对方法进行限制 如下: [AttributeUsage(AttributeTargets.Method)] public class ...
- 使用Attribute限制Action只接受Ajax请求
原博文 https://www.cnblogs.com/h82258652/p/3939365.html 代码 /// <summary> /// 仅允许Ajax操作 /// </s ...
- 让webapi只接受ajax请求
为了测试先做一个简单的webapi,直接用新建项目时默认的就可以了. 在浏览器中测试request get,得到结果 然后再项目中新建一个AjaxOnly的类 AjaxOnly继承Acti ...
- ASP.NET MVC 使 Controller 的 Action 只接受 Ajax 请求。
首先,ajax 请求跟一般的 web 请求本质是相同的,都是 http 请求.理论上服务器端是无法区分该次请求是不是 ajax 请求的,但是,既然标题都已经说了,那么肯定是有办法做的. 在 ajax ...
- ajax基础学习
AJAX即"Asynchronous JavaScript and XML",意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己 ...
- 快速理解-Ajax
AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己手动写AJAX,大多 ...
- C# WebApi传参之Post请求-AJAX
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷. 学无止境,精益求精 上一节讲述了C# WebApi传参之Get请求 ...
- ajax“显示弹窗详情”和“删除”功能练习
1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...
随机推荐
- 通过github安装crawley出现的问题
http://www.cnblogs.com/hbwxcw/p/7086188.html
- C++ 提取网页内容系列之四正则
标 题: C++ 提取网页内容系列之四作 者: itdef链 接: http://www.cnblogs.com/itdef/p/4173833.html 欢迎转帖 请保持文本完整并注明出处 将网页内 ...
- zabbix简介与部署
zabbix介绍 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管 ...
- Python day 4
阅读目录 内容回顾: 流程控制: if分支结构: while循环控制: for循环(迭代器): ##内容回顾: #1.变量名命名规范 -- 1.只能由数字.字母 及 _ 组成 -- 2.不能以数字开头 ...
- # 2019-2020.3 《java程序设计》第一周学习总结
2019-2020-3 <Java 程序设计>第一周学习总结 在本周的学习中,学习到了好多也收获了好多,从最基础的安装虚拟机开始,根据老师的博客中的教程一步一步的进行,在这过程中也遇到了好 ...
- mysql常用连接查询
连接数据库PDO $user = "root"; //数据库连接账号 $pass = "root"; //数据库连接密码 $dbname = "tes ...
- winform改变启动界面
我们知道,有时做个小项目什么的,一般从登录开始,再到主页,再到其他业务,如果做到其他页面功能,调试时还要从登录页面一个个点进去,明显的降低开发进度. 这时,我们可以直接将目标界面改为启动页面即可. u ...
- 使用pwm进行呼吸灯的设计
本文源码已经上传至csdn: 程序源码如下; #define LEDC_IO_0 (2) esp_err_t app_main() { ledc_timer_config_t ledc_timer = ...
- sublime text 3中安装ctags支持函数跳转,安装convertToUtf8支持中文步骤[工具篇]
sublime text x是个很不错的编辑器,但是各种插件都需要自己安装,有时也有点不方便,尤其是自己还不不知道怎么安装的时候.开发中经常用到的,函数跳转,就是一个比较难安装的东西,记录如下(系统为 ...
- OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 1.操作系统环境配置
1.OpenStack示例的架构介绍 1.1 各节点介绍 (1)控制节点(controller)控制节点(controller)上运行身份服务,镜像服务,计算节点管理,网络管理,各种网络代理和仪表板. ...