深度解析ReAct智能体循环与JavaScript异步并发原理

本文聚焦两大核心内容：第一部分深入解析 AI Agent 与普通对话大模型的本质区别，详细阐述 ReAct 循环与工具调用的核心逻辑；第二部分直接进入浏览器异步请求实战，逐行剖析 Promise、async、await、.then() 的底层运行机制与并发特性。完整代码附于末尾，方便直接运行验证。

一、AI Agent 底层原理：与普通对话 AI 的本质差异

1. 普通对话 LLM：单次单向问答流程

日常使用的普通对话 AI，其执行链路是一个一次性的闭合循环：用户输入指令 → LLM 调用训练阶段积累的旧知识生成文本 → 输出内容后流程结束。整个过程无自主循环空间，也无法主动访问外部资源。例如，若要求它撰写一份竞品分析报告，它只能依赖训练时沉淀的历史数据生成文字，无法自行联网获取竞品最新动态或抓取财务数据。输出完成后流程直接终止，不具备自我校验或补充信息的能力。

2. AI Agent：基于 ReAct 的循环自主执行架构

Agent 的核心特征在于其可持续循环的执行链路。标准流程称为 ReAct，由三个动作循环往复执行，直至任务完成或触发终止条件：

1. Reason（思考）：大模型自主分解复杂任务，判断当前缺失的信息，规划下一步行动。
2. Act（行动）：调用外部工具完成实际工作——包括联网搜索、运行代码、浏览器访问、调用 API 等。
3. Observe（观察）：接收工具返回的结果，评估现有信息是否足以完成任务。

一轮循环结束后，自动返回“思考”阶段，继续迭代，直到信息完备才停止。

场景示例：Agent 完成竞品分析报告完整循环

1. 思考：缺少竞品实时业务数据，需调用搜索工具；行动：发起联网搜索；观察：获取竞品基础动态，发现仍缺财务报表数据。
2. 再次思考：需要调用股市财务接口补充数据；行动：请求财务 API；观察：所有信息收集完毕，无需再调工具。
3. 终止循环，整合外部数据输出完整报告。

3. Agent 的核心能力：Tool Use 工具调用

工具是 Agent 连接现实世界的唯一桥梁。缺乏工具的 Agent 本质上与普通对话 LLM 无异，只能输出纯文本。可用的工具集合直接决定 Agent 的能力边界：

• 联网搜索工具：获取实时动态、最新资讯。
• 代码执行沙盒：运行代码、批量计算、自动化测试。
• 文件读写工具：生成本地文档、修改内容、导出文件。
• 浏览器自动化工具：模拟用户操作网页、抓取实时数据。
• 第三方 API 调用：对接企业内部系统、各类业务服务接口。

补充说明：ReAct 作为一套通用执行标准，并非 LangChain 等开发框架专属。市面上所有 Agent 开发框架底层均基于该循环逻辑封装实现。

二、JS 异步代码深度解析（重点 Promise / async / await / .then）

1. 基础概念铺垫：Promise 核心规则

Promise 是 JavaScript 中专门管理异步操作的对象——网络请求、定时器、文件读取等均属其范畴。其诞生初衷是解决历史遗留的“回调地狱”问题，避免多层嵌套导致的代码可读性下降。

1. 三种不可逆状态：

   • pending：初始等待状态，异步操作尚未完成。
   • fulfilled：异步执行成功，状态锁定后触发 .then() 回调。
   • rejected：异步执行失败，状态锁定后触发 .catch() 回调。
2. 状态一旦切换至 fulfilled 或 rejected，即永久固定，不可再次变更。
3. 浏览器原生 fetch 接口发起网络请求后，返回的值本身即为 Promise 对象。

2. async 关键字详解：修饰函数，自动包装返回 Promise

代码中定义了两个请求函数：

const getStory = async () => fetch('https://v1.hitokoto.cn/?c=i&encode=json')
const getRatp = async () => fetch('https://api.1314.cool/bingimg/?type=json&rand=1')

• async 仅用于修饰函数，置于函数声明或箭头函数之前。
• 无论函数内部返回何种类型的值，async 都会自动将返回值包装成 Promise：
  • 若返回普通常量 return 123，等价于 Promise.resolve(123)；
  • 若函数内部抛出错误，等价于 Promise.reject(错误信息)。
• 示例中 fetch 本身返回 Promise，外层再套 async，调用 getStory()、getRatp() 时仍然得到两个独立的 Promise 对象，对应两个互不依赖的网络请求。

3. await 关键字：阻塞等待 Promise 完成（注释串行代码对比）

源码中注释了一段串行写法：

// const story = await getStory();
// const ratp = await getRatp();

