JavaScript Async/Await 模式
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
很多新手最怕“异步”，因为看起来像“代码不按顺序执行”。
这一关你会把异步拆成三个固定动作：
- 先等一个结果（
await） - 再同时等多个结果（
Promise.all） - 最后给失败准备兜底（
try/catch）
这三步正是前端请求接口时最常见的骨架。
Intermediate⏱ 20-25 min
Learning Objectives
- 理解 async 函数和 await 的基本配合
- 掌握 Promise.all 的并发等待
- 能在请求失败时返回可用兜底结果
Scenario
你在做学习看板：
先加载用户信息，再并发加载课程和统计，任何一步失败都不能让页面完全崩掉。
本关用简化 Promise 模拟真实网络请求。
Why Do This
- Frontend JS is not just about knowing the syntax — the key is reliably manipulating the DOM and managing interaction state.
- Break down the event flow (trigger -> handle -> update UI) before coding, and you will make significantly fewer errors.
- Rule-based validation helps you develop a testable frontend mindset.
Hands-on Practice
- Write out the event flow in comments first, then implement the functions.
- Add an edge case branch for invalid input or empty data.
- Explain why each validation rule is needed.
Common Mistakes
- Only testing the happy path without verifying edge inputs or repeated clicks.
- Mixing event binding and state updates together, making future maintenance difficult.
- Console output looks correct but the UI is not actually updated.
Deliverable
A reusable interaction component scaffold (event flow description + key functions + edge case handling).
My Progress
Completed Steps0 / 3
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
Describe the event flow of this Lab in 2-3 sentences (trigger -> handle -> update).
What edge case did you add? Why is it easy to miss?
How confident are you with this interaction pattern now?
Tags
JavaScriptES8Async/AwaitPromise