点击按钮，页面不刷新，数据就出来了。

你肯定见过这种体验。但按下按钮之后代码里到底发生了什么？为什么 console.log 比接口数据先打印？为什么回调函数里的代码要等到“后面”才执行？其实，

下面把一次完整的 AJAX 请求从「发起」到「渲染」拆开来看——不只是怎么用为什么这样设计还有它帮你解决了哪些**痛点**。

JSON.stringify：对象不能直接走网络

痛点：前端的 JavaScript 对象是内存中的引用，无法直接放进 HTTP 响应体；如果不序列化，就会出现「数据传输失败」或「解析错误」。

前后端之间跑的是二进制。一个 JS 对象 {id:"",title:"过四六级"} 必须先变成字符串。

const todo = { id:""。title:"过四六级",completed:false };说起来，const jsonStr = JSON.stringify;按理说，console.log;按理说，// {"id":"","title":"过四六级"。"completed":false}

JSON.stringify 把对象转成 JSON 字符串；前端拿到后再用 JSON.parse 还原：

const str = '{"id":""。"title":"过四六级","completed":false}';说起来，const obj = JSON.parse;console.log，// 过四六级

这两个方法是前后端数据交互的「翻译层」——没有它们，对象只能在本地内存里流动。

可控的序列化的观点是，replace 与 space

JSON.stringify

const todo = { id:""。title:"过四六级",completed:false };// 只保留指定字段
console.log);// → {"id":"","title":"过四六级"}
// 全部保留并加缩进
console.log);/*
{
"id"的观点是，"","title": "过四六级"。"completed": false
}
*/

• replacer: 决定哪些属性参与序列化。
• space: 控制输出的可读性。其实，线上环境通常去掉，开发环境加上对...有帮助调试。

后端返回 JSON 示例

// backend/index.js
const http = require;http.createServer => {
const todos =;if {
res.setHeader;res.setHeader;res.end)，// 序列化后发送
}
}).listen => {
console.log;})，

请求发出去了接下来呢？——回调与事件循环

痛点：在使用原始回调时常会看到控制台先打印 “end”，而接口数据却迟迟不来；如果不使用异步机制，页面会卡死、按钮不可点击。

XHR 示例 & 执行顺序解释

const xhr = new XMLHttpRequest;老实说，xhr.open;// true = 异步
xhr.onreadystatechange = function {
if {
const todos = JSON.parse;document.getElementById.innerHTML = todos
.map.join;}
}，xhr.send;console.log，怎么说呢，// 最先输出

为什么 “end” 最先打印？

• JS 是单线程的，一次只能执行一个调用栈。
• xpath.send 把耗时的网络请求交给浏览器内核处理。立即返回，让主线程继续往下跑。
• 当请求完成后浏览器把注册好的回调放入 **event loop** 队列；只有当调用栈清空时才会取出并执行该回调。

从回调到 Promise：把“等”变成可组合的操作

痛点：多层依赖时出现“回调地狱”，代码缩进混乱、错误处理分散、阅读和维护成本急剧上升。按理说，

回调嵌套示例

// 假设三个接口必须顺序执行
xhr1.onreadystatechange = function {
if {
const data1 = JSON.parse;xhr2.onreadystatechange = function {
if {
const data2 = JSON.parse;xhr3.onreadystatechange = function {
// …，};不过，xhr3.send;}
}，xhr2.send;}
}，xhr1.send;

The more layers you add,deeper indentation becomes – code stops being “top‑to‑bottom”.

Promise 重构：链式组织异步步骤

// 使用 fetch + Promise 链式写法
fetch
.n)
.n(todos => {
document.getElementById.innerHTML =
todos.map.join;})
.catch)，

• .n: 注册“结果到了以后该干什么”。每一步返回一个新的 Promise，使得后续可以继续链式调用。
• .catch: 集中捕获链路中任意一步抛出的异常，不必在每层都写错误处理逻辑。
• PROMISE 将“等一个结果”抽象为对象。使得异步流程可以像普通函数那样组合，但仍然是基于 **注册回调** 的模型，所以阅读顺序仍然不是自上而下。

async/await：让异步代码“看起来同步”

痛点：#1 代码仍然需要阅读 .n 链条；#2 错误捕获与普通同步 try/catch 不统一；#3 层层嵌套导致维护困难。其实，

最简洁写法示例

async function loadTodos {
try {
const res = await fetch;const todos = await res.json;document.getElementById.innerHTML =
todos.map.join;} catch {
console.error;}
}
loadTodos;

• await : 暂停当前函数内部执行，等待 Promise 完成并返回结果。线程本身不阻塞，仍然可以处理其他事件。
• Error handling 与同步代码保持一致，用 true/false try/catch .
• No nesting – code flows top‑to‑bottom just like ordinary logic.

再看对比表，三种写法的演进轨迹

方式	执行模型	可读性	错误处理
Callback	注册回调、event loop 调度	低 – 多层缩进、难以追踪流程	每层单独 try/catch 或判断
Promise + .n	返回 Promise → .n 注册 style="">中 – 链式结构比嵌套好。但仍是“注册”过程 style="">统一 .catch 捕获全部异常
alertstyle="">await 隐式转化为 .n style="">"自上而下",与同步代码完全一致 style="">"try/catch",同步风格统一
* 推荐使用 async/await —— 综合可读性、维护性与错误处理优势。

---