当前位置：首页 > ai >正文

第三章支线三 ·异步幻境 · 时间之缝的挑战

ai 2025/6/23 19:08:04

主线回顾

第三章：JavaScript引擎 · 行为之火

其他支线

支线一 ·原能之核：语法起源
支线二 ·函数幻阶：语法召唤与逻辑封印

🎬 剧情设定：

踏出函数幻阶，林昊进入一片扭曲的时空——时间在这里并非线性，而是层叠、延迟、甚至并行的。

他坠入一片名为“异步幻境（Async Realms）”的领域，这里流淌着未完成的请求、等待回应的魔咒、与永远 pending 的亡灵代码。

一位身披流沙之袍的旅人现身——时缝守望者·艾希尔。她手持三柄时空钥匙：

回调刃（Callback Blade）
许诺之镜（Promise Mirror）
等待之心（Await Heart）

🪢 第一节 · 回调的诅咒

教学点：基本异步与回调函数

艾希尔首先展示了最古老的异步法术——回调。

function loadData(callback) {setTimeout(() => {console.log("数据加载完成");callback();}, 1000);
}loadData(() => {console.log("后续逻辑执行");
});

setTimeout 是最简单的异步模拟。它并不会阻塞主线程，而是把函数丢进任务队列，等主线程空闲时才执行。

⚠️ 诅咒之始：回调地狱

step1(() => {step2(() => {step3(() => {// 嵌套层层地狱});});
});

✨ 第二节 · Promise：许诺之镜

教学点：Promise 基础与 .then()

艾希尔召唤第二柄钥匙——许诺之镜，让异步的处理变得更加优雅。

const promise = new Promise((resolve, reject) => {let success = true;if (success) {resolve("任务成功！");} else {reject("失败了！");}
});promise.then((res) => {console.log("成功：", res);}).catch((err) => {console.error("错误：", err);});

resolve() 表示成功
reject() 表示失败
.then() 用于处理成功
.catch() 处理失败

🧘 第三节 · async/await：等待之心

教学点：async/await 基础

艾希尔说：“你无需层层嵌套，也无需许诺链式，只需静心等待。”

function delay(ms) {return new Promise((resolve) => setTimeout(resolve, ms));
}async function main() {console.log("准备...");await delay(1000);console.log("1 秒后执行");
}main();

async 修饰函数，表明其中可使用 await
await 暂停当前函数执行，直到 Promise 完成

异步编程的本质：不是“延迟”，而是“暂停与恢复执行”。

🧪 幻境试炼任务

1.使用 setTimeout 实现一个延迟 2 秒后输出 “你好异步” 的函数
2. 写一个返回 Promise 的函数，成功时返回 “数据已到达”，失败时返回错误
3. 编写一个 async 函数，依次调用两个异步任务，并用 try…catch 捕获异常

🌀 本章关键词回顾

技术	描述
setTimeout	异步模拟（任务队列）
回调函数	异步逻辑最原始方式
Promise	更优的异步控制结构
async/await	语法糖，令异步代码同步化书写
try…catch	异步错误捕获