ajax和axios、fetch的介绍及区别

1.jQuery ajaxjavascript

$.ajax({
   type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 

传统 Ajax 指的是 XMLHttpRequest(XHR), 最先出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间若是有前后关系的话,就会出现回调地狱
JQuery ajax 是对原生XHR的封装,除此之外还增添了对JSONP的支持。缺点以下:
1.自己是针对MVC的编程,不符合如今前端MVVM的浪潮
2.基于原生的XHR开发,XHR自己的架构不清晰。
3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery很是的不合理(采起个性化打包的方案又不能享受CDN服务)
4.不符合关注分离(Separation of Concerns)的原则
5.配置和调用方式很是混乱,并且基于事件的异步模型不友好css

2.axios前端

axios({
    method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 

Vue2.0以后,尤雨溪推荐你们用axios替换JQuery ajax,想必让axios进入了不少人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它自己具备如下特征:
1.从浏览器中建立 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了不少的操做)
5.从 node.js 建立 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每一个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就能够轻松辨别出这个请求是不是用户在假冒网站上的误导输入,从而采起正确的策略。
3.fetchjava

try { let response = await fetch(url); let data = response.json(); console.log(data); } catch(e) { console.log("Oops, error", e); } 

fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。可是,必定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象
fetch的优势:
1.符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
坦白说,上面的理由对我来讲彻底没有什么说服力,由于不论是Jquery仍是Axios都已经帮咱们把xhr封装的足够好,使用起来也足够方便,为何咱们还要花费大力气去学习fetch?
我认为fetch的优点主要优点就是:node

1. 语法简洁,更加语义化 2. 基于标准 Promise 实现,支持 async/await 3. 同构方便,使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) 4.更加底层,提供的API丰富(request, response) 5.脱离了XHR,是ES规范里新的实现方式 

最近在使用fetch的时候,也遇到了很多的问题:
fetch是一个低层次的API,你能够把它考虑成原生的XHR,因此使用起来并非那么舒服,须要进行封装。
例如:ios

1)fetch只对网络请求报错,对400,500都当作成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些致使请求不能完成时,fetch 才会被 reject。 2)fetch默认不会带cookie,须要添加配置项: fetch(url, {credentials: 'include'}) 3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,形成了流量的浪费 4)fetch没有办法原生监测请求的进度,而XHR能够 

总结:axios既提供了并发的封装,也没有fetch的各类问题,并且体积也较小,当之无愧如今最应该选用的请求的方式。git

相关文章
相关标签/搜索