《axios-ajax-fetch-区别以及优缺点.docx》由会员分享,可在线阅读,更多相关《axios-ajax-fetch-区别以及优缺点.docx(4页珍藏版)》请在第一文库网上搜索。
1、axiosajaxfetch区别以及优缺点将jQuey的ajax、axios和fetch做个简单的比较,所谓仁者见仁智者见智,最终使用哪个还是自行斟酌1.jQueryajax$.ajax(type:,POSTzur1:ur1zdata:data,dataType:dataTypezsuccess:function()terror:function();优缺点: 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案 JQUery整个项目太大,单纯使用ajax却要引入整个JQUery非常的不合理(采取个性化打包的方案又不能
2、享受CDN服务)2.axiosaxios(method:,post,rur1:,user12345,zdata:firstName:,Fred,rIastName:,F1intstone,).then(function(response)conso1e.1og(response);).catch(function(error)conso1e.1og(error););优缺点: 从node.js创建http请求 支持PromiseAPI 客户端支持防止CSRF 提供了一些并发请求的接口(重要,方便了很多的操作)3.fetchtry(1etresponse=awaitfetch(ur1);1etd
3、ata=response.json();conso1e.1og(data);catch(e)conso1e.1og(Oopsrerrorfe);优缺点: 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里 更好更方便的写法 更加底层,提供的AP1丰富(request,response) 脱离了XHR,是ES规范里新的实现方式 1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理 2)fetch默认不会带COOkie,需要添加配置项 3)fetch不支持abort,不支持超时控制,使用SetTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费 4)fetch没有办法原生监测请求的进度,而XHR可以为什么要用axios?axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,它本身具有以下特征:.从浏览器中创建XM1HttpRequest 从node.js发出http请求 支持PromiseAPI 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSoN数据 客户端支持防止CSRF/XSRF