JavaScript 手写 Promise 源码, 支持异步调用

news2025/10/31 8:46:05

基础代码

const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }

    status = PENDING // 状态一旦确定,就不能再改变
    resolve = () => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return
        
        // 将状态改为成功
        this.status = FULFILLED
    }
    reject = () => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为失败
        this.status = REJECTED
    }
}

支持 then 方法

const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }

    status = PENDING // 状态一旦确定,就不能再改变
    resolve = () => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为成功
        this.status = FULFILLED
    }
    reject = () => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为失败
        this.status = REJECTED
    }

    then(success, fail) {
        if (this.status === FULFILLED) {
            // 成功
            success()
        } else if (this.status === REJECTED) {
            // 失败
            fail()
        } else {
            // 异常
            console.log("异常状态:", this.status)
        }
    }
}

错误处理

const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }

    status = PENDING // 状态一旦确定,就不能再改变
    value = undefined // 成功之后的值
    error = undefined // 失败之后的原因

    // 成功的方法
    resolve = (value) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为成功
        this.status = FULFILLED

        // 修改成功之后的值
        this.value = value
    }

    // 失败的方法
    reject = (error) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为失败
        this.status = REJECTED

        // 记录失败的原因
        this.error = error
    }

    then(success, fail) {
        if (this.status === FULFILLED) {
            // 成功
            success()
        } else if (this.status === REJECTED) {
            // 失败
            fail()
        } else {
            // 异常
            console.log("异常状态:", this.status)
        }
    }
}

完善 then 方法

const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }

    status = PENDING // 状态一旦确定,就不能再改变
    value = undefined // 成功之后的值
    error = undefined // 失败之后的原因

    // 成功的方法
    resolve = (value) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为成功
        this.status = FULFILLED

        // 修改成功之后的值
        this.value = value
    }

    // 失败的方法
    reject = (error) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为失败
        this.status = REJECTED

        // 记录失败的原因
        this.error = error
    }

    // 执行
    then(success, fail) {
        if (this.status === FULFILLED) {
            // 成功
            success(this.value)
        } else if (this.status === REJECTED) {
            // 失败
            fail(this.error)
        } else {
            // 异常
            console.log("异常状态:", this.status)
        }
    }
}

测试

const MyPromise = require("./c06_promise")

// 创建对象
let promise = new MyPromise((resolve, reject) => {
    // resolve("成功")
    reject("错误...")
})

// 调用
promise.then(
    v => console.log(v),
    err => console.log(err)
)

添加错误和成功的属性

const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }

    status = PENDING // 状态一旦确定,就不能再改变
    value = undefined // 成功之后的值
    error = undefined // 失败之后的原因

    // 成功的方法
    resolve = (value) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为成功
        this.status = FULFILLED

        // 修改成功之后的值
        this.value = value
    }

    // 失败的方法
    reject = (error) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为失败
        this.status = REJECTED

        // 记录失败的原因
        this.error = error
    }

    // 执行
    then(success, fail) {
        if (this.status === FULFILLED) {
            // 成功
            success(this.value)
        } else if (this.status === REJECTED) {
            // 失败
            fail(this.error)
        } else {
            // 异常
            console.log("异常状态:", this.status)
        }
    }
}

// 导出
module.exports = MyPromise

记录回调方法

const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }

    status = PENDING // 状态一旦确定,就不能再改变
    value = undefined // 成功之后的值
    error = undefined // 失败之后的原因
    successCallback = undefined // 成功的回调
    errorCallback = undefined // 失败的回调

    // 成功的方法
    resolve = (value) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为成功
        this.status = FULFILLED

        // 修改成功之后的值
        this.value = value
    }

    // 失败的方法
    reject = (error) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为失败
        this.status = REJECTED

        // 记录失败的原因
        this.error = error
    }

    // 执行
    then(success, fail) {
        if (this.status === FULFILLED) {
            // 成功
            success(this.value)
        } else if (this.status === REJECTED) {
            // 失败
            fail(this.error)
        } else {
            // 还是等等状态,遇到了异步任务
            // 将成功回调和失败回调先存储起来,等待异步执行
            this.successCallback = success
            this.errorCallback = fail
        }
    }
}

