百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

通俗易懂理解Promise的原理(什么是promise?如何使用?)

liuian 2025-05-02 11:52 12 浏览

1. Promise(承诺)——就像取快递

想象你在网上买了个玩具,商家说:"亲,我们会发货,但不确定哪天到。"这时候你会得到一个快递单号,这个单号就是一个 Promise

Promise 有三种状态

  • pending(等待):快递在路上,还没到
  • fulfilled(成功):快递到了,你可以拆包裹了
  • rejected(失败):快递丢了或损坏了

代码示例:Promise 就像取快递

// 1. 创建一个 Promise(就像下单)
const receivePackage = new Promise((resolve, reject) => {
  // 模拟快递运送(2秒后到)
  setTimeout(() => {
    const isDelivered = Math.random() > 0.3; // 70%概率送到
    if (isDelivered) {
      resolve(" 快递到了!"); // 成功
    } else {
      reject(" 快递丢了!"); // 失败
    }
  }, 2000);
});

// 2. 处理 Promise 结果
receivePackage
  .then((result) => {
    console.log(result); // 成功:" 快递到了!"
  })
  .catch((error) => {
    console.log(error); // 失败:" 快递丢了!"
  });
  • .then() → 快递到了该做什么(成功回调)
  • .catch() → 快递丢了该做什么(失败回调)

2. async/await —— 像等外卖,必须等它到了才能吃

有时候,我们需要等一个 Promise 完成才能继续,比如:

  • 等外卖到了才能吃
  • 等女朋友回复消息才能决定晚上去哪

这时候如果用 .then(),代码会有点乱,所以有了 async/await,它让异步代码看起来像同步代码,更容易理解。

代码示例:用 async/await 等外卖

// 模拟外卖 Promise
function orderFood() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const isDelivered = Math.random() > 0.3;
      if (isDelivered) {
        resolve(" 外卖到了!");
      } else {
        reject(" 外卖小哥迷路了!");
      }
    }, 2000);
  });
}

// 用 async/await 等待外卖
async function eatDinner() {
  try {
    console.log(" 等外卖中...");
    const result = await orderFood(); // 等外卖到了才继续
    console.log(result);
    console.log(" 开吃!");
  } catch (error) {
    console.log(error);
    console.log(" 只好吃泡面了...");
  }
}

eatDinner();
  • async → 这个函数里有异步操作(比如 await)
  • await → 等 Promise 完成,再往下执行
  • try/catch → 处理成功和失败

3. 终极比喻:Promise vs. async/await

场景

Promise(.then())

async/await

点外卖

你下单后去做别的事,外卖到了再通知你

你站在门口等,外卖不到你不进门

写代码

用 .then() 处理异步结果

用 await 等结果,代码更清晰

Promise(.then())的写法

orderFood()
  .then((food) => {
    console.log(food);
    console.log("开吃!");
  })
  .catch((error) => {
    console.log(error);
    console.log("吃泡面...");
  });

async/await 的写法

async function eat() {
  try {
    const food = await orderFood(); // 等外卖
    console.log(food);
    console.log("开吃!");
  } catch (error) {
    console.log(error);
    console.log("吃泡面...");
  }
}

哪个更直观? 显然是 async/await,因为它像写同步代码一样简单!


4. 总结

Promise → 像快递单号,代表未来某个操作的结果(成功/失败)
.then() / .catch() → 处理 Promise 的成功或失败
async/await → 让异步代码看起来像同步代码,更易读

  • async 标记函数里有 await
  • await 会等 Promise 完成再继续
  • try/catch 处理错误

最终结论

  • 如果你想写更清晰的异步代码 → 用 async/await
  • 如果你只是简单处理异步 → 用 .then()

这样是不是超级好懂?

相关推荐

Docker 47 个常见故障的原因和解决方法

【作者】曹如熙,具有超过十年的互联网运维及五年以上团队管理经验,多年容器云的运维,尤其在Docker和kubernetes领域非常精通。Docker是一种相对使用较简单的容器,我们可以通过以下几种方式...

电脑30个快问快答,解决常见电脑问题

