只知道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 规范。如有问题,欢迎指正。
相关阅读
【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识
此文已由作者授权腾讯云+社区发布,更多原文请点击
搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!
海量技术实践经验,尽在云加社区!
只知道ajax?你已经out了相关推荐
- 爬取的网页翻页是js的(构造post请求,ajax 异步刷新的, 只抓ajax调用的接口就行),然后保存固定格式
import requests import json from lxml import etree import time''' 注意,河北省博物馆这个网站.从第二页开始是这样匹配的replys = ...
- js 只刷新ajax,JS实现AJAX局部刷新(附代码)
这次给大家带来JS实现AJAX局部刷新(附代码),JS实现AJAX局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下. AJAX即"Asynchronous Javascript An ...
- iframe解决跨域ajax请求的方法
iframe跨域的基本前提是,一个页面可以嵌套非同源站点的html文件,以及某一个域名下的html页面可以通过脚本向同域名服务器发出ajax请求.当一个域名为domain1下的页面A想要向domain ...
- ajax调用上一个ajax,关于jquery:当频繁使用ajax请求调用函数时,如何在处理下一个请求之前等待上一个ajax请求完成?...
本问题已经有最佳答案,请猛点这里访问. 我在我的代码中有一个ajax请求,如下所示: function show_detail() { $('#product_'+index).html(' load ...
- 基于jQuery的AJAX和JSON实现纯html数据模板
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table ...
- ajax 前端怎么处理数据,如何使用ajax异步处理JSon数据
基于jQuery的ajax数据库异步处理,网上有很多教程,今天再次分享这个话题,算是抛砖引玉,不了解的童鞋可以来学习下. 先我们来看一个官方的实例 使用 ajax请求来获得 JSON 数据,并输出结果 ...
- ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤(详细代码)
在前端工作中,经常会用到ajax,其实很多人只知道ajax是异步请求,不知道应该如何用它,它的基本步骤有哪些,ajax请求过程是怎样的?接下来这篇文章就给大家介绍Ajax的请求步骤,以及ajax请求步 ...
- $.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式
这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题.大家可以收藏起来,以备用时之需! 1.同源策略 1.1 含义 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略&q ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
最新文章
- 海洋主题绘画_神奇宝贝:海洋生物的艺术世界绘画比赛获奖作品展来啦!
- 区块链开发公司谈区块链将会成为下一场科技革命
- ChipScope Pro分析仪
- 文巾解题 6. Z 字形变换
- 在centos7中安装MySQL5.7
- element表格固定某一行_WPS表格快捷键讲解大全1(区域选取)!
- string是线程安全的么_Java-21 多线程 - 是阿凯啊
- 秀!微软《550页图解.Net+WPF完整版》.pdf 附下载!
- 'display','position'和'float'相互关系
- ubuntu安装ipfs
- 一步一步写算法(之选择排序)
- jquery1.8.3和1.11.3的用法区别
- Unity第一人称可视化传送门制作
- MATLAB视频与图片之间的相互转换
- 三维点云语义地图 TSDF
- linux双机热备软件 mysql,Linux Mysql 双机热备安装详解
- 大连新知源09年3月RHCE考试通过率90.9% —— 注重能力培养
- java将域名解析为IP地址,获取网卡的配置信息
- 13商软 团队博客 列表
- Java扫雷游戏心得体会总结_扫雷心得 - stme - BlogJava
热门文章
- nodejs mysql 创建连接池
- Android中处理崩溃异常 (转)
- Win32 SDK 编写截图小工具
- 编辑器推荐KindEditor
- php html5 css样式,怎么在html页面写css样式表
- Python爬虫开发与项目实践
- Matlab | Matlab从入门到放弃(6)——数组
- hashmap 复制_复杂链表的复制
- php入门公开课,【PHP公开课|送你一篇有关laravel入门教程的php菜鸟笔记】- 环球网校...
- ajax如何将数据写入文本框,ajax 从数据库读到文本框