Ajax
AsynchronousJavascriptAndXML
异步JavaScript和XML
它是一种创建交互式网页应用的网页开发技术。
它是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页不使用ajax,如果需要更新内容,必须重载整个网页页面。其缺点如下:
- 本身是针对MVC编程,不符合前端MVVM的浪潮。
- 基于原生XHR开发,XHR本身的架构不清晰,不符合关注分离(Separation of Concerns)的原则。配置和调用方式非常混乱。而且基于事件的异步模型不友好。
Fetch
号称是ajax的替代品,是在es6出现的,使用了es6中的promise对象。
fetch是基于promise设计的。fetch的代码结构比起ajax简单多。
fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。
fetch的优点:
- 语法简洁,更加语义化
- 基于标准Promise实现,支持async/await,更加底层,提供的API丰富(request,response)
- 脱离了XHR,是ES规范里新的实现方式
fetch的缺点:
- fetch只对网络请求报错,对400,500都当做成功的请求。服务器返回400,500错误码时并不会reject,只有网络错误这些导致请求不能完成时,fetch才会被reject
- fetch默认不会带cookie,需要添加配置项:fetch(url, {credentials:‘indude’})
- fetch不支持abort,不支持超时控制,使用setTimeout及Promise
- reject实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
- fetch没有办法原生监测请求的进度,而XHR可以
Axios
Axios是一种基于Promise封装的HTTP客户端。其特点如下:文章来源:https://www.toymoban.com/news/detail-422521.html
- 浏览器端发起XMLHttpRequest请求
- node端发起http请求,支持Promise API,监听请求和返回,对请求和返回进行转化
- 取消请求
- 自动转换json数据
- 客户端支持抵御XSRF攻击
参考资料:JS面试题之ajax、axios、fetch的区别文章来源地址https://www.toymoban.com/news/detail-422521.html
到了这里,关于JS面试题之ajax、axios、fetch的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!