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

promise用法总结以及手写promise

JavaScript中的 Promise 是用于处理异步操作的对象,它代表了一个异步操作的最终完成(或失败)及其结果值。Promise 是异步编程的一种更简洁和更可读的方式,避免了回调地狱的问题。

  1. Promise 的基本概念
    一个 Promise 是一个表示异步操作最终完成(或失败)并返回结果的对象。Promise 具有三种状态:

Pending(待定):初始状态,表示异步操作尚未完成。
Resolved/Fulfilled(已完成):操作成功完成,返回值。
Rejected(已拒绝):操作失败,返回错误信息。
2. Promise 构造函数

let promise = new Promise((resolve, reject) => {// 异步操作if (成功) {resolve(结果); // 操作成功,返回结果} else {reject(错误信息); // 操作失败,返回错误信息}
});

resolve(value):改变 Promise 状态为 fulfilled,并传递一个值。
reject(error):改变 Promise 状态为 rejected,并传递一个错误。
3. Promise 的状态转换
初始状态:pending
状态1:resolved,调用 resolve()。
状态2:rejected,调用 reject()。
4. Promise 的链式调用
Promise 支持链式调用,可以通过 .then()、.catch() 和 .finally() 来处理异步操作的结果。

4.1 then()
then() 用于定义成功和失败的回调函数。

promise.then((result) => {console.log('成功:', result);}).catch((error) => {console.error('失败:', error);});

then() 接受两个回调函数:
第一个回调函数用于处理成功的结果。
第二个回调函数用于处理失败的结果(可选)。
4.2 catch()
catch() 用于捕获并处理异常。通常与 then() 一起使用。

promise.then(result => {console.log(result);}).catch(error => {console.error(error);});

4.3 finally()
finally() 用于在 Promise 完成(无论是成功还是失败)后执行清理操作。

promise.then(result => {console.log('成功:', result);}).catch(error => {console.error('失败:', error);}).finally(() => {console.log('无论成功或失败,都执行');});
  1. Promise 的常见静态方法
    5.1 Promise.resolve()
    Promise.resolve() 返回一个已经解决的 Promise,其值是传入的参数。
let promise = Promise.resolve(42);
promise.then(value => {console.log(value); // 输出 42
});

5.3 Promise.all()
Promise.all() 接收一个 Promise 数组,返回一个新的 Promise,当所有的 Promise 都成功时,该 Promise 会成功,返回一个数组。只要有一个 Promise 失败,整个 Promise.all() 就会失败。

Promise.all([promise1, promise2, promise3]).then(results => {console.log(results); // 所有 promise 成功时的结果数组}).catch(error => {console.error(error); // 如果有一个失败,捕获错误});

5.4 Promise.allSettled()
Promise.allSettled() 接收一个 Promise 数组,返回一个新的 Promise,无论所有的 Promise 是成功还是失败,都会在所有 Promise 结束后返回。

Promise.allSettled([promise1, promise2]).then(results => {console.log(results); // 输出每个 promise 的状态(fulfilled/rejected)});

5.5 Promise.race()
Promise.race() 返回一个新的 Promise,它会在第一个 Promise 完成(无论是成功还是失败)时返回。

Promise.race([promise1, promise2]).then(result => {console.log(result); // 第一个完成的 promise 的结果}).catch(error => {console.error(error); // 第一个失败的 promise 错误});

5.6 Promise.any()
Promise.any() 返回一个新的 Promise,它会在第一个成功的 Promise 返回时成功。如果所有的 Promise 都失败,返回一个 AggregateError。

Promise.any([promise1, promise2]).then(result => {console.log(result); // 第一个成功的 promise 的结果}).catch(error => {console.error(error); // 如果所有 promise 都失败,捕获错误});
  1. Promise 的手动实现
    实现一个基本的 Promise 类:
    class MyPromise {
    constructor(executor) {
    this.state = ‘pending’; // 初始状态
    this.value = undefined; // 成功时的值
    this.reason = undefined; // 失败时的原因

    this.onFulfilled = []; // 存储成功的回调
    this.onRejected = []; // 存储失败的回调

    const resolve = (value) => {
    if (this.state === ‘pending’) {
    this.state = ‘fulfilled’;
    this.value = value;
    this.onFulfilled.forEach(fn => fn(value));
    }
    };

    const reject = (reason) => {
    if (this.state === ‘pending’) {
    this.state = ‘rejected’;
    this.reason = reason;
    this.onRejected.forEach(fn => fn(reason));
    }
    };

    executor(resolve, reject);
    }

then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
if (this.state === ‘fulfilled’) {
const result = onFulfilled(this.value);
resolve(result);
} else if (this.state === ‘rejected’) {
const result = onRejected(this.reason);
reject(result);
} else {
this.onFulfilled.push(() => {
const result = onFulfilled(this.value);
resolve(result);
});
this.onRejected.push(() => {
const result = onRejected(this.reason);
reject(result);
});
}
});
}
}

http://www.lryc.cn/news/538484.html

相关文章:

  • 春招项目=图床+ k8s 控制台(唬人专用)
  • Android 11.0 系统settings添加ab分区ota升级功能实现二
  • 【Spring+MyBatis】_图书管理系统(上篇)
  • 什么是3D视觉无序抓取?
  • 【Java】理解字符串拼接与数值运算的优先级
  • [250217] x-cmd 发布 v0.5.3:新增 DeepSeek AI 模型支持及飞书/钉钉群机器人 Webhook 管理
  • 渗透利器:Burp Suite 联动 XRAY 图形化工具.(主动扫描+被动扫描)
  • Linux、Docker与Redis核心知识点与常用命令速查手册
  • DeepSeek HuggingFace 70B Llama 版本 (DeepSeek-R1-Distill-Llama-70B)
  • Playwright入门之---命令
  • Java基于 SpringBoot+Vue的微信小程序跑腿平台V2.0(附源码,文档)
  • Fastapi + vue3 自动化测试平台(5)-- 封装树形结构列表生成器
  • 【项目实战】日志管理和异步任务处理系统
  • CViewState::InitializeColumns函数分析之_hdsaColumnStates的结构
  • WPF-数据转换器
  • 09 解决方案 - 开源机器人+具身智能+AI
  • 2025 BabitMF 第一期开源有奖活动正式开启 !
  • 项目管理十大领域是哪些
  • 期权帮|股指期货的有效止盈止损策略?
  • PCL 基于视椎体裁剪点云
  • @Mapper(componentModel = MappingConstants.ComponentModel.SPRING)
  • LabVIEW 中的 3dgraph.llb 库
  • 【PHP】php+mysql 活动信息管理系统(源码+论文+数据库+数据库文件)【独一无二】
  • qt QOpenGLTexture详解
  • 【时间复杂度和空间复杂度】
  • 王炸 用AI+飞书 分解 一键生成 项目计划表模版
  • VisionMaster4.4 python脚本 图像处理 转换函数 爱之初体验
  • 线程池的使用 + MD5加密 + 枚举类
  • [qt5学习笔记]Application Example示例程序源码解析
  • 【在时光的棋局中修行——论股市投资的诗意哲学】