Promise ts版实现

最新推荐文章于 2025-05-10 07:12:48 发布
最新推荐文章于 2025-05-10 07:12:48 发布
阅读量900 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shiyisen_web/article/details/118857847
本文将探讨如何使用 TypeScript 从头实现 Promise，深入理解其内部机制。我们将分析 Promise 的构造函数、then 方法、catch 方法以及状态管理，帮助开发者更好地掌握异步编程的核心概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

/**
 * @file promise
 *
 * promise是一个带有then方法的对象或函数
 * value是任何合法的JavaScript值(包括undefined、promiseLike或promise)。
 *
 * pending态时：
 *      可以过渡到完成或拒绝状态。
 * fulfilled态时：
 *      不能过渡到任何其他状态。
 *      必须有一个不能改变的值。
 * rejected态时：
 *      不能过渡到任何其他状态。
 *      必须有一个理由，这个理由不能改变。
 */

export namespace _ {
    export type FulfillmentHandler<T, TResult> = ((value: T) => TResult | PromiseLike<TResult>) | undefined | null;
    export type RejectionHandler<TResult> = ((reason?: any) => TResult | PromiseLike<TResult>) | undefined | null;
    export type FinallyHandler = (() => void) | undefined | null;

    export interface PromiseLike<T> {
        then<TResult1 = T, TResult2 = never>(
            onFulfilled?: FulfillmentHandler<T, TResult1>,
            onRejected?: RejectionHandler<TResult2>
        ): PromiseLike<TResult1 | TResult2>;
    }

    export type Executor<T> = (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void;

    export interface Promise<T> {
        then<TResult1 = T, TResult2 = never>(
            onFulfilled?: FulfillmentHandler<T, TResult1>,
            onRejected?: RejectionHandler<TResult2>
        ): Promise<TResult1 | TResult2>;

        catch<TResult = never>(onRejected?: RejectionHandler<TResult>): Promise<T | TResult>;

        finally(onFinally?: FinallyHandler): Promise<T>;
    }

    export interface PromiseConstructor {
        readonly prototype: Promise<any>;

        new <T>(
            executor: (
                resolve: (value: T | PromiseLike<T>) => void,
                reject: (reason?: any) => void
            ) => void
        ): Promise<T>;

        resolve(): Promise<void>;
        resolve<T>(value: T | PromiseLike<T>): Promise<T>;

        reject<T = never>(reason?: any): Promise<T>;

        all<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>, T4 | PromiseLike<T4>, T5 | PromiseLike<T5>, T6 | PromiseLike<T6>, T7 | PromiseLike<T7>, T8 | PromiseLike<T8>, T9 | PromiseLike<T9>, T10 | PromiseLike<T10>]): Promise<[T1, T2, T3, T4, T5, T6, T7, T8, T9, T10]>;
        all<T1, T2, T3, T4, T5, T6, T7, T8, T9>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>, T4 | PromiseLike<T4>, T5 | PromiseLike<T5>, T6 | PromiseLike<T6>, T7 | PromiseLike<T7>, T8 | PromiseLike<T8>, T9 | PromiseLike<T9>]): Promise<[T1, T2, T3, T4, T5, T6, T7, T8, T9]>;
        all<T1, T2, T3, T4, T5, T6, T7, T8>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>, T4 | PromiseLike<T4>, T5 | PromiseLike<T5>, T6 | PromiseLike<T6>, T7 | PromiseLike<T7>, T8 | PromiseLike<T8>]): Promise<[T1, T2, T3, T4, T5, T6, T7, T8]>;
        all<T1, T2, T3, T4, T5, T6, T7>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>, T4 | PromiseLike<T4>, T5 | PromiseLike<T5>, T6 | PromiseLike<T6>, T7 | PromiseLike<T7>]): Promise<[T1, T2, T3, T4, T5, T6, T7]>;
        all<T1, T2, T3, T4, T5, T6>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>, T4 | PromiseLike<T4>, T5 | PromiseLike<T5>, T6 | PromiseLike<T6>]): Promise<[T1, T2, T3, T4, T5, T6]>;
        all<T1, T2, T3, T4, T5>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>, T4 | PromiseLike<T4>, T5 | PromiseLike<T5>]): Promise<[T1, T2, T3, T4, T5]>;
        all<T1, T2, T3, T4>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>, T4 | PromiseLike<T4>]): Promise<[T1, T2, T3, T4]>;
        all<T1, T2, T3>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>]): Promise<[T1, T2, T3]>;
        all<T1, T2>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>]): Promise<[T1, T2]>;
        all<T>(values: readonly [T | PromiseLike<T>]): Promise<T[]>;
        all<T>(values: Iterable<T | PromiseLike<T>>): Promise<T[]>;

        race<T>(values: readonly T[]): Promise<T extends PromiseLike<infer U> ? U : T>;
        race<T>(values: Iterable<T>): Promise<T extends PromiseLike<infer U> ? U : T>;
    }
}

