关于Promise的使用，及手动实现 promise

最新推荐文章于 2024-04-26 09:23:58 发布

原创最新推荐文章于 2024-04-26 09:23:58 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Promise #异步操作

js基础学习专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨Promise的工作原理，包括Promise.resolve(), Promise.reject()和Promise.all()的使用场景及注意事项。通过手动实现Promise对象，理解其内部状态转换机制，并掌握如何处理异步操作。

简单的理下Promise使用场景，

Promise.resolve();

Promise.reject();

Promise.all();

Promise.all() 使用注意事项

1.all 中接收一个可迭代的参数，如数组和字符串

2.如果该参数为空则Promise.all同步返回一个resolve；

3.all中如果接收的参数是promise对象，则当有一个promise是reject时，则Promise.all的状态为 rejected，失败的，如果所有的promise对象都已经resolve，则返回状态为 fulfilled 成功

4.如果all中接收参数为非promise对象，则会忽略，但是仍然会返回参数

手动实现Promise对象

function _Promise(fn) {
        const sucArr = [], errArr = [];
        // status 有三个值 pending， fulfilled, rejected, 默认为 pending
        let status = 'pending', value = null, reason = null;

        function resolve(data) {
            setTimeout(() => {
                status = 'fulfilled';
                value = data;
                sucArr.forEach(callback => {
                    callback(value);
                });
            })
        }

        function reject(data) {
            setTimeout(() => {
                status = 'rejected';
                reason = data;
                errArr.forEach(callback => {
                    callback(reason);
                });
            })
        }

        _Promise.prototype.then = function(fulfilled, rejected) {
            return new _Promise(function(resolve, reject) {
                function suc(data) {
                    const ret = typeof fulfilled === 'function' ? fulfilled(data) : data;
                    if(ret && typeof ret['then'] === 'function') {
                        ret.then(function(data){
                            resolve(data);
                        });
                    }else{
                        resolve(ret);
                    }
                }

                function err(data) {
                    const err = typeof rejected === 'function' ? rejected(data) : data;
                    reject(err);
                }

                if(status === 'pending'){
                    sucArr.push(suc);
                    errArr.push(err);
                }else if(status === 'fulfilled') {
                    suc(value)
                }else{
                    err(reason)
                }
            })
        };

        _Promise.prototype.catch = function(rejected) {
            return new _Promise(function(resolve, reject) {
                function err(data) {
                    const ret = typeof rejected === 'function' ? rejected(data) : data;
                    if(ret && typeof ret['catch'] === 'function') {
                        ret.catch(function(datas) {
                            reject(datas)
                        })
                    }else{
                        reject(ret)
                    }
                }

                if(status === 'pending') {
                    errArr.push(err)
                }else{
                    err(reason);
                }
            })
        };

        try{
            fn(resolve, reject);
        }catch(e) {
            reject(e);
        }
    }