JavaScript中Ajax的XMLHttpRequest在现代浏览器中怎么利用协程实现非阻塞的同步流-js教程-PHP中文网

xmlhttprequest 不支持协程，其异步机制基于事件循环和任务队列，而非协程挂起/恢复；async: false 已废弃且阻塞主线程；js 无原生协程，async/await 是 promise 的语法糖，提供类协程体验。

javascript中ajax的xmlhttprequest在现代浏览器中怎么利用协程实现非阻塞的同步流

JavaScript 中 XMLHttpRequest 本身并不支持协程，它也没有“利用协程实现非阻塞的同步流”这种机制。这个说法存在概念混淆——需要先厘清几个关键点：

XMLHttpRequest 是原生异步通信对象，不是协程实现载体

它基于浏览器底层事件循环和网络栈，通过回调（onload、onerror）、事件监听或 Promise 封装来处理响应。它的“异步”是事件驱动 + 任务队列的结果，而非协程挂起/恢复。现代浏览器中，XMLHttpRequest 的 async: true（默认）走的是标准异步流程；async: false 是已废弃的同步阻塞模式，会冻结主线程，完全违背“非阻塞”原则，且在现代浏览器（如 Chrome 80+、Firefox 73+）中已被禁用或发出警告。

协程在 JavaScript 中没有原生运行时支持

JS 是单线程、基于事件循环的语言，没有操作系统级或语言级的协程调度器。所谓“协程体现”，实际是通过 *生成器函数（`function）配合手动控制执行权** 模拟协作式调度，或更常见地——由 **async/await语法糖 + Promise 链** 实现逻辑上的“可暂停/恢复”感。但这只是语法层面的抽象，底层仍是微任务队列（Promise）和宏任务（如setTimeout`、IO 回调）的调度，并非真正的协程。

所谓“非阻塞的同步流”，本质是 async/await + Promise

你想要的效果——写起来像同步代码、执行时不卡界面、还能按顺序等待多个请求——正是 async/await 解决的问题。例如：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

async function fetchUserData() {
  try {
    // 看似同步写法，实则非阻塞
    const userRes = await fetch('/api/user');
    const userData = await userRes.json();

    const profileRes = await fetch(`/api/profile?id=${userData.id}`);
    const profileData = await profileRes.json();

    render({ user: userData, profile: profileData });
  } catch (err) {
    console.error(err);
  }
}

这里：

await 让出控制权，不阻塞主线程；
浏览器继续响应用户操作、渲染动画；
Promise resolve 后，引擎自动恢复函数执行（类似“恢复协程”）；
整个过程是逻辑串行、物理并行、完全非阻塞。

XMLHttpRequest 可以被 Promise 化，但没必要硬套生成器

虽然你可以用生成器模拟流程（比如 co 库早期做法），但现代标准方案是：

用 fetch()（推荐）或封装 XMLHttpRequest 返回 Promise；
用 async/await 组织流程；
配合 Promise.all() 实现并行请求，Promise.race() 做超时控制等。

例如封装一个 Promise 版 XHR：

function xhrPromise(options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || 'GET', options.url);
    xhr.onload = () => resolve(xhr);
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send(options.body);
  });
}

// 使用
async function loadData() {
  const [user, posts] = await Promise.all([
    xhrPromise({ url: '/api/user' }),
    xhrPromise({ url: '/api/posts' })
  ]);
}