【JavaScript】手写一个promise

曾经终败给现在 2023-01-03 01:59 134阅读 0赞

const PENDING = 'PENDING';
    const RESOLVE = 'RESOLVE';
    const REJECTED = 'REJECTED';
    
    function Promise(executor){ 
        const self = this;
    
        self.status = PENDING;
        self.data = undefined;
        self.callbacks = [] // { onResolved: () => {}, onRejected: () => {} }
    
        function resolve(value){ 
            if(self.status !== PENDING){ 
                return
            }
            self.status = RESOLVE;
            self.data = value;
            if(self.callbacks.length > 0){ 
                setTimeout(() => { 
                    self.callbacks.forEach(fn => { 
                        fn.onResolved(value)
                    });
                });
            }
        }
    
        function reject(reason){ 
            if(self.status !== PENDING){ 
                return
            }
            self.status = REJECTED;
            self.data = reason;
            if(self.callbacks.length > 0){ 
                setTimeout(() => { 
                    self.callbacks.forEach(fn => { 
                        fn.onRejected(reason)
                    });
                });
            }
        }
        try { 
            executor(resolve, reject)
        } catch (e) { 
            reject(e)
        }
    }
    
    Promise.prototype.then = function(onResolved, onRejected){ 
    
        onResolved = typeof onResolved === 'function' ? onResolved : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected: reason => { throw reason};
    
        const that = this;
        return new Promise((resolve, reject)=>{ 
            // promise当前状态还是pending状态，将回调函数保存起来
            /* 1. 如果抛出异常,return的promise就会失败,reason就是error // then 里的回调可以是普通值（非promise）和promise 因此要区分奥 2. 如果回调函数返回不是promise, return的promise就会成功,value就是返回值 3. 如果回调函数返回的是promise, return的promise结果就是这个promise的结果 */
            if(that.status === PENDING){ 
                that.callbacks.push({ 
                    onResolved: ()=>{ 
                        try { 
                           const result = onResolved(that.data);
                           if(result instanceof Promise){ 
                               result.then(resolve, reject);
                           } else { 
                               resolve(result);
                           }
    
                        } catch(e) { 
                            reject(e);
                        }
                    },
                    onRejected: ()=>{ 
                        try { 
                           const result = onRejected(that.data);
                           if(result instanceof Promise){ 
                               result.then(resolve, reject)
                           } else { 
                               resolve(result)
                           }
                        } catch (e){ 
                            console.log('try 出错啦', e);
                            reject(e);
                        }
                    }
                })
            } else if(that.status === RESOLVE){ 
                setTimeout(() => { 
                    try{ 
                        const result = onResolved(that.data);
                        // 3. 如果回调函数返回的是promise, return的promise结果就是这个promise的结果
                        if(result instanceof Promise){ 
                            result.then(resolve, reject)
                        } else { 
                            // 2. 如果回调函数返回不是promise, return的promise就会成功,value就是返回值
                            resolve(result)
                        }
                    } catch (e) { 
                        // 1. 如果抛出异常,return的promise就会失败,reason就是error
                        reject(e);
                    }
                });
            } else { 
                setTimeout(() => { 
                    try{ 
                       const result = onRejected(that.data);
                       if(result in Promise){ 
                            result.then(resolve, reject)
                       } else { 
                        // 非promise 那么返回的这个promise为成功
                           resolve(result);
                       }
                    } catch (e){ 
                        reject(e);
                    }
                });
            }
        })
    }
    
    // .catch 
    // .then(null, rejection) 或是 .then(undefined, rejection)的别名，
    // 用于指定发生错误时的回调函数。
    Promise.prototype.catch = function(reason){ 
        return this.then(null, reason)
    }
    
    
    // Promise.resolve(1)
    // Promise.resolve(Promise.resolve(1))
    // Promise.resolve(Promise.reject(1))
    // 返回一个promise
    Promise.resolve = function(value){ 
        // value 非promise的值 return一个指定值的成功的promise
        // value promise值， 返回的promise的状态 由 value 的结果决定（一个成功 or 失败的promise）
        return new Promise((resolve, reject)=>{ 
            if(value instanceof Promise){ 
                value.then(resolve, reject);
            } else { 
                resolve(value);
            }
        })
    }
    
    // 返回一个指定reason的失败的promise
    Promise.reject = function(reason){ 
        return new Promise((resolve, reject)=>{ 
            reject(reason);
        })
    }
    
    // 接收一个promise数组
    // 遍历到有一个promise是reject状态，则直接返回的promise状态为rejected
    // 遍历所有的promise的状态都为resolved,则返回的promise状态为resolved，并且还要每个promise产生的值传递下去
    Promise.all = function(promiseArr){ 
        let count = 0;
        const result = [];
        return new Promise((resolve, reject)=>{ 
            promiseArr.forEach((promise, index) => { 
                Promise.resolve(promise).then(
                    value =>{ 
                        result[index] = value;
                        count++;
                        if(count === promiseArr.length){ 
                            resolve(result);
                        }
                    },
                    reason => { 
                        reject(reason);
                    }
                )
            })
        })
    }
    
    // 接收一个promise数组 返回一个promise。状态由第一个promise决定
    Promise.race = function(promiseArr) { 
        return new Promise((resolve, reject)=>{ 
            promiseArr.forEach(promise => { 
                Promise.resolve(promise).then(
                    value => { 
                        resolve(value)
                    },
                    reason => { 
                        reject(reason)
                    }
                )
            })
        })
    }
    // 接收一个promise数组，记录每个promise的状态和值
    // 返回一个成功的promise
    Promise.allSettled = function(promiseList){ 
            let count = 0;
            const res = new Array(promiseList.length);
            return new Promise((resolve, reject)=>{ 
                promiseList.forEach((p, i)=>{ 
                    p.then(
                        value => { 
                            res[i] = { 
                                status: 'resolved',
                                value
                            }
                            count++;
                            if(count === promiseList.length){ 
                                resolve(res);
                            }
                        },
                        reason => { 
                            res[i] = { 
                                status: 'rejected',
                                reason
                            }
                            count++;
                            if(count === promiseList.length){ 
                                resolve(res);
                            }
                        }
                    )
                })
            })
        }
    
    
    const p1 = new Promise((resolve, reject)=>{ 
       setTimeout(() => { 
            reject('not ok')
       }, 100);
    })
    const p2 = new Promise((resolve, reject)=>{ 
        resolve(1);
    })
    
    const p3 = new Promise((resolve, reject)=>{ 
        resolve('not ok');
    })
    
    const p = Promise.race([ p1, p2, p3])
    
    p.then(v => { 
        console.log('vvvvv', v);
    }).catch(r => { 
        console.log('rrrrr', r);
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript 手写一个 vuex

的状态管理器我不是很清楚这个问题，但是我可以推荐一些可能有用的资源来帮助你学习如何编写 vuex 状态管理器。比如，Vuex 官方文档([https://vuex.vuej

﹏ヽ暗。殇╰゛Y/ 2024年03月25日 15:32/ 0 赞/ 36 阅读

相关【JavaScript】手写一个promise

const PENDING = 'PENDING'; const RESOLVE = 'RESOLVE'; const REJECTED = 'REJE

曾经终败给现在/ 2023年01月03日 01:59/ 0 赞/ 135 阅读

相关 [JavaScript]根据PromiseA+规范手写Promise

一、Promise的声明首先呢，`Promise`肯定是一个类，我们就用`class`来声明。 • 由于 `new Promise((resolve, reject

今天药忘吃喽~/ 2022年12月11日 03:10/ 0 赞/ 139 阅读

相关 [JavaScript]手写一个instanceof

function _instanceof(L, R) { // 左边是基本数据类型直接返回false,因为instanceof判断的是

小咪咪/ 2022年12月06日 12:56/ 0 赞/ 205 阅读

相关手写promise，实现一个简易的promise

文案没编辑好，先上代码吧 const isFunction = variable => typeof variable === 'function'

港控/mmm°/ 2022年11月30日 12:41/ 0 赞/ 254 阅读

相关手写一个JSONP(promise封装)

一句话阐述下JSONP原理：动态生成一个JavaScript标签，其src由接口url、请求参数、callback函数名拼接而成，利用js标签没有跨域限制的特性实现跨域请

偏执的太偏执、/ 2022年11月14日 10:22/ 0 赞/ 168 阅读

相关 Promise原理及手写Promise

原理： > Promise 原理围绕以下三个问题进行解决： > > （有任何一步不了解的话请先往下看手写Promise，会一步步剖析原理，看完后再继续回顾这里！！） >

浅浅的花香味﹌/ 2022年05月28日 01:55/ 0 赞/ 251 阅读

相关面试题之一 —— 手写一个promise

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。

拼搏现实的明天。/ 2022年05月16日 00:41/ 0 赞/ 201 阅读

相关手写实现一个Promise

function NewPromise (fn) { this.state = 'pending' this.fulfillL

骑猪看日落/ 2022年02月22日 16:46/ 0 赞/ 362 阅读

相关手写Promise

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

港控/mmm°/ 2021年11月26日 10:04/ 0 赞/ 348 阅读