JS面试题之ajax、axios、fetch的区别

这篇具有很好参考价值的文章主要介绍了JS面试题之ajax、axios、fetch的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax

AsynchronousJavascriptAndXML

异步JavaScript和XML

它是一种创建交互式网页应用的网页开发技术

它是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页不使用ajax,如果需要更新内容,必须重载整个网页页面。其缺点如下:

  1. 本身是针对MVC编程,不符合前端MVVM的浪潮。
  2. 基于原生XHR开发,XHR本身的架构不清晰,不符合关注分离(Separation of Concerns)的原则。配置和调用方式非常混乱。而且基于事件的异步模型不友好。

Fetch

号称是ajax的替代品,是在es6出现的,使用了es6中的promise对象。

fetch是基于promise设计的。fetch的代码结构比起ajax简单多。

fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。

fetch的优点:

  1. 语法简洁,更加语义化
  2. 基于标准Promise实现,支持async/await,更加底层,提供的API丰富(request,response)
  3. 脱离了XHR,是ES规范里新的实现方式

fetch的缺点:

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

Axios

Axios是一种基于Promise封装的HTTP客户端。其特点如下:

  1. 浏览器端发起XMLHttpRequest请求
  2. node端发起http请求,支持Promise API,监听请求和返回,对请求和返回进行转化
  3. 取消请求
  4. 自动转换json数据
  5. 客户端支持抵御XSRF攻击

参考资料:JS面试题之ajax、axios、fetch的区别文章来源地址https://www.toymoban.com/news/detail-422521.html

到了这里,关于JS面试题之ajax、axios、fetch的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(38)
  • 前端如何中断请求 ( axios、原生 ajax、fetch)

    使用场景 在前端开发中,我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景: 比如 重复请求:当页面中多个组件并发调用同一个接口时,在第一个请求返回后,我们可能需要中断其他组件对该接口的调用,以避免重复请求和冗余数据。这

    2024年02月04日
    浏览(37)
  • 前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写)是一组Web开发技术,Ajax不是一种技术,而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。 技术实现 用于演示的HTML(或 XHTML)和

    2024年01月22日
    浏览(43)
  • ajax和fetch的区别

    ajax 和 fetch的相同点和区别是什么? 以前我们都用ajax去做请求, 但是原生的ajax不好用,我们会用$.ajax或者axios插件去请求,他们都是ajax的封装 最近出来个fetch是什么? 问到这里的时候,你就已经入坑了, 因为 ajax只是一个异步xhr解决方案的概念,不能和fetch这个api同日而语

    2024年02月11日
    浏览(60)
  • fetch、axios 和 XMLHttpRequest的区别

    官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest XMLHttpRequest (XHR) 是一种在客户端和服务器之间进行异步数据交换的技术,它允许浏览器向服务器发送HTTP请求,获取数据并更新部分网页内容,而无需刷新整个页面。XHR 是现代Web开发中常用的一种技术,用于实现AJA

    2024年01月16日
    浏览(25)
  • Vue中如何使用Ajax请求是通过第三方库axios或者原生的fetch API来实现的

    在Vue中使用Ajax请求通常是通过第三方库,比如axios或者原生的fetch API来实现的。这里我将为你展示如何使用axios库在Vue中进行Ajax请求。 首先,你需要安装axios库。你可以通过npm或者yarn来安装: 使用npm: bash     复制 npm install axios 或者使用yarn: bash 复制 yarn add axios 安装完成后

    2024年04月13日
    浏览(39)
  • ajax和axios有什么区别?

    1、ajax和axios有什么区别? ajax特点:     1.异步的XML和JavaScript     2.可以运行浏览器 不可以运行在node     3.发送给后台数据需要手动转换 请求头手动设置     4.后端响应的数据需要自己转换/json格式 axios特点:     1.基于promise的http库     2.可以调用promise的api     3.axi

    2024年02月08日
    浏览(27)
  • 图文并茂教你模拟302接口,实现js中axios,fetch遇到302状态码后跳转的多种方案axios,fetch成功响应拦截302

    日常工作中,我们会使用fetch,或者axios发起请求来获取数据,但是当我们遇到一些特殊需求的时候,使用不同库之后,会得到不同的结果,例如302,308的状态码,那么我们应该怎么处理这两种情况呢? 如何使用多种方案实现前端代码+302后端接口实现页面跳转? fetch 发送GET 或者

    2024年02月20日
    浏览(35)
  • 每天一道面试题之==和equals的区别是什么?

    \\\"==\\\"是一个关系运算符 ,关系运算符可以用来进行数据和数据之间的比较,而在java中数据类型大致可以分为两大类分别是 基本数据类型 和 引用数据类型 。 基本数据类型 包含 byte,int,float,double,char,boolean,long,short八种类型。 引用类型 包含类,数组,接口三种类型。

    2024年02月06日
    浏览(32)
  • 每日一道面试题之Collection 和 Collections 有什么区别?

    Collection和Collections是Java集合框架中的两个重要的概念,它们在Java集合框架中扮演不同的角色。 Collection 是 Java集合框架中的一个接口 ,它是 所有集合类的根接口 , 用于操作和管理一组对象 ,Collection接口的常见实现类包括 List、Set和Queue 等,分别定义了不同的存储方式。

    2024年02月16日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包