// 导出
module.exports = MyPromise

完善 resolve 和 reject 方法

const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }

    status = PENDING // 状态一旦确定,就不能再改变
    value = undefined // 成功之后的值
    error = undefined // 失败之后的原因
    successCallback = undefined // 成功的回调
    errorCallback = undefined // 失败的回调

    // 成功的方法
    resolve = (value) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为成功
        this.status = FULFILLED

        // 修改成功之后的值
        this.value = value

        // 如果回调函数存在,说明有异步方法等待执行,调用
        this.successCallback && this.successCallback(this.value)
    }

    // 失败的方法
    reject = (error) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为失败
        this.status = REJECTED

        // 记录失败的原因
        this.error = error

        // 如果回调函数存在,说明有异步方法等待执行,调用
        this.errorCallback && this.errorCallback(this.error)
    }

    // 执行
    then(success, fail) {
        if (this.status === FULFILLED) {
            // 成功
            success(this.value)
        } else if (this.status === REJECTED) {
            // 失败
            fail(this.error)
        } else {
            // 还是等等状态,遇到了异步任务
            // 将成功回调和失败回调先存储起来,等待异步执行
            this.successCallback = success
            this.errorCallback = fail
        }
    }
}

// 导出
module.exports = MyPromise

测试异步的支持

const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }

    status = PENDING // 状态一旦确定,就不能再改变
    value = undefined // 成功之后的值
    error = undefined // 失败之后的原因
    successCallback = undefined // 成功的回调
    errorCallback = undefined // 失败的回调

    // 成功的方法
    resolve = (value) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为成功
        this.status = FULFILLED

        // 修改成功之后的值
        this.value = value

        // 如果回调函数存在,说明有异步方法等待执行,调用
        this.successCallback && this.successCallback(this.value)
    }

    // 失败的方法
    reject = (error) => {
        // 如果状态不是等待状态,就阻止程序向下执行
        if (this.status !== PENDING) return

        // 将状态改为失败
        this.status = REJECTED

        // 记录失败的原因
        this.error = error

        // 如果回调函数存在,说明有异步方法等待执行,调用
        this.errorCallback && this.errorCallback(this.error)
    }

    // 执行
    then(success, fail) {
        if (this.status === FULFILLED) {
            // 成功
            success(this.value)
        } else if (this.status === REJECTED) {
            // 失败
            fail(this.error)
        } else {
            // 还是等等状态,遇到了异步任务
            // 将成功回调和失败回调先存储起来,等待异步执行
            this.successCallback = success
            this.errorCallback = fail
        }
    }
}

// 导出
module.exports = MyPromise

测试代码:

const MyPromise = require("./c10_promise")

// 创建对象
let promise = new MyPromise((resolve, reject) => {
    setTimeout(() => resolve("成功"), 3000)
    // reject("错误...")
})

// 调用
promise.then(
    v => console.log(v),
    err => console.log(err)
)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2141623.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

算法入门-贪心1

算法入门-贪心1

第八部分：贪心 409.最长回文串（简单） 给定一个包含大写字母和小写字母的字符串 s ，返回通过这些字母构造成的最长的回文串 的长度。 在构造过程中，请注意 区分大小写 。比如 "Aa" 不能当做一个回文字符串…
阅读更多...
Linux下文件下载中文乱码问题

Linux下文件下载中文乱码问题

最近做的一个项目中，本地打包到线上后，发现生成的文件中出现中文乱码，但在本地运行正常。经排查，文件输入输出流都指定了utf-8的编码格式，IDE的File Encodings也都是utf-8，Linux编码格式也是utf-8&#xff…
阅读更多...
JS基础之【对象详解 -- 对象的属性与方法、遍历对象与内置对象】

JS基础之【对象详解 -- 对象的属性与方法、遍历对象与内置对象】

