当前位置: 首页 > 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.rkmt.cn/news/82908.html

相关文章:

  • 2025年水性色浆厂家推荐:环保安全导向下的优质之选 - 深度智识库
  • 2025年水性色浆采购指南:精准选对厂家,把握绿色商机 - 深度智识库
  • 2025年十大口碑好的政府机关食堂承包品牌企业推荐,售后完善 - 工业品牌热点
  • 2025年浙江千川代运营服务权威推荐榜单:浙江直播带货方案/浙江企业号代运营推广/浙江代运营广告投放服务商精选 - 品牌推荐官
  • 2025年末采购指南:如何挑选性能卓越的油性色浆厂家? - 深度智识库
  • SI2300-ASEMI便携式电子专用SI2300
  • Spectrum 推出全新多通道任意波形发生器,支持GHz级信号生成
  • 辽宁沈阳出海企业借力外贸GEO优化,破解AI时代获客新密码 - 博客万
  • 2025年数控模具培训机构满意度排名:数控模具研究所孟庆功满 - mypinpai
  • 沈阳出海企业破局新航道:外贸GEO优化成智能时代“必答题” - 博客万
  • 2025年五大环保型品牌制造商排行榜,新测评精选推荐 - mypinpai
  • 2025年终色膏厂家推荐:色浆/油性色膏/水性色浆/颜料浆优选品牌 - 深度智识库
  • 2025年电动双开门结构静音房厂家推荐,专业静音室、静音房企 - 工业推荐榜
  • 2025年浙江新时沏茶饮创业服务权威榜单:新时沏奶茶加盟服务/新时沏奶茶创业服务/新时沏中式茶饮加盟综合推荐 - 品牌推荐官
  • 2025年北京天津防盗门售后公司排名,群升防盗门售后推荐全解 - myqiye
  • 二分环 / 浏览器 /更新 图标的画法
  • tmux 使用方法
  • 2025年选购指南:综合实力最强的检测仪公司排行,高强回弹仪检定器/红外分光光度计/微型十字板仪/数显砂浆回弹仪/钢砧检测仪销售厂家推荐排行 - 品牌推荐师
  • 2025年口碑好的抗污染反渗透膜热门厂家推荐榜单 - 行业平台推荐
  • 国产数据库迁移选型指南:金仓如何在兼容性与性能上实现突破?
  • 离心风机公司排行榜top1!离心风机哪个品牌好? - 博客万
  • 【C/C++】高斯列主元消元法求解线性方程组
  • 2025国民防盗门品牌TOP5权威推荐:群升防盗门,安全守护 - myqiye
  • 2025年激光板材切割机优质厂家权威推荐榜单:激光焊接机/复合型切割机/重型激光切割机实力厂家精选 - 品牌推荐官
  • 2025 最新名表维修保养公司/门店TOP5 评测!专业技术 + 全链条服务权威榜单发布,匠心守护高端腕表价值 - 全局中转站
  • 中国对外经济贸易信托有限公司:数字化转型助力全球客户服务贸易新格局 - 博客万
  • 2025年南非名义雇主EOR推荐:Safeguard Global人力资源公司优势分析 - 品牌2025
  • 2025年五大电弧喷涂专业供应商推荐,看哪家经验丰富? - myqiye
  • 2025服务不错的大理石量具工厂TOP5推荐:大理石量具精品 - 工业推荐榜
  • 2025年12月山东环氧富锌底漆厂家推荐:综合实力品牌排行榜单与选购决策参考 - 品牌推荐