一、基于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 | 内置支持 CancelToken |
| 浏览器兼容性 | 所有浏览器都支持 | 现代浏览器,需 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 的简洁语法,同时保留这些底层功能。
二、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 操作。