前端JavaScript异步请求的两种方式详解

一、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));
      }
    };
  });
};

逻辑说明

1. 实例化 XHR 对象：通过 new XMLHttpRequest() 创建请求对象。
2. 打开请求通道：xhr.open("GET", url) 指定请求方式和目标地址。
3. 发送请求：xhr.send() 向服务器发送请求。
4. 监听状态变化：通过 xhr.onreadystatechange 监听请求状态的变化。当 readyState 为 4 时，表示响应内容已经到达，可以通过 xhr.responseText 获取数据。
5. 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("");
});

逻辑说明

1. 页面加载完成后执行：通过 DOMContentLoaded 事件，确保 DOM 元素已加载。
2. 发起请求：fetch(url) 直接发起请求，返回 Promise。
3. 解析数据：await result.json() 将响应体解析为 JSON 数据。
4. 渲染页面：同样将数据渲染到 <ul id="repos"></ul>。

优势

• 语法更简洁，链式调用更自然。
• 支持更丰富的配置和更好的语义化。
• 天然支持 Promise，易于与 async/await 配合。

三、对比与总结

结论

• XHR 适合需要兼容老浏览器或维护老项目时使用。
• fetch 更适合现代前端开发，推荐优先使用。

到此这篇关于前端JavaScript异步请求的两种方式详解的文章就介绍到这了,更多相关JavaScript异步请求方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论