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

js 之 promise

点击查看代码
先明确核心问题:为什么需要 Promise?—— 解决「异步操作」的 “等待 + 结果处理” 问题。
一、先搞懂:什么是 “异步操作”?
咱们先区分「同步」和「异步」,这是理解 Promise 的前提:
1. 同步操作(按顺序来,等上一个做完才做下一个)
比如:
console.log("第一步:烧水");
console.log("第二步:泡茶");
console.log("第三步:喝茶");
执行结果:先烧水 → 再泡茶 → 最后喝茶,一步不差。2. 异步操作(不等上一个做完,直接做下一个)
比如:烧水需要等 1 分钟,代码里用 setTimeout 模拟 “等 1 分钟”:
console.log("第一步:开始烧水(需要等1分钟)");
setTimeout(() => {console.log("水烧开了");
}, 1000);
console.log("第二步:准备泡茶");
执行结果:
第一步:开始烧水(需要等1分钟)
第二步:准备泡茶
水烧开了问题出现了:我们想 “等水烧开再泡茶”,但代码没等,直接执行了 “准备泡茶”
这就是异步操作的痛点:异步操作的结果,没法用同步代码的方式 “等” 它完成。
再比如:前端调接口(网络请求)、读取本地文件、定时器,都是异步操作 —— 这些操作需要 “等结果”,但代码不会停。而ajax就是异步的,所以需要promise来解决这个问题二、Promise 到底是什么?(生活例子类比)
Promise 就像「外卖订单」:
你下单(创建 Promise)→ 订单状态是「待接单」(pending);
商家接单并做好配送(异步操作完成)→ 订单状态变成「已完成」(fulfilled),你拿到外卖(获取成功结果);
商家没货 / 配送失败(异步操作失败)→ 订单状态变成「已取消」(rejected),你收到失败原因(获取错误信息);
状态一旦变了(完成 / 取消),就再也改不了(比如订单完成了,不能再变回待接单)。总结:Promise 是一个「管理异步操作的对象」,核心作用是:
记录异步操作的状态(进行中 / 成功 / 失败);
异步操作完成后,通知你处理结果(成功就用,失败就修)。三、Promise 的基本语法(手把手教写)
const promise = new Promise((resolve, reject) => {// 这里可以调用 resolve() 和 reject()//resolve 和 reject 是从哪来的?resolve 和 reject 是 Promise 的构造函数提供给你的两个回调函数。
});// 简化版 Promise 实现(帮助你理解)
class MyPromise {constructor(executor) {// 定义两个函数const resolve = (value) => {// 处理成功逻辑this.status = 'fulfilled';this.value = value;};const reject = (reason) => {// 处理失败逻辑this.status = 'rejected';this.reason = reason;};// 关键!把这两个函数传给你的执行函数try {executor(resolve, reject);  // 这里传入了 resolve 和 reject!} catch (error) {reject(error);}}
}// 使用时
const promise = new MyPromise((resolve, reject) => {// 看!resolve 和 reject 是 MyPromise 传给我们的resolve('成功!');
});示例:
1. 创建 Promise(下外卖订单)
语法结构:
// 1. 创建Promise实例(下单)
const 订单 = new Promise((resolve, reject) => {// 2. 里面写异步操作(商家做餐+配送)// 模拟异步操作:比如等1分钟做餐setTimeout(() => {const 有货 = true; // 模拟“有货/没货”if (有货) {// 3. 成功:调用resolve,状态变成“已完成”,传递结果(外卖)resolve("你的奶茶到了!");} else {// 4. 失败:调用reject,状态变成“已失败”,传递原因(没货)reject("抱歉,奶茶售罄了");}}, 1000);
});
核心参数解释:
resolve:函数 → 异步成功时调用,把 Promise 状态改成 fulfilled(已成功),并传结果,然后下面的.then就可以执行了;
reject:函数 → 异步失败时调用,把 Promise 状态改成 rejected(已失败),并传错误原因,然后下面的.catch就可以执行了;
注意:Promise 一旦创建,里面的异步操作会「立即执行」(就像下单后商家马上开始处理)。2. 消费 Promise(处理订单结果)
创建了 Promise 后,需要用 .then()/.catch()/.finally() 处理结果(就像你处理外卖订单的结果):
// 处理订单结果
订单.then((成功结果) => {// 异步成功时执行(拿到外卖)console.log("成功:", 成功结果); // 输出:成功:你的奶茶到了!}).catch((失败原因) => {// 异步失败时执行(没拿到外卖)console.error("失败:", 失败原因);}).finally(() => {// 无论成功/失败,最终都会执行(比如不管有没有奶茶,都要擦桌子)console.log("操作结束:不管有没有奶茶,都要收拾桌面");});
解释:
.then():接收成功结果,异步成功就跑这里;
.catch():接收失败原因,异步失败就跑这里;
.finally():收尾操作,成功失败都跑这里(可选)。3. 日常开发中,很多常用库 / API 都会返回 Promise,不用自己手动创建:
axios 所有请求方法:axios.get()/axios.post()/axios.put() 等,都返回 Promise;
fetch API(前端原生请求):fetch(url) 返回 Promise;
Node.js 异步 API:比如 fs.promises.readFile()(读取文件)返回 Promise;
自己封装的异步函数:比如之前讲的 点奶茶() 函数,我们手动 return 了 Promise。
http://www.jsqmd.com/news/72392/

相关文章:

  • 联考随记
  • 2025年水性色浆厂家推荐:环保安全导向下的优质之选 - 深度智识库
  • 2025血蛋白实力派榜单:佰倍优35%高浓款,凭硬核实力领跑 - 速递信息
  • 2025年水性色浆采购指南:精准选对厂家,把握绿色商机 - 深度智识库
  • 2025年水性色浆采购指南:精准选对厂家,把握绿色商机 - 深度智识库
  • 氧气检测仪哪个品牌好?国内氨气检测仪哪家好?国产便携式多合一气体检测仪哪家强?磷化氢检测仪推荐厂家 - 品牌推荐大师1
  • 2025年实力强的自动喷砂机厂家排名:自动喷砂机定制厂家哪家 - myqiye
  • 2025年十大口碑好的政府机关食堂承包品牌企业推荐,售后完善 - 工业品牌热点
  • 2025年北京口碑好的政府机关食堂承包品牌企业排名:政府机关 - 工业推荐榜
  • 2025年浙江千川代运营服务权威推荐榜单:浙江直播带货方案/浙江企业号代运营推广/浙江代运营广告投放服务商精选 - 品牌推荐官
  • 2025年末采购指南:如何挑选性能卓越的油性色浆厂家? - 深度智识库
  • 2025年五大锂电池专用氧化镁、二氧化钛溶胶、纳米氧化铝溶胶 - myqiye
  • 2025年五大环保型品牌制造商排行榜,新测评精选推荐 - mypinpai
  • 树上拓扑序计数(P4099)
  • Spectrum 推出全新多通道任意波形发生器,支持GHz级信号生成
  • 2025 最新高端腕表养护公司 /门店 TOP5 评测!专业全链条服务 + 技术实力品牌榜单发布,守护您的珍贵时计 - 全局中转站
  • 辽宁沈阳出海企业借力外贸GEO优化,破解AI时代获客新密码 - 博客万
  • js正则 股票代码 - jerry
  • 突发负面发酵太快?舆情处理公司排行榜快速锁定支援力量 - 速递信息
  • 【转载】pros and cons是什么的缩写 - ENGINEER
  • 2025年数控模具培训机构满意度排名:数控模具研究所孟庆功满 - mypinpai
  • 2025年纳米材料生产厂家TOP5权威推荐:看哪家技术实力强 - myqiye
  • 沈阳出海企业破局新航道:外贸GEO优化成智能时代“必答题” - 博客万
  • Google Chrome 浏览器详细安装教程:从下载到使用一步到位
  • 2025年中国流水线测试静音房推荐:静音室静音房流水线静音房 - 工业品牌热点
  • 实验2 熟悉常用的HDFS操作
  • 2025年中国十大工业隔音设备定制公司推荐:天然气压缩机隔音 - 工业推荐榜
  • 全网热议!2025年国内测温仪厂家品牌排行榜 - 讯息观点
  • 2025年设备隔音房/瓦楞机隔音房/打磨机隔音房厂家推荐TO - 工业品牌热点
  • 2025年终色膏厂家推荐:色浆/油性色膏/水性色浆/颜料浆优选品牌 - 深度智识库