Jquery ajax, Fetch, Axios比较汇总

Ajax:最原始的方式,基于原生的js

XmlHttpRequest:多个请求之间如果有先后关系,会存在很多层回调的问题,也是基于原生js

Jquery Ajax:基于原生XHR封装,依赖Jquery框架,由jquery 框架去封装原生的XML(Xml)封装的API,支持JSONP

(优点:1.功能齐全,使用方便;

缺点:1.是MVC编程的一种请求方式,不符合现在前端的MVVC的浪潮;

2.基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案

3.依赖Jquery框架,对项目来说过重了。)

Fetch:基于原生XHR封装,在ES6 出现,是Ajax的替代品,使用了ES6的promise 对象,所以可以使用then 和catch,

(优点:1.更加底层,API很丰富;

2.脱离XHR,是ES规范里新的实现方式;

3.但是对于跨域的处理,fetch可以设置mode:"no-cors" 

缺点:1.fetch是低底层的API,类似于XHR,所以用起来不方便,还得自己封装;

2对于网络报错的错误码400 500 都会当作成功的操作,会进入then,而不是catch,所以需要自己封装;

3.fetch 默认不带cookie,需要自己添加配置项目credentials: 'include';

4.fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费;

5.fetch没有办法原生监测请求的进度,而XHR可以)

axios:对原生XHR的封装,需要进行安装,可以在客户端使用,也可以在node端使用,基于promise对象,所以可以使用then和catch

(优点:1.基于promise的实现版本,符合最新的ES规范;

2.支持promise 的api;

3.客户端支持防止CSRF,就是让你的每个请求都带一个从cookie中拿到的key,根据浏览器同源策略,假冒的网站拿不到你cookie中得到key,这样,后台就可以轻松辨别出这些请求是否是用户在假冒网站上的误导收入,从而采取正确的措施;

4.提供了一些并发请求的接口,axios.all;

5.体积小)

你可能感兴趣的:(Jquery ajax, Fetch, Axios比较汇总)