一、基于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
4、Axios, Fetch和XMLHttpRequest 比较
特性 | XMLHttpRequest | Fetch | Axios |
---|---|---|---|
Promise 支持 | 否 | 是 | 是 |
语法简洁 | 否 | 是 | 是 |
自动 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 操作。