一、先搞懂：JS 为什么需要异步？

JavaScript 是单线程语言——同一时间只能执行一个任务。网络请求、定时器和使用者交互都是“慢”操作。如果 JS 等待它们完成，就会导致页面卡顿甚至无响应。解决办法是采用E​vent Loop机制： 当遇到异步任务时JS 将其“放入队列”，继续执行后续同步代码；当任务完成时再从队列中取出对应的回调执行。怎么说呢，正因如此，你常见到类似以下日志顺序： text start end Synchronous code runs first。asynchronous comes later. 这正是“同步先走，异步后到”的典型表现。💡 User pain point: “我想快速发起请求，但发现所有后续操作都被卡住。”——了解 Event Loop 能帮助你避免这种无感卡顿现象。

二、异步编程的“三代进化”

说到第一代，Callback 回调函数

• #1 回调地狱导致可读性差；逻辑难以追踪，+* 您可能已经因为这种结构而苦恼于定位 bug 或添加新功能。话说回来，
  • • #5 错误无法统一捕获。一旦内部抛错就必须逐层处理。 + 这种分散的错误处理方式让排查过程像挖金矿一样艰辛。+
  • #7 调试工具对深层回调支持有限，只能逐级单步跳转。 +* 一旦陷入 Callback 嵌套，你几乎失去了对程序流畅度与可维护性的控制权。* +*

  ⚠️ 使用者痛点提示: “我已经写了好几层 callback，却不知道哪一步出了问题。” — 回答这一痛点正是 Async/Await 的价值所在！

  ---

  第二代：Promise + n Promises 把 **“承诺”** 与 **状态机** 集成。在 ES6 标准中正式加入，使得异步流程可以像同步一样按顺序书写，并通过链式调用实现连续步骤。说到示例， javascript fetch .n) .n) .catch);优点：

  ✔️ 单条链条结构，可读性明显提高；✔️ `catch` 可统一处理整个链路上的异常；✔️ 与 `async/await` 混用灵活。

   但仍有以下缺陷：
   - `Promise` 链太长时需要多行才能表达完整流程； ，- 错误传播有时候不够直观，需要手动插入 `.catch`； ，- 嵌套 Promise 时仍然容易产生可维护性问题。💡 **User Pain Point:** “我的 Promise 链太长，我常常忘记在哪一步抛错或未捕获异常。”
  → 正是 Async/Await 提供的一致语法与 `try/catch` 整合解决了这一痛点。

  ---

  第三代 ：Async / Await

  ES7 引入了 async/await。让我们能够把原本基于 Promise 的链式调用转换为更加线性的同步风格，同时保留所有 Promise 的优势。

  再看语法示例，

  javascript async function loadItems { try{ const resp = await fetch;const items = await resp.json;render，} catch{ console.error;} } loadItems;

  从优点来看。

   ✔️ 写法如同普通同步逻辑，无需深层 `n` 嵌套；✔️ 错误处理使用传统 `try/catch` 极大提高可读性；✔️ 调试体验最佳——断点像普通同步代码一样逐行停留；✔️ 可以结合 `Promise.all` 并发请求，同时保持线性结构；

   `⚠️ 使用者痛点提示:` “我想让 AJAX 调用更易维护，却被大量 `.n` 垃圾占据。” → Async/Await 用最少行数就可以相同功能，而且易于阅读和测试。

  ---

  四、Ajax : 前端动态刷新的基石

  什么是 Ajax？

  A.synchronous J avaScript And X M L — 异步 JavaScript 与 XML。简单说这方面，A‑J‑A‑X 用来告诉浏览器「不要刷新整页。而只更新你关心的数据」并展示给使用者。

  从两种实现方式来看。

  XMLHTTPRequest

  虽然依旧可用，但比较冗长且不如 Fetch 简洁。说到示例， javascript const xhr = new XMLHttpRequest;xhr.open，怎么说呢，xhr.onreadystatechange=function{ if{ const items=json.parse;render，} };xhr.send，

  Fetch API

  更轻量、更易链式组合，还有与 async/await 完美融合。说到示例， javascript fetch .n) .n) .catch);

  常见 User Pain Points:

  • “XMLHttpRequest 太冗长，每一次属性配置都要写上！”
  • “Fetch 没有立即返回 Response 对象，我不知道是否成功？”

  上述两大技术共同构成现代前端开发少不了的一部分。怎么说呢，

  ---

  五 、JSON.stringify : 对象与字符串之间的小桥梁

  网络传输只能发送字符串。而我们在 JavaScript 中使用的是对象，所以需要 JSON.stringify 将对象转换为字符串，在服务器端则使用 JSON.parse 将其恢复为对象。

  基本语法的观点是，

  javascript JSON.stringify;// value -> 要序列化的值;// replacer -> 可选过滤器;// space -> 缩进空格数，用于美化输出。

  从典型场景来看，* 后端返回数据时： : res.end); * 前端收到数据后： : const todos = JSON.parse;

  🧩 User Pain Points: * 当对象很大或包含循环引用时stringify 会失败或产生异常。* 在团队规范里约定缩进值 不一致，会导致提交记录中的格式差别明显。

  ---

  六、一张图