前端异步请求的两种方式：XMLHttpRequest 与 Fetch

前言

在现代前端开发中，前后端分离已成为主流，前端经常需要主动向后端请求数据接口，实现页面的动态更新。本文将通过两个示例，介绍前端常用的两种异步请求方式：XMLHttpRequest（XHR）和 fetch，并结合代码和注释进行详细讲解。

一、XMLHttpRequest（XHR）方式

早期的前端异步请求主要依赖于 XMLHttpRequest 对象。它允许 JavaScript 以异步方式与服务器进行数据交换，而无需重新加载整个页面。

代码示例

js 复制代码

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> 元素中：

js 复制代码

document.getElementById("repos").innerHTML = data
  .map(item => `<li>${item.name}</li>`)
  .join("");

二、Fetch 方式

随着 ES6+ 的普及，fetch API 成为更现代、更简洁的异步请求方式。它本质上返回一个 Promise 实例，天然支持 async/await。

代码示例

js 复制代码

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 更适合现代前端开发，推荐优先使用。