当前位置: 首页 > news >正文

[前端 | promise 用法]

我用最简单、最直白、最贴近你这段代码的方式,帮你快速回忆 Promise!
保证你马上看懂!

1. Promise 是啥?

一句话:
Promise 就是“承诺”:现在没结果,未来会给你结果。

  • 异步操作(定时器、接口请求)专用
  • 不会阻塞代码

2. 你这段代码拆解

function sleepAsync(milliseconds: number) {return new Promise((resolve) => {setTimeout(resolve, milliseconds);});
}

意思:

  • 我返回一个 Promise(承诺)
  • 等 milliseconds 毫秒后 → 调用 resolve() → 承诺兑现

3. .then() 是啥?

sleepAsync(2000).then(() => {console.log("时间到!");
});

意思:
等 Promise 兑现(resolve)后,再执行 then 里的代码!


4. 你的 fakeFetchData 解释

const fakeFetchData = (milliseconds: number) => {sleepAsync(milliseconds).then(() => {console.log(`fakeFetchData completed, ${milliseconds}ms`);});
};

翻译成人话:

  • 调用 fakeFetchData(2000)
  • 等待 2 秒
  • 时间到 → resolve()
  • 触发 .then()
  • 打印日志

5. 最关键的:async / await(你马上会用到)

Promise 最舒服的写法不是 .then()
而是 await

上面代码等价于:

async function fakeFetchData(ms) {await sleepAsync(ms); // 等待 Promise 完成console.log("完成!");
}

6. 3 句话回忆 Promise

  1. Promise = 未来会给你结果的承诺
  2. resolve() = 承诺兑现
  3. then() / await = 兑现后要做的事

7. 你这段代码的作用

模拟异步请求(接口加载)的延迟效果

  • 不阻塞页面
  • 等待指定时间后执行逻辑
  • 真实项目里用来模拟接口延迟

💡 补充 2 个必记核心点
Promise 三大状态:pending(进行中)→ fulfilled(成功)/ rejected(失败),状态一旦改变就不可逆
核心作用:解决「回调地狱」,让异步代码更易读、易维护
🎯 一句话终极总结
Promise 就是「先给个承诺,等异步操作完了兑现,再用 then/await 执行后续代码」,完美解决前端异步问题~

http://www.jsqmd.com/news/631655/

相关文章:

  • 快手Blaze引擎开源:揭秘Spark向量化技术的性能飞跃与生产实践
  • 大模型修炼秘籍 第一卷灵气采集 第一章:天地为炉——海量数据之采集
  • Docker + Jenkins + Nginx实现前端自动化部署
  • Openclaw接入自动发文教程送
  • YOLO26镜像体验:一键部署完整环境,快速开始模型训练
  • 详细解析Spring如何解决循环依赖问题赘
  • Arduino Joystick库深度解析:HID协议与飞行控制器实现
  • 电子电路中的“心脏”:电源匕
  • 高光谱成像基础(九)光谱解混基础瞎
  • React Fiber 渲染过程与优先级调度
  • 图解强化学习 |强化学习在自动加药系统上的尝试(在线更新,和模型微调)
  • AP3216_WE库详解:ALS/PS传感器驱动开发与嵌入式集成
  • 万字拆解 LLM 运行机制:Token、上下文与采样参数址
  • 隐私党狂喜!用LM Studio+7B小模型打造完全离线的AI写作助手(含CPU优化配置)
  • [AI/向量数据库/GUI] Attu : Milvus 的图形化与一体化管理工具艘
  • 【内存心法】别在单片机里用 malloc!撕碎“动态分配”的慢性毒药,论堆碎片的谋杀与“静态内存池”的永生法则
  • SpringCloud进阶--Sentinel 流量防卫兵扯
  • MCGS触摸屏常见故障排查指南
  • 你的SSH密钥可能已经过期了牧
  • OpenClaw部署教程|nanobot镜像内置systemctl服务模板,支持开机自启与依赖管理
  • STM32F103C8T6 + LCD1602:手把手教你做一个带闹钟的桌面电子钟(附完整代码和PCB)
  • 不同代际Intel CPU运行效果差异大吗_性能对比技巧【技巧】
  • DeepFlow Agent 故障排查指南:注册失败、协议解析、资源识别与配置方式赋
  • AI开发-python-langchain框架(--提取pdf中的图片 )婪
  • 4.12周报
  • .Acwing基础课第题-简单-区间和诺
  • C语言到底能干啥?我列举了8种经典案例
  • Kindle电子书封面修复终极指南:三步解决“暂无图片“问题
  • tinyCore:轻量级多核任务分发框架
  • 解决RK芯片RGB显示驱动常见问题:DTS配置与调试技巧