1. await 有使用限制：只能写在 async 修饰的函数内部，在全局环境下使用会直接抛出语法错误。
2. 其核心作用：暂停当前函数中后续代码的执行，直至后方 Promise 执行完毕并返回结果，随后继续向下运行。
3. 这段注释代码即为串行请求：先发起一言接口请求，等待完整响应结束后，再发起必应壁纸接口请求。总耗时 = 接口1耗时 + 接口2耗时。
4. 与下文 Promise.all 的并行写法相比，性能差异明显。对于无依赖关系的接口，推荐采用并行执行策略。

4. Promise.all：并行批量处理多个 Promise（核心重点）

Promise.all([getStory(), getRatp()])

1. 入参要求：接收一个由多个 Promise 实例组成的数组。

2. 执行逻辑：数组内所有 Promise 同步并发发起，两个网络请求同时发送。总耗时等于耗时最长的那个接口的时间，比串行 await 快得多。

3. 返回规则：

   • 仅当数组内全部 Promise 均执行成功（fulfilled）时，才会进入后续的 .then() 回调。
   • 返回的结果是一个数组，其顺序与传入的 Promise 数组严格对应，与接口响应先后无关。例如，壁纸接口 100ms 返回、一言接口 500ms 返回，结果数组仍按 [一言结果, 壁纸结果] 顺序排列。

4. 标志性特性——快速失败：数组内任意一个 Promise 失败（如 404 错误、网络断开、请求异常），整个 Promise.all 立即终止，直接跳转至 .catch()，其余未完成的 Promise 的结果直接被丢弃。

5. .then() 链式回调：接收成功结果，返回新 Promise

.then(response => {
  return Promise.all(response.map(res => res.json()))
})

1. .then() 的入参是上一层 Promise.all 成功返回的数组，其中包含两个 fetch 获取的 Response 响应对象。
2. res.json() 是 Response 对象自带的异步方法，用于将 JSON 字符串解析为 JavaScript 对象，该方法本身也返回 Promise。
3. 通过 response.map 遍历所有 Response 对象，批量调用 .json() 生成一组新 Promise，再使用 Promise.all 并行完成所有 JSON 解析。
4. .then() 内部若包含 return，则返回值会被自动包装成 Promise，并传递给下一层链式回调——这便是 Promise 链式调用的底层机制。

6. .catch() 统一捕获全链路异步错误

.catch(response => {
  console.log(response)
})

1. .catch() 可以捕获整条 Promise 链上任一位置的失败：包括第一层 Promise.all 的接口请求失败、第二层 res.json() 解析时的格式错误等。
2. 结合 Promise.all 的快速失败特性：只要某一步异步操作抛出错误，代码直接跳转到此 catch，不再执行后续任何 .then() 逻辑。
3. 对比而言，若使用 async/await 串行写法，需搭配 try/catch 才能捕获异常；而 .then/.catch 链式写法能够集中统一处理全链路异常，代码更简洁。

7. async 主函数 main 与程序执行入口

async function main() {
  Promise.all([getStory(), getRatp()])
    .then(response => {
      return Promise.all(response.map(res => res.json()))
    })
    .catch(response => {
      console.log(response)
    })
}
main();

• 函数 main 被 async 修饰，理论上内部可以使用 await，但本代码完全依赖 Promise 静态方法实现并发，未使用 await。
• 末尾手动调用 main()，页面加载完成后自动触发整套异步请求，同时发起两个网络接口调用。

8. 串行 await 和 Promise.all 并行核心区别总结

1. 串行（注释中的 await 代码）：接口按顺序执行，总耗时叠加。适用于接口之间存在数据依赖的场景（第二个接口需要第一个接口的返回参数）。
2. 并行（Promise.all）：同时发起所有无依赖接口，总耗时取最长接口的耗时。适用于多个独立接口批量请求，可大幅优化页面加载速度。
3. 风险提示：Promise.all 具有快速失败特性。若业务场景需要等待所有请求完成、无论成功失败都要保留全部结果，可改用 Promise.allSettled。

完整可运行代码（放在本模块末尾）

三、全文总结

1. AI Agent 的核心竞争力不在于对话能力，而在于 ReAct 循环自主思考 + 工具调用；普通 LLM 只能单次应答，无法自主迭代完成复杂任务。可用的工具集合直接决定了 Agent 的能力上限。
2. async 用于修饰函数，使函数天然返回 Promise；await 用于阻塞等待异步结果，适合存在数据依赖的串行异步逻辑。
3. Promise.all 实现无依赖异步任务的并发，搭配多层 .then() 链式处理分层异步逻辑，.catch() 统一捕获整条链路的所有异常。
4. fetch 返回原生 Promise 对象，接口响应后的 .json() 解析操作仍属于异步 Promise。批量解析多接口 JSON 时需二次使用 Promise.all 并行处理。