1.强行关机/停电对电脑有影响吗?答:可能损坏硬盘(机械硬盘风险高)、未保存数据丢失,偶尔一次影响小,但频繁操作会缩短硬件寿命。2.C盘满影响速度吗?答:会!系统运行需C盘空间缓存临时数据,空间不...

使用Tcpdump包抓取分析数据包的详细用法

TcpDump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤,并提供and、or、not等逻辑语句来帮助你去掉无用的信息。tcpdump就是一种...

电脑启动不了(BootDevice Not Found Hard Disk-3F0)解决方案

HP品牌机,开机启动不了,黑屏,开机取下主板电池恢复BIOS后,开机显示找不到启动盘。一、按F2键进入BIOS,出现硬盘内存检测界面的话,直接退出。就会出现这个界面,光标键向下,选择BIOSSetu...

电脑开机黑屏别慌!快码住!起底维修老师傅不能说的秘密

按下开机键却只收获黑屏大礼包?那些神秘的英文提示、刺耳的蜂鸣声,其实是电脑在给你发送求救信号!从按下电源到进入桌面的12秒里,你的电脑经历了史诗级的硬件自检与系统加载,今天我们就破译这段“摩斯电码”。...

电脑启动故障为何总要先看BIOS?新手必读的关键知识解析

最近在帮朋友们解答电脑无法正常开机的问题时,发现大家经常收到一句高频建议:“先检查BIOS”。对不少普通用户而言,BIOS依然是个神秘的存在。那么,BIOS到底是什么?电脑出现哪些故障会与它相关呢?本...

Windows 11 KB5053598更新:安全补丁还是系统噩梦?

2025年3月11日,微软发布了Windows1124H2的强制性更新KB5053598,作为“周二补丁日”(PatchTuesday)的一部分。然而,这款本应提升系统安全性的更新却引发了广泛的...

飞牛OS入门安装遇到问题,如何解决?

之前小编尝试了用旧电脑装飞牛OS安装之前特意查了一些硬件要求飞牛OS目前支持主流的x86架构硬件主机需能连网线飞牛OS暂时不支持只有无线网卡的安装貌似很多小伙伴在一开始安装就卡住了那今天咱们汇总分...

几种常见的电脑开机黑屏显示白色英文字母解决方法

当电脑开机出现黑屏并显示白色英文字母时,通常表示系统启动过程中遇到了错误。以下是几种常见原因及对应的解决方法,按照排查顺序整理:一、检查外接设备与硬件连接可能原因:外接U盘、移动硬盘等未拔出,或内部硬...

电脑启动出现问题,为什么都要先检查BIOS?

【ZOL中关村在线原创技巧应用】最近在回答问题的时候,总会发现很多朋友都在问“电脑无法正常开机怎么办?”这样类似的问题,而许多DIY大佬的回复总会出现一条高频建议“先检查BIOS”。但对于许多普通用户...

教你怎么用JavaScript检测当前浏览器是无头浏览器

什么是无头浏览器(headlessbrowser)?无头浏览器是指可以在图形界面情况下运行的浏览器。我可以通过编程来控制无头浏览器自动执行各种任务,比如做测试,给网页截屏等。为什么叫“无头”浏览器?...

12个高效的Python爬虫框架,你用过几个?

实现爬虫技术的编程环境有很多种,Java、Python、C++等都可以用来爬虫。但很多人选择Python来写爬虫,为什么呢?因为Python确实很适合做爬虫,丰富的第三方库十分强大,简单几行代码便可实...

运维的报表之路,用 node.js 轻松发送 grafana 报表

在运维过程中,无论是监控还是报表,都会有一些通过邮件发送图表的需求,由于开源的zabbix,grafana和kibana等并不完全具有“想发送哪儿就发送哪儿”的图片生成功能,在grafana...

C#基于浏览器内核的高级爬虫(c#爬取网页内容)

基于C#.NET+PhantomJS+Sellenium的高级网络爬虫程序。可执行Javascript代码、触发各类事件、操纵页面Dom结构、甚至可以移除不喜欢的CSS样式。很多网站都用Ajax动态加...

如何优化一个秒杀项目?(秒杀实现思路)

问题1:使用jmeter性能压测,定位瓶颈代码步骤流程:线程组--->Http请求--->查看结果树--->聚合报告tips:host的文件--->优先调用映射,减少DNS的时...