C22

异步组件测试

手机上可以运行，但建议在电脑上完成代码练习。

编辑器加载中…

预览

点击「运行」在隔离沙箱中预览

任务说明

React 沙箱

实现一个「测得起来」的异步组件：App({ fetchProfile })，fetchProfile() 返回 Promise<{ name, bio }>（测试注入可控 Promise，不依赖真实网络波动）。组件要把等待、成功、失败、重试全部暴露为用户可见状态：等待时显示「加载中…」，成功显示姓名与简介，失败显示「加载失败」和「重试」按钮，点「重试」重新发起请求。

要求

初始显示「加载中…」；fetchProfile resolve 后显示姓名（h2）与简介
fetchProfile reject 后显示「加载失败」，且页面出现「重试」按钮
第一次失败、点「重试」后第二次成功：最终显示姓名，且 fetchProfile 恰好被调用 2 次
等待、失败、重试三个状态互斥，任何时刻只出现其中一个

R50 异步交互测试 R37 Suspense 与加载体验

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

异步组件测试

Command Palette

异步组件测试