XMLHttpRequest、Fetch、Axios和AJAX的关系

打印 上一主题 下一主题

主题 807|帖子 807|积分 2421

一、基于http协议用于前后端通讯的工具

1、XMLHttpRequest(原生JS对象)

XMLHttpRequest(XHR)是 原生 JavaScript 对象 。通过 XMLHttpRequest 可以在 不刷新 页面的情况下请求特定 URL,获取数据。
特性:



  • 欣赏器广泛支持
  • 功能丰富:可以跟踪请求的状态、支持进度事件、文件上传、同步请求等
  • 可同步可异步
  • 不支持Promise API
2、Fetch (欣赏器原生API)

(1)Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部门,例如请求和相应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。这种功能从前是利用 XMLHttpRequest 实现的。Fetch 提供了一个更抱负的 替换 方案。
(2)fetch() 方法用于发起获取资源的请求,它会返回一个会在请求相应后兑现的 promise。该 promise 会兑现一个体现请求相应的 Response 对象。
相比XMLHttpRequest:



  • 语法更加简便
  • 提供了Promise API支持
  • 支持流式处理,允许渐渐读取相应数据,恰当大文件的处理
3、Axios(第三方库)

Axios 是一个基于 promise 网络请求库,作用于node.js 和欣赏器中。 它是 isomorphic 的(即同一套代码可以运行在欣赏器和node.js中)。在服务端它利用原生 node.js http 模块, 而在客户端 (欣赏端) 则利用 XMLHttpRequests
其他特性:



  • 支持Promise API
  • 拦截请求和相应
  • 转换请求和相应数据
  • 取消请求
  • 超时处理
  • 查询参数序列化支持嵌套项处理
  • 主动将请求体序列化为:

    • JSON (application/json)
    • Multipart / FormData (multipart/form-data)
    • URL encoded form (application/x-www-form-urlencoded)

  • 将 HTML Form 转换成 JSON 进行请求
  • 主动转换JSON数据
  • 获取欣赏器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间)
  • 兼容符合规范的 FormData 和 Blob(包罗 node.js)
  • 客户端支持防御XSRF
Axios的详细先容及利用指南
4、Axios, Fetch和XMLHttpRequest 比较

特性XMLHttpRequestFetchAxiosPromise 支持否是是语法简便否是是主动 JSON 解析否否是错误处理必要手动处理必要手动查抄状态码主动处理 HTTP 错误进度跟踪是否是拦截器否否请求和相应拦截器请求取消必要手动实现通过 AbortController支持 AbortController欣赏器兼容性所有欣赏器都支持现代欣赏器,需 polyfill 支持 IE现代欣赏器(需引入外部库)Node.js 支持否必要 polyfill是体积原生 JS对象原生 API外部库,体积较大流式处理相应否是(支持 ReadableStream)否同步请求支持不支持不支持 5、Axios为什么利用XMLHttpRequest实现,而不是更加现代的Fetch?

(1)历史缘故原由:Axios2014年就开始维护了,Promise和Fetch()是ES6(2015年)才更新的,所以有一部门的历史缘故原由,根据升级日记来看,Axios的Promise支持也是2015年才加上的。
(2)兼容性:XMLHttpRequest兼容性更高,除了现代欣赏器也支持老欣赏器。
(3)功能:XMLHttpRequest可提供的底层功能更多,Axios 通过封装 XMLHttpRequest,可以提供雷同 Fetch 的简便语法,同时保留这些底层功能。
(4)必要留意的是技术是在不断变化和完善的:从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 来实现取消请求的功能,并弃用了之前的CancelToken。
二、AJAX(web开发技术)

(1)AJAX(Asynchronous JavaScript And XML)是一种在 Web 应用中通过 异步 发送 HTTP 请求向服务器获取内容,并利用这些新内容更新页面中相干的部门,而 无需重新加载 整个页面的 Web 开发技术。
(2)一开始的时候 AJAX 通过利用 XMLHttpRequest 接口实现,但是 fetch() API 更恰当用于开发现代 Web 应用:更出色、更灵活、更好地与一些 Web 应用的根本技术相结合(如 Service Worker)。
(3)AJAX 的 本质 :AJAX指的是通过 JavaScript 进行异步 HTTP 请求,而不是具体的工具或库。因此,不论是利用原生的 XMLHttpRequest、Fetch API,还是 Axios,它们都可以用于实现 AJAX 操作。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

尚未崩坏

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表