重构 Promise 及其方法

最新推荐文章于 2023-05-18 11:11:00 发布

秃头老菜鸟

最新推荐文章于 2023-05-18 11:11:00 发布

阅读量288

点赞数 1

分类专栏：中级知识文章标签：重构 javascript 前端

本文链接：https://blog.csdn.net/weixin_49592687/article/details/124674824

版权

中级知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

手动写一个 Promise 的实现方法和其方法的实现,可以更好的理解 Promise

Promise 实现

1. 实现 promise 状态只能唯一

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myPromise</title>
    <script src="./Promise.js"></script>
</head>
<body>
<script>
    let p = new Promise((resolve, reject)=>{
        //自己封装的promise,
        //状态是可以随时切换的
        //pending--->fulfilled
        //pending--->rejected
        // setTimeout(()=>{
        //     resolve("成功了");
        // },2000)
        resolve("成功了");
        reject("error");
    })
    //then先触发
    p.then(value=>{
        console.log("===>",value);
    },reason => {
        console.log("--->",reason);
    })
    console.log(p);
</script>
</body>
</html>

Promise.js

function Promise(executor){
    const self = this;
    self.PromiseState = "pending";
    self.PromiseResult = undefined;
    //添加了一个数组
    self.callbacks = [];
    function resolve(value){
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "fulfilled";
        self.PromiseResult = value;
        //resolve一旦被调用就触发数组
        self.callbacks.forEach(item=>{
            //item是一个{}
            item.onFulfilled(value);
        });
    }
    function reject(reason){
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = reason;
        self.callbacks.forEach(item=>{
            //item是一个{}
            item.onRejected(reason);
        });
    }
    try{
        executor(resolve,reject);
    }catch(e){
        reject(e);
    }
}
Promise.constructor = Promise;
Promise.prototype.then = function(onFulfilled,onRejected){
    if(this.PromiseState === "fulfilled"){
        onFulfilled(this.PromiseResult);
    }
    if(this.PromiseState === "rejected"){
        onRejected(this.PromiseResult);
    }
    //如果PromiseState=pending,在数组当中添加一个对象
    if(this.PromiseState === "pending"){
        this.callbacks.push({
            onFulfilled,
            onRejected
        })
    }
}

方法实现

利用自己的思路和方法,使用原型重新写 Promise 的方法,可以更好的理解,并可以按照自己思路进行更改或者添加功能

重构 `then()` 、`resolve()`、`reject()`、`all()`和`race()`

test.html 为测试使用,可以自己更改测试内容

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Promise.js"></script>
</head>
<body>
<script>
    let p1 = new Promise((resolve, reject)=>{
        setTimeout(function(){
            resolve(123);
        });
    })
    let p2 = Promise.resolve(321);
    let p3 = Promise.reject("000");
    //谁先运行完,就执行谁的结果
    let p = Promise.race([p1,p2,p3]);
    console.log(p);
</script>
</body>
</html>

Promise.js

function Promise(executor){
    const self = this;
    /*
    * executor = (resolve, reject)=>{
        resolve('ok');
    }
    *
    * */
    //属性
    self.PromiseState = 'pending';
    self.PromiseResult = undefined;
    //添加数组
    self.callbacks = [];
    //是不是当前对象的方法
    function resolve(value){
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "fulfilled";
        self.PromiseResult = value;
        setTimeout(()=>{
            self.callbacks.forEach(item=>{
                item.onFulfilled(value);
            });
        })

    }
    function reject(reason){
        if(self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = reason;
        setTimeout(()=> {
            self.callbacks.forEach(item => {
                item.OnRejected(reason);
            });
        })
    }
    try{
        executor(resolve,reject);
    }catch (e){
        reject(e);
        setTimeout(()=>{
            console.error("Uncaught (in promise)",e);
        })
    }
}

/******************then()*********************************/

Promise.prototype.then = function(onFulfilled,OnRejected){
    return new Promise((resolve,reject)=>{
        //判断onFulfilled,OnRejected的默认值
        if(typeof onFulfilled !== 'function'){
            //不是函数默认改变为函数
            onFulfilled = value => value;
            //function(value) {return value}
        }
        if(typeof OnRejected !== 'function'){
            OnRejected = reason => {throw reason};
        }
        let callback = type => {
            //undefined(this.PromiseResult);
            let rs = type(this.PromiseResult);
            if(rs instanceof Promise){
                rs.then(v=>{
                    resolve(v);
                },r=>{
                    reject(r);
                })
            }else{
                //undefined ok
                resolve(rs);
            }
        }
        if(this.PromiseState === "fulfilled"){
            setTimeout(()=>{
                callback(onFulfilled);
            });
        }
        if(this.PromiseState === "rejected"){
            setTimeout(()=> {
                callback(OnRejected);
            });
        }
        if(this.PromiseState === "pending"){
            this.callbacks.push({
                onFulfilled:()=>{
                    callback(onFulfilled);
                },
                OnRejected:()=>{
                    callback(OnRejected);
                }
            })
        }
    })
}

/******************catch()*********************************/
//catch只处理一种类型的结果,reject
Promise.prototype.catch = function(OnRejected){
    return this.then(undefined,OnRejected);
}
/******************resolve()*********************************/
//写在函数对象下面
Promise.resolve = function(value){
    return new Promise((resolve,reject)=>{
        if(value instanceof Promise){
            value.then(resolve,reject);
        }else{
            resolve(value);
        }
    })
}
/******************reject()*********************************/
Promise.reject = function(reason){
    return new Promise((resolve,reject)=>{
        reject(reason);
    })
}
/******************all()*********************************/
Promise.all = function(promiseArray){
    return new Promise((resolve,reject)=>{
        let res_data = [];
        promiseArray.forEach((item,index)=>{
            item.then(value=>{
                //0:p1    1:p2     2:p3
                res_data[index] = value;
                //resolve运行了几次  3
                //promiseArray.length=3
                if(promiseArray.length===(index+1)){
                    resolve(res_data);
                }
            },reason=>{
                reject(reason);
            });
        })

    });
}
/******************race()*********************************/
Promise.race = function(promiseArray){
    //new Promise --> pending
    //Promise --> fulfilled
    //Promise --> 白跑一遍
    return new Promise((resolve,reject)=>{
        let res_data = [];
        promiseArray.forEach((item,index)=>{
            item.then(value=>{
               resolve(value);
            },reason=>{
                reject(reason);
            });
        })
    })
}