const enum State {
    Pending = 'pending',
    FulFilled = 'fulfilled',
    Rejected = 'rejected'
}
export class Promise<T> implements _.Promise<T> {
    private _state: State = State.Pending;
    private _value: T | undefined = undefined;
    private _reason: any = undefined;

    private _onResolvedCallbacks: Function[] = [];
    private _onRejectedCallbacks: Function[] = [];

    constructor(executor: _.Executor<T>) {
        const _f = (v: T) => {
            if (this._state === State.Pending) {
                this._value = v;
                this._state = State.FulFilled;
                this._onResolvedCallbacks.forEach(cb => cb());
            }
        };
        const _r = (r?: any) => {
            if (this._state === State.Pending) {
                this._reason = r;
                this._state = State.Rejected;
                this._onRejectedCallbacks.forEach(cb => cb());

                if (!this._onRejectedCallbacks.length) {
                    // console.error(new Error(' (in promise) ' + this._reason));
                }
            }
        };

        let called = false;
        const resolve = (v: T | _.PromiseLike<T>) => {
            if (called) return;
            called = true;
            this._resolvePromise(this, v, _f, _r);
        };
        const reject = (r?: any) => {
            if (called) return;
            called = true;
            _r(r);
        };
        try {
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }

    public then<TResult1 = T, TResult2 = never>(
        onFulfilled?: _.FulfillmentHandler<T, TResult1>,
        onRejected?: _.RejectionHandler<TResult2>
    ): _.Promise<TResult1 | TResult2> {
        const P: _.PromiseConstructor = Object.getPrototypeOf(this).constructor;

        const promise = new P<TResult1 | TResult2>((resolve, reject) => {
            const resHandler = () => {
                const _onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (v: T) => v;
                setTimeout(() => {
                    try {
                        const x = _onFulfilled(this._value as T) as TResult1 | _.PromiseLike<TResult1>;
                        this._resolvePromise<TResult1 | TResult2>(promise, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                });
            };
            const rejHandler = () => {
                const _onRejected = typeof onRejected === 'function' ? onRejected : (r?: any) => { throw r };
                setTimeout(() => {
                    try {
                        const x = _onRejected(this._reason);
                        this._resolvePromise(promise, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                });
            };

            if (this._state === State.FulFilled) resHandler();
            if (this._state === State.Rejected) rejHandler();
            if (this._state === State.Pending) {
                this._onResolvedCallbacks.push(resHandler);
                this._onRejectedCallbacks.push(rejHandler);
            }
        });

        return promise;
    }

    public catch<TResult = never>(onRejected: _.RejectionHandler<TResult>) {
        return this.then(null, onRejected);
    }

    public finally(onFinally?: _.FinallyHandler) {
        const _cb = typeof onFinally === 'function' ? onFinally : () => {};
        const P: _.PromiseConstructor = (Object.getPrototypeOf(this)).constructor;
        return this.then(
            v => P.resolve(_cb()).then(() => v),
            r => P.resolve(_cb()).then(() => { throw r })
        );
    }

    static resolve<T>(v: T | _.PromiseLike<T>): _.Promise<T> {
        return new this((resolve, reject) => {
            resolve(v);
        });
    }

    static reject<T>(r?: any): _.Promise<T> {
        return new this((resolve, reject) => {
            reject(r);
        });
    }

    static all<T extends any[]>(promises: readonly [...T]): _.Promise<{ [K in keyof T]: T[K] extends _.PromiseLike<infer R> ? R : T[K] }> {
        const P = this;
        return new P((resolve, reject) => {
            const len = promises.length;
            let remaining = len;

            const results: { [K in keyof T]: T[K] extends _.PromiseLike<infer R> ? R : T[K] } = new Array(len) as any;
            for (let i = 0; i < len; i++) {
                fllow(promises[i], i);
            }

            function fllow<T>(t: T | _.PromiseLike<T>, index: number): void {
                P.resolve(t).then(v => {
                    results[index] = v;
                    remaining--;
                    if (remaining === 0) {
                        resolve(results);
                    }
                }, (r?: any) => {
                    reject(r);
                });
            }
        });
    }

    static race<T>(promises: readonly T[]): _.Promise<T extends _.PromiseLike<infer U> ? U : T> {
        const P = this;
        return new Promise((resolve, reject) => {
            const len = promises.length;
            let i = 0;
            while (i < len) {
                fllow(promises[i]);
                i++;
            }

            function fllow(t: T | _.PromiseLike<T>): void {
                P.resolve(t).then(v => {
                    i = len;
                    resolve(v as any);
                }).catch(r => {
                    reject(r);
                });
            }
        });
    }

    private _resolvePromise<T>(
        promise: _.Promise<T>,
        x: T | _.PromiseLike<T>,
        resolve: (value: T) => void,
        reject: (reason?: any) => void
    ): void {
        if (promise === x) {
            return reject(new TypeError('Chaining cycle detected for promise #<Promise>'));
        }
        if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
            let called = false;
            try {
                const then = (x as _.PromiseLike<T>).then;
                if (typeof then === 'function') {
                    then.call(x, (v: T | _.PromiseLike<T>) => {
                        if (called) return;
                        called = true;
                        this._resolvePromise(promise, v, resolve, reject);
                    }, (r?: any) => {
                        if (called) return;
                        called = true;
                        reject(r);
                    });
                } else {
                    resolve(x as T);
                }
            } catch (error) {
                if (called) return;
                called = true;
                reject(error);
            }
        } else {
            resolve(x);
        }
    }
}
shiyisen_web
关注
Promise 最完整介绍与实现解密
oscar999的专栏
03-24 771
在 JavaScript Promise 快速入门 这一篇对Promise 及其基本用法做了简单的介绍。本篇介绍Promise 的完整功能以及对Promise 的来源以及实现进行解密。 Promise 是什么？ 该怎么解释Promise 呢？ 试着从以下几种角度来理解： 从代码的角度：　Promise 是ECMAScript 6中提供了一个类 ，Promise 对象可以让异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数的方式。 从Promise工作机制的角度：Promise 表示一个异步操作
ts-promise:TS-Promise-快速，强大，类型安全的承诺
05-02
介绍 TS-Promise是一个快速，可靠，类型安全的Promise库。 特征： 符合Promises / A + 1.1 兼容ES6 Promise接口 可能未处理的拒绝检测（可以禁用） 使用.done()提前抛出未处理的拒绝 长堆栈跟踪支持（在运行时可切换！） 小型（压缩后的压缩版本2.0.0仅重4kB，包括所有内容） 有效地支持无限递归（带有或不带有长堆栈跟踪） 可选的显式承诺链刷新，对测试框架很有用 可读的代码（没有太多技巧） 用法示例 使用npm安装： cd your-project npm install --save ts-promise 如果您使用TypeScript，请在tsconfig.json使用"moduleResolution": "node"使其自动获取此程序包的类型。 为了在浏览器中使用，建议使用诸如Webpack的捆绑程序，但也可以使用dis
5.TS中promise类型的使用
m0_56986233的博客
08-09 3199
TS中promise类型的使用
TypeScript 中 Promise 深度解析
最新发布
Java_fenxiang的博客
05-10 613
TypeScript 中的 Promise 必须指定解析值的类型，通过泛型参数<T>登录后复制"), 1000);});1.2.3.表示该 Promise 解析后的值为字符串类型。resolve和reject的参数类型会自动推断，无需手动标注。类型安全：始终为 Promise 指定泛型参数，确保解析值类型明确。错误处理：统一拒绝原因类型为Error，在 catch 中显式标注类型。异步函数：标注 async 函数的返回类型为Promise<T>，避免隐式any。组合与工具：利用。
ts promise
CodeHouse的博客
09-27 908
const fs = require("fs"); console.log("hello"); // fs.readFile(path, (err,data)={}); fs读取文件回调函数 fs.readFile("./file.txt", (err, data)=>{ if (err) throw err; console.log(data.toString()); }); // promise的回调函数 let p = new Promise((resolve, rejec
实现一个TS版，符合 Promise/A+规范的 Promise
油墨香^-^的博客
09-30 1185
的回调函数的参数值，作为该被返回的 Promise 的拒绝状态回调函数的参数值。
ts: 实现promise
qq_36413371的博客
05-27 1502
这里是引用。
TS-Promise：实现快速类型安全的Promise操作
这意味着ts-promise库设计遵循了Promises/A+规范，这保证了它的Promise实现与其他遵循该规范的Promise库兼容性良好。 2. **兼容ES6 Promise接口** ES6（ECMAScript 2015）是JavaScript的一个重要版本，其中引入了...
queue-ts：基于并发的基于promise的工作队列，并发性有限
02-24
队列ts 基于承诺的并发性受限的工作人员队列。 用法 // Create a queue with two worker threads const queue = new Queue ( 2 ) ; queue . onEmpty ( ( ) => { console . log ( 'done' ) ; } ) ; // Adding tasks...
Queue-TS：实现受限并发的Promise工作队列
资源摘要信息:"queue-ts是一个使用TypeScript编写的库，其主要功能是实现一个基于Promise的工作队列，支持并发执行任务。该队列具有限制工作线程数量的功能，以控制并发性。通过实例化一个队列对象并设置并发线程数...
最详细的Promise相关源码实现
SherrybabyOne的博客
08-12 787
写这篇文章的目的是解剖Promise源码，起因也是最近秋招被问到了让手写Promise，另外在网上看到的Promise源码或多或少有些小问题，也就是没有完全遵循Promise/A+规范。 代码会完全使用ES6语法，主要分以下几个模块： 整体分析（为代码书写铺路） 实现初版（构造函数大致功能亿完善） 支持异步和链式调用（完善then方法） 实现catch方法 实现Promise.resolve() 实现Promise.reject() 实现Promise.all() 实现Promise.race() 一、
TS Option类型与Promise
KEEP CODING
12-16 1002
用专门的数据类型描述异常，能便于串联可能出错的操作。Option类型就是这张容器，在没有值时也能串联操作。 js中常用Promise来处理异步调用，本文将手动实现Promise的部分功能，来探索这个类型的处理逻辑。
用 TS 实现 Promise（官方测试工具测试通过）
weixin_45693198的博客
02-20 3719
用TS实现Promise（官方测试工具测试通过） Promises/A+ 规范文档 Promises/A+（原文） Promises/A+（译文） 代码实现 先定义需要用到的类型： // Promise的状态 enum States { PENDING = "pending", FULFILLED = "fulfilled", REJECTED = "rejected", } // 用于接收一个Promise的函数 interface Resolve<T> {
TS Promise && async && await
zien的博客
12-22 4492
通过测试代码，深入了解promise、async、await的功能以及应用方式
ts 如何定义Promise类型函数
小白前端
04-27 2904
【代码】ts 如何定义Promise类型函数。
TS·promise
zz的专栏
12-15 228
TS·promise
TS声明promise返回来的数据类型
imkaifan的博客
10-10 629
解释说明（源于AI）：Promise: Promise 是 JavaScript 和 TypeScript 中用于处理异步操作的对象。它代表一个尚未完成但预期将来会完成的操作的结果。Emap: Emap 是一个类型，通常在 TypeScript 中用来表示某种数据结构或对象。具体来说，它可能是一个接口、类或者类型别名，用于定义对象的结构。数组: [] 表示这是一个数组，即可以包含多个 Emap 类型的元素。。在这个示例中：我们定义了一个 Emap 接口，表示具有 id 和 name 属性的对象。
【TS】typescript 获取函数入参类型、返回值类型、promise返回值类型
呆呆狗
07-12 2415
typescript 获取函数入参类型、返回值类型、promise返回值类型
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值