游乐游手机版
首页/AI教程/文章详情

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

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

本文聚焦两大核心内容：第一部分深入解析 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。

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




  
  
  Document

三、全文总结

  1. AI Agent 的核心竞争力不在于对话能力，而在于 ReAct 循环自主思考 + 工具调用；普通 LLM 只能单次应答，无法自主迭代完成复杂任务。可用的工具集合直接决定了 Agent 的能力上限。
  2. async 用于修饰函数，使函数天然返回 Promise；await 用于阻塞等待异步结果，适合存在数据依赖的串行异步逻辑。
  3. Promise.all 实现无依赖异步任务的并发，搭配多层 .then() 链式处理分层异步逻辑，.catch() 统一捕获整条链路的所有异常。
  4. fetch 返回原生 Promise 对象，接口响应后的 .json() 解析操作仍属于异步 Promise。批量解析多接口 JSON 时需二次使用 Promise.all 并行处理。
来源：https://juejin.cn/post/7659671273130164274
javascript
上一篇Claude必备技能与超级能力从入门到精通完整指南 下一篇火山引擎Supabase融入Agent Plan CLI与Skills完全一步步保姆级上手教程
本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容，方便继续浏览更多相关内容。

爬虫开发中JavaScript与Python语言特性对比 零基础也能学会的实用编程技术教程精选 VSCode 运行 JavaScript 文件的详细教程 Axios使用教程完全指南让你轻松搞定网络请求 AWS API网关路径参数重命名方法 领导力与人工智能有效利用实战策略 2026年第16周JavaScript技术周刊

同类最新

继续查看同栏目最近更新的文章。

更多
Claude Code官方教你Loop工程附6大省token技巧
AI教程 · 2026-07-08

Claude Code官方教你Loop工程附6大省token技巧

之前写过一篇《Loop Engineering 的保姆级教程》，从概念到多工具实战，比较全面地讲了循环工程的玩法。这两天 Claude Code 官方团队下场，发了一篇博客叫「Getting started with loops」，系统地整理了他们团队内部对「循环」的定义和分类。 这篇博客的含金量十

 阿里云2核4G服务器价格与选型：实例规格、收费标准及活动价
AI教程 · 2026-07-08

阿里云2核4G服务器价格与选型：实例规格、收费标准及活动价

阿里云2核4G这个配置，可以说是个人站长和中小企业用户最常关注的“爆款”了。不过它的价格可不是一个固定的数字，而是跟实例规格、带宽、云盘类型、地域等等因素紧密相关。比如目前轻量应用服务器2核4G给到峰值200M带宽、50G ESSD云盘，抢购价能做到9 9元1个月或者199元1年。通用算力型u1实例

 阿里巴巴研发效能实践日：敏捷精益项目管理报名
AI教程 · 2026-07-08

阿里巴巴研发效能实践日：敏捷精益项目管理报名

研发效能提升领域又有重磅消息了。阿里巴巴研发效能实践日——由阿里研发效能部主办的线下沙龙品牌，这次携手全球领先的项目管理协会PMI，共同聚焦“敏捷精益项目管理”这一核心主题。听起来就干货满满？别急，活动精心安排了4大主题演讲，旨在帮助参会者在思维层面实现突破，并且回去就能直接落地实践。更关键的是，参

 RFID资产管理系统：企业资产数字化高效管控方案
AI教程 · 2026-07-08

RFID资产管理系统：企业资产数字化高效管控方案

数字化转型走到今天，传统人工管资产那套老办法——效率低、差错多、资产一挪窝就成“失踪人口”——已经越来越扛不住了。从仓库、车间到办公室，但凡资产流转量大、品类多的企业，都急需一套能实时盯、自动盘的方案。结合多行业的落地经验来看，RFID资产管理系统之所以能成为主流选择，核心在于它用射频技术把资产全生

 智能体工作流知识沉淀：从一次修复到长期记忆
AI教程 · 2026-07-08

智能体工作流知识沉淀：从一次修复到长期记忆

好的，作为一位资深的技术专家和知识管理实践者，我将为你重新讲述这篇文章的核心内容，让这些观点和案例听起来更像是一次真诚的技术分享，而不是一份AI生成的报告。 在传统软件工程里，我们反复念叨“代码复用”，但到了AI Agent参与的工程时代，真正能产生复利的东西变了——从“代码复用”悄然转向了“知识复