🚀 个人简介：某大型国企高级前端开发工程师，7年研发经验，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~ 💟 作 者：码…
阅读更多...
【数据结构与算法 | 灵神题单 | 自顶向下DFS篇】力扣1022，623

【数据结构与算法 | 灵神题单 | 自顶向下DFS篇】力扣1022，623

1. 力扣1022：从根到叶的二进制之和 1.1 题目： 给出一棵二叉树，其上每个结点的值都是 0 或 1 。每一条从根到叶的路径都代表一个从最高有效位开始的二进制数。 例如，如果路径为 0 -> 1 -> 1 -> 0 -> 1，那…
阅读更多...
如何在kotlin中给空字符串(””)和null值设置默认值问题？

如何在kotlin中给空字符串(””)和null值设置默认值问题？

😄作者简介： 小曾同学.com,一个致力于测试开发的博主⛽️，主要职责：测试开发、CI/CD 如果文章知识点有错误的地方，还请大家指正，让我们一起学习，一起进步。 😊 座右铭：不…
阅读更多...
句子成分——每日一划(九)

句子成分——每日一划(九)

人民英雄，永垂不朽！ 目录 一、原句 二、主语 三、谓语 四、介词短语 一、原句 Eternal glory to the heroes of the people who from 1840 laid down their lives in the many struggles against domestic and foreign enemies and for national i…
阅读更多...
关于安卓App自动化的一些想法

关于安卓App自动化的一些想法

安卓App自动化一般使用PythonAppium。页面元素通常是使用AndroidStudio中的UI Automator Viewer工具来进行页面元素的追踪。但是这里涉及到一个问题就是，安卓apk在每次打包的时候，会进行页面的混淆以及加固，所以导致每次apk打包之后会出现页面…
阅读更多...
C++ | Leetcode C++题解之第407题接雨水II

C++ | Leetcode C++题解之第407题接雨水II

题目&#xff1a; 题解&#xff1a; class Solution { public:int trapRainWater(vector<vector<int>>& heightMap) {int m heightMap.size(), n heightMap[0].size();int maxHeight 0;int dirs[] {-1, 0, 1, 0, -1};for (int i 0; i < m; i) {maxHei…
阅读更多...
CefSharp_Vue交互(Element UI)_WinFormWeb应用（2）---置顶和取消置顶（含示例代码）

CefSharp_Vue交互(Element UI)_WinFormWeb应用（2）---置顶和取消置顶（含示例代码）

一、预览 获取winform的置顶参数，和设置置顶参数 1.1 置顶（默认不置顶） 1.2 示例代码
阅读更多...
VSCode C++ Tasks.json中的变量

VSCode C++ Tasks.json中的变量

前言 上文介绍了在VSCode中创建C项目和编译多文件的情况。本文将介绍Tasks.json中一些变量的含义&#xff1b; 内容 tasks.json文件 下文参考VSCode文档&#xff1a;Visual Studio Code 变量参考 预定义标量 ${userHome} - 用户主文件夹的路径${workspaceFolder} - 在 VS Co…
阅读更多...
[产品管理-22]：NPDP新产品开发 - 20 - 产品设计与开发工具 - 开发、制造、装配阶段

[产品管理-22]：NPDP新产品开发 - 20 - 产品设计与开发工具 - 开发、制造、装配阶段

目录 前言&#xff1a; 一、原型法 - 开发阶段首先开发原型 1.1 概述 1、定义 2、目的 3、类型 4、开发过程 5、优点与缺点 优点 缺点 6、应用实例 1.2 开发阶段 1. Alpha 原型阶段 - 实验室验证 2. Beta 原型阶段 - 客户现场验证 3. 试生产原型阶段 4. 虚拟原…
阅读更多...
【机器学习】多模态AI——融合多种数据源的智能系统

【机器学习】多模态AI——融合多种数据源的智能系统

随着人工智能的快速发展&#xff0c;单一模态&#xff08;如文本、图像或语音&#xff09;已经不能满足复杂任务的需求。多模态AI&#xff08;Multimodal AI&#xff09;通过结合多种数据源&#xff08;如文本、图像、音频等&#xff09;来提升模型的智能和表现&#xff0c;适用…
阅读更多...
【Spring框架精讲】进阶指南：企业级Java应用的核心框架(Spring5)

