logo

JavaScript Promise 并发

✏️ 可编辑
加载编辑器...
实时预览
+Enter 运行+R 重置

关于此练习

当两个请求互不依赖时,不要一个一个等,可以一起发。

Promise.all 就是“同时等待多个任务”的标准写法。

这关你会做三次练习:数字汇总、字符串拼接、结果格式化。

中级25-30 min

学习目标

  • 理解串行等待和并发等待的差别
  • 熟练使用 Promise.all + await
  • 能把并发结果组装成业务需要的格式

场景说明

你在加载学习仪表盘: 课程数据和统计数据可以同时请求,最后再统一显示给用户。

为什么这么做

  • 前端 JS 不是“会写语法”就够,重点是能稳定地改 DOM 和处理交互状态。
  • 先拆事件流(触发 -> 处理 -> 更新 UI),再写代码,错误率会明显下降。
  • 通过规则验证能帮助你建立“可测试”的前端思维。

动手练习

  • 先用注释写出事件流,再实现函数。
  • 补一个“异常输入”或“空数据”分支。
  • 解释每条验证规则为什么需要。

常见误区

  • 只关注功能跑通,不验证边界输入和重复点击场景。
  • 事件绑定和状态更新写在一起,后续难维护。
  • console 看起来对,但 UI 没有真实更新。

本节交付物

一份可复用的交互组件脚手架(事件流说明 + 关键函数 + 边界处理)。

我的进度

完成步骤0 / 3
总尝试次数0
最佳分数0%

达标标准(可勾选)

完成当前 Lab 前建议确认

反思题(建议完成)

请用 2-3 句话说明本 Lab 的事件流(触发 -> 处理 -> 更新)。

你补了哪个边界场景?为什么这个场景容易漏?

你现在对这个交互模式的掌握程度?

标签

JavaScriptES6PromiseAsync