AJAX中有两套原生的API,一个是XHR(XMLHttpRequest),一个是Fetch API
axios是第三方库,在浏览器环境中使用的是XHR
umi-request也是第三方库,在浏览器环境中使用的是Fetch
在 AJAX(Asynchronous JavaScript and XML)中,原生的 API 主要有两种:XMLHttpRequest(简称 XHR)和Fetch API。这两者都用于在客户端与服务器之间进行异步通信,但它们有一些关键的区别,尤其是在使用方式、功能和灵活性上。以下是两者的详细比较和作用。
1.XMLHttpRequest(XHR)
XMLHttpRequest 是最早用于在浏览器中执行异步 HTTP 请求的 API,通常用于实现 AJAX 请求。它自 1999 年起就已被引入,长期以来是进行异步请求的标准方法。
主要特点:
- 语法复杂:使用起来相对较复杂,需要更多的配置和回调函数来处理请求的各个阶段(如发送请求、接收响应等)。
- 回调函数:它使用回调函数来处理异步响应,需要监听onreadystatechange 事件,或使用onload、onerror 等事件处理程序来处理响应。
- 支持的请求类型:XMLHttpRequest 支持多种 HTTP 请求方法(如GET、POST、PUT、DELETE 等)。
- 支持同步和异步请求:可以选择同步(阻塞)或异步(非阻塞)请求,但同步请求会导致浏览器冻结,影响用户体验,因此通常不推荐使用同步请求。
- 支持跨域请求:通过XMLHttpRequest 进行跨域请求时,需要使用 CORS(跨域资源共享)机制。
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // true表示异步请求xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {console.log("Response:", xhr.responseText); // 处理响应数据} else {console.error("Request failed with status:", xhr.status);}}
};xhr.send(); // 发送请求
优缺点:
- 优点:
- 支持所有主流浏览器。
- 可以处理复杂的请求场景。
- 缺点:
- 使用起来较为复杂,需要手动管理事件和回调。
- 不支持 Promise,需要额外处理异步操作。
---
2.Fetch API
Fetch API 是现代浏览器中新加入的用于发起网络请求的 API,相比XMLHttpRequest,Fetch 提供了更简洁、更强大的语法,并且它基于 Promise,支持更直观的异步操作。
主要特点:
- 基于 Promise:Fetch API 基于 Promise,这使得异步操作更加简洁和灵活。可以通过then() 和catch() 方法处理请求结果和错误。
- 默认异步:Fetch 请求默认是异步的,因此不会阻塞线程,也没有必要手动设置异步标志。
- 不支持同步请求:与XMLHttpRequest 不同,Fetch 不支持同步请求,始终是异步的。
- 响应处理:Fetch 返回的响应对象提供了更丰富的方法来处理响应数据,例如可以方便地将响应解析为 JSON、文本、二进制数据等。
- 支持 CORS:Fetch 与XMLHttpRequest 一样,支持跨域请求,但其跨域配置更加简洁。
示例代码:
fetch("https://api.example.com/data").then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 解析为 JSON}).then(data => {console.log("Response data:", data); // 处理数据}).catch(error => {console.error("There was a problem with the fetch operation:", error);});
优缺点:
- 优点:
- 基于 Promise,代码更加简洁、易于理解和维护。
- 更好地支持现代 JavaScript 的异步操作(如 async/await)。
- 对于响应处理(如 JSON 解析)更加方便和灵活。
- 缺点:
- 不支持较旧的浏览器(如 IE)。不过可以通过 polyfill 进行兼容。
- 需要手动处理 HTTP 错误(fetch 仅在网络失败时抛出错误,HTTP 错误状态(如 404、500)不会抛出异常)。
---
3. 关键区别
特性 |
|
|
API 风格 | 基于事件回调和状态变化 | 基于 Promise,支持 |
默认异步 | 支持同步和异步(不推荐使用同步) | 始终为异步 |
响应处理 | 使用 | 支持直接解析为 JSON、文本、二进制等 |
支持的功能 | 需要手动设置跨域(CORS)、状态检查等 | 自动处理跨域,默认遵循 CORS 标准 |
错误处理 | 需要监听 | 只会在网络错误时抛出异常,需要手动处理 HTTP 错误 |
支持的浏览器 | 广泛支持(包括较旧的浏览器) | 主要支持现代浏览器,需要 polyfill 来兼容旧版浏览器 |
同步请求 | 支持(但不推荐) | 不支持同步请求 |
功能点:
4. 总结
-XMLHttpRequest 是传统的 API,适合处理兼容性要求较高的项目,但使用起来较为繁琐,特别是处理回调和异步操作时。
-Fetch API 是现代的、基于 Promise 的 API,提供了更简洁的语法,易于使用,尤其是与async/await 结合使用时,代码更加清晰和可维护。不过,它不支持同步请求,并且需要现代浏览器支持。
因此,现代 Web 开发中,Fetch API 更为推荐,特别是当你的目标浏览器支持它时。如果需要兼容老旧浏览器,可能仍然需要使用XMLHttpRequest 或结合使用 polyfill 来实现。