Promise的自定义实现(手写)


// 声明构造函数
function Promise(executor) {

    // 设置初始状态和值
    this.PromiseState = 'pending';
    this.PromiseResult = undefined;
    // 回调函数的属性
    this.callbacks = [];
    let _this = this;
    // reslove函数声明
    function res(data) {
        // 让状态只能被修改一次
        if (_this.PromiseState !== 'pending') return;
        // 1 修改对象的状态 (PromiseState)
        _this.PromiseState = 'fulfiled';
        // 2 设置对象的结果 (PromiseResult)
        _this.PromiseResult = data;

        // 状态改变时 调用成功状态的会回调函数
        setTimeout(() => {
            _this.callbacks.forEach((item) => {
                // 调用成功状态的回调函数
                item.onResolve(data)
            })
        })

    }
    // reject函数声明
    function rej(data) {
        // 让状态只能被修改一次
        if (_this.PromiseState !== 'pending') return;
        // 1 修改对象的状态 (PromiseState)
        _this.PromiseState = 'rejected';
        // 2 设置对象的结果 (PromiseResult)
        _this.PromiseResult = data;

        // 状态改变时 调用失败状态的回调函数
        setTimeout(() => {
            _this.callbacks.forEach((item) => {
                item.onReject(data)
            })
        })

    }
    // 抛出异常改变状态时调用
    try {
        // 同步调用[执行器函数]
        executor(res, rej);
    } catch (e) {
        // console.log(e);
        rej(e);
    }

}

// 原型链上添加.then方法
Promise.prototype.then = function (onResolve, onReject) {
    const self = this;

    // then方法的值传递 (未传入onResolve回调函数)
    if (typeof onResolve !== 'function') {
        onResolve = value => value;
    }
    // catch的异常穿透 (未传入onReject回调函数)
    if (typeof onReject !== 'function') {
        onReject = (resaon) => {
            throw resaon;
        }
    }
    // then方法的返回状态
    return new Promise((resolve, reject) => {
        // 封装回调函数
        function callback(type) {
            // 抛出异常
            try {
                // 获取回调函数的返回结果
                // onResolve(this.PromiseResult);
                let result = type(self.PromiseResult);
                // 判断回答调函数返回结果的类型
                if (result instanceof Promise) {
                    // 返回的是一个Promise
                    result.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    // 返回成功的状态
                    resolve(result);
                }
            } catch (e) {
                reject(e);
            }
        }
        // 状态改变之后  调用回调函数
        if (this.PromiseState === 'fulfiled') {
            setTimeout(() => {
                callback(onResolve);
            })
        }
        if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                callback(onReject);
            })
        }
        // 执行异步任务时,状态为pending的判断
        if (this.PromiseState === 'pending') {
            // 保存回调函数
            this.callbacks.push({
                onResolve: function () {
                    callback(onResolve)
                },
                onReject: function () {
                    callback(onReject)
                }
            })
        }
    });


}

// 原型链上添加.catch方法
Promise.prototype.catch = function (onReject) {
    return this.then(undefined, onReject)
}

// 封装resolve方法
Promise.resolve = function (value) {
    // 返回一个Promise 对象
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(v => {
                resolve(v);
            }, r => {
                reject(r);
            })
        } else {
            resolve(value);
        }
    })
}

// 封装resject方法
Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    })
}

// 添加all方法
Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let count = 0;
        let arr = [];
        // 遍历
        for (let i = 0; i < promises.length; i++) {
            promies[i].then(v => {
                count++;
                arr[i] = v;
                if (count === promises.length) {
                    resolve(arr)
                }
            }, r => {
                reject(r);
            })
        }
    })
}

// 添加race方法
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
                resolve(v)
            }, r => {
                reject(r)
            })
        }
    })
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]中提到了在回调函数中返回一个pending状态的promise对象的方法,这是因为在promise链中,执行then方法的成功或失败回调取决于上一个promise的状态。如果中间返回一个初始状态的promise对象,then方法无法确定执行哪个回调,后续的then方法也不会执行,导致promise链中断。 引用\[2\]中提到了手写Promise的方法。为了实现链式调用,我们需要在第一个then方法中返回一个新的promise对象。根据官方规定,我们可以在then方法中创建一个新的promise对象,并将其命名为promise2。然后,我们可以将promise2返回的值传递给下一个then方法。如果返回的是一个普通值,则将该值传递给下一个then方法。 引用\[3\]中给出了一个基本的Promise实现的示例代码。首先,我们使用class关键字声明一个Promise类,并在构造函数中传入一个参数(executor函数)。executor函数有两个参数,resolve和reject,分别表示成功和失败。在executor函数中,我们可以执行异步操作,并在适当的时候调用resolve或reject来改变Promise的状态。根据官方规定,Promise存在三个状态:pending(等待态)、fulfilled(成功态)和rejected(失败态)。成功时,Promise的状态不可再次改变,并且需要有一个不可改变的值。失败时,Promise的状态也不可再次改变,并且需要有一个不可改变的原因。如果executor函数报错,直接执行reject()。 综上所述,手写Promise实现需要注意返回一个新的promise对象,并在适当的时候调用resolve或reject来改变Promise的状态。 #### 引用[.reference_title] - *1* *2* *3* [Promise学习笔记(尚硅谷)](https://blog.csdn.net/Ch_ensf/article/details/124699879)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值