【Spring框架精讲】进阶指南：企业级Java应用的核心框架(Spring5)

文章目录 【Spring框架精讲】进阶指南&#xff1a;企业级Java应用的核心框架(Spring5)1.Spring框架快速入门1.1七大核心模块1.1.1 Spring Core1.1.2 Spring-Beans1.1.3 Spring Context1.1.4 Spring-Expression1.1.5 Spring AOP1.1.6 JDBC和DAO模块&#xff08;Spring DAO&#…
阅读更多...
Python酷库之旅-第三方库Pandas(120)

Python酷库之旅-第三方库Pandas(120)

目录 一、用法精讲 531、pandas.DataFrame.reindex_like方法 531-1、语法 531-2、参数 531-3、功能 531-4、返回值 531-5、说明 531-6、用法 531-6-1、数据准备 531-6-2、代码示例 531-6-3、结果输出 532、pandas.DataFrame.rename方法 532-1、语法 532-2、参数 …
阅读更多...
用Python实现时间序列模型实战——Day 23: LSTM 与 RNN 模型的深入学习

用Python实现时间序列模型实战——Day 23: LSTM 与 RNN 模型的深入学习

一、学习内容 1. 深入理解 LSTM 和 RNN 模型的工作原理 LSTM 和 RNN 模型都擅长处理时间序列数据&#xff0c;但它们在处理长序列时遇到了一些问题&#xff0c;比如 梯度消失 和 梯度爆炸。LSTM 通过 门控机制 改进了传统 RNN 的缺陷&#xff0c;但在处理非常长的序列时仍可能…
阅读更多...
Java浅，深拷贝；内，外部类的学习了解

Java浅，深拷贝；内，外部类的学习了解

目录 浅拷贝 深拷贝 内部类 匿名内部类 实例内部类 静态内部类 外部类 浅拷贝 简单理解&#xff1a;定义了A&#xff0c;A里面有age和num&#xff0c;拷贝成为B&#xff0c;B里面有age和num package demo1浅克隆和深克隆;//interfaces 是定义了一个接口//implements是使…
阅读更多...
火语言RPA流程组件介绍--浏览器页面操作

火语言RPA流程组件介绍--浏览器页面操作

&#x1f6a9;【组件功能】&#xff1a;浏览器页面前进&#xff0c;后退&#xff0c;刷新及停止等操作 配置预览 配置说明 丨操作类型 后退/前进/刷新 丨超时时间 支持T或# 输入仅支持整型 页面操作超时时间 丨执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待…
阅读更多...
Spring框架常见漏洞

Spring框架常见漏洞

文章目录 SpEL注入攻击Spring H2 Database Console未授权访问Spring Security OAuth2远程命令执行漏洞(CVE-2016-4977)Spring WebFlow远程代码执行漏洞(CVE-2017-4971)Spring Data Rest远程命令执行漏洞(CVE-2017-8046)Spring Messaging远程命令执行漏洞(CVE-2018-1270)Spring …
阅读更多...
Python酷库之旅-第三方库Pandas(119)

Python酷库之旅-第三方库Pandas(119)

目录 一、用法精讲 526、pandas.DataFrame.head方法 526-1、语法 526-2、参数 526-3、功能 526-4、返回值 526-5、说明 526-6、用法 526-6-1、数据准备 526-6-2、代码示例 526-6-3、结果输出 527、pandas.DataFrame.idxmax方法 527-1、语法 527-2、参数 527-3、…
阅读更多...
C语言刷题日记(附详解)(5)

C语言刷题日记(附详解)(5)

一、选填部分 第一题: 下面代码在64位系统下的输出为( ) void print_array(int arr[]) {int n sizeof(arr) / sizeof(arr[0]);for (int i 0; i < n; i)printf("%d", arr[i]); } int main() {int arr[] { 1,2,3,4,5 };print_array(arr);return 0; } A . 1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023