前端JavaScript异步请求的两种方式详解
作者：LeeAt
在现代前端开发中,前后端分离已成为主流,前端经常需要主动向后端请求数据接口,实现页面的动态更新,本文将通过两个示例,介绍前端常用的两种异步请求方式：XMLHttpRequest（XHR）和 fetch,并结合代码和注释进行详细讲解,需要的朋友可以参考下
一、XMLHttpRequest（XHR）方式
早期的前端异步请求主要依赖于 XMLHttpRequest 对象。它允许 JavaScript 以异步方式与服务器进行数据交换，而无需重新加载整个页面。
代码示例
const getJSON = async url => {
return new Promise((resolve, reject) => {
// executor 执行器
// 开始处于pending状态
const xhr = new XMLHttpRequest(); // 实例化
xhr.open("GET", "https://api.github.com/users/LeeAt67/repos");
console.log(xhr.readyState);
xhr.send(); // 发送请求
// 事件监听 回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
// 响应内容到达了
resolve(JSON.parse(xhr.responseText));
}
};
});
};
逻辑说明
- 实例化 XHR 对象：通过
new XMLHttpRequest()创建请求对象。 - 打开请求通道：
xhr.open("GET", url)指定请求方式和目标地址。 - 发送请求：
xhr.send()向服务器发送请求。 - 监听状态变化：通过
xhr.onreadystatechange监听请求状态的变化。当readyState为 4 时，表示响应内容已经到达，可以通过xhr.responseText获取数据。 - Promise 封装：将 XHR 封装在 Promise 中，使其支持
async/await，更符合现代 JavaScript 的异步编程习惯。
页面渲染
请求到的数据会被渲染到页面的 <ul id="repos"></ul> 元素中：
document.getElementById("repos").innerHTML = data
.map(item => `<li>${item.name}</li>`)
.join("");
二、Fetch 方式
随着 ES6+ 的普及，fetch API 成为更现代、更简洁的异步请求方式。它本质上返回一个 Promise 实例，天然支持 async/await。
代码示例
document.addEventListener("DOMContentLoaded", async () => {
const result = await fetch("https://api.github.com/users/LeeAt67/repos");
const data = await result.json();
document.getElementById("repos").innerHTML = data
.map(item => `<li>${item.name}</li>`)
.join("");
});
逻辑说明
- 页面加载完成后执行：通过
DOMContentLoaded事件，确保 DOM 元素已加载。 - 发起请求：
fetch(url)直接发起请求，返回 Promise。 - 解析数据：
await result.json()将响应体解析为 JSON 数据。 - 渲染页面：同样将数据渲染到
<ul id="repos"></ul>。
优势
- 语法更简洁，链式调用更自然。
- 支持更丰富的配置和更好的语义化。
- 天然支持 Promise，易于与
async/await配合。
三、对比与总结
| 特性 | XMLHttpRequest | fetch |
|---|---|---|
| 语法 | 相对繁琐，需要事件监听 | 简洁，Promise 化 |
| 支持 | 兼容性好，老项目常用 | 现代浏览器原生支持 |
| 返回值 | 无 Promise，需手动封装 | 返回 Promise，支持 async/await |
| 错误处理 | 需手动判断状态码 | 可直接用 try/catch |
结论
- XHR 适合需要兼容老浏览器或维护老项目时使用。
- fetch 更适合现代前端开发，推荐优先使用。
到此这篇关于前端JavaScript异步请求的两种方式详解的文章就介绍到这了,更多相关JavaScript异步请求方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！