Promise自定义封装

N-A

已于 2023-12-06 14:31:26 修改

阅读量944

点赞数 21

分类专栏：前端汇总 JavaScript 文章标签：前端 javascript promise then 异步 reject all

于 2023-12-04 00:42:37 首次发布

本文链接：https://blog.csdn.net/weixin_51735748/article/details/134772762

版权

前端汇总同时被 2 个专栏收录

40 篇文章 8 订阅

订阅专栏

JavaScript

7 篇文章 1 订阅

订阅专栏

这篇文章主要是介绍如何自己封装Promise构造函数以及其相应的方法。Promise是JS中的重点，很多的面试都会问到。因此需要对其有比较深入地认识。看这篇文章可能需要你对promise有一定的了解，不然可能会有点吃力。

Promise构造函数

首先需要知道Promise构造函数接受的参数，以及内部执行的逻辑功能。Promise构造函数接受一个函数作为实参。该函数具有两个参数，一个为resolve另一个为reject。当函数内部调用resolve函数是，代表promise实例的状态为fulfilled代表成功，同时可以将成功的值传给该函数。当函数内部调用reject函数时，就会让promise实例的状态为rejected代表失败，同时可以将失败的值传给该函数。

在该构造函数中需要声明resolve函数以及reject函数，resolve函数内部需要先判断实例对象的状态，只有当它的状态不为pending时，才能将该实例的状态变成fulfilled。这一步判断主要是解决实例的状态不能改变的情况，只能从pending到fulfilled或者是从pending到rejected。然后再将对应成功的值赋值该实例的PromiseResult属性。然后当实例的状态改变时它会执行对应then方法中的回调，该回调是在resolve函数中调用的。then方法为异步，因此需要加上该给定时器。同时当实例的状态改变时，该实例对应的多个then方法都会执行，因此可以声明一个用于存储回调函数的数组，然后遍历该数组除了对应的回调。reject函数是同个道理。

function Promise(executor){
    //添加属性
    this.PromiseState='pending';
    this.PromiseResult=null;
    //声明属性 存储回调函数
    this.callBacks=[];
    //保存实例对象的this值
    const self=this;
    //resolve函数
    function resolve(data){
        //判断状态
        if(self.PromiseState!=='pending') return;
        //修改对象的状态（promiseState）
        self.PromiseState='fulfilled';
        //设置对象结果值
        self.PromiseResult=data;
        //调用成功的回调函数
        setTimeout(()=>{
            self.callBacks.forEach(item=>{
                item.onResolved(data);
             })
        });
    }
    //reject函数
    function reject(data){
         //判断状态
         if(self.PromiseState!=='pending') return;
         //修改对象的状态（promiseState）
         self.PromiseState='rejected';
         //设置对象结果值
         self.PromiseResult=data;
         //调用失败的回调
         setTimeout(()=>{
            self.callBacks.forEach(item=>{
                item.onRejected(data);
             })
         });
    }
    try{
        //同步调用
        executor(resolve,reject);

    }catch(e){
        //修改promise对象状态为失败
        reject(e);
    }

}

then方法封装

当promise实例状态发生改变时then方法会被调用。then方法传入两个参数，第一个参数是resolved状态的回调函数，当实例的状态为成功时执行该函数。第二个参数是rejected状态的回调函数，当实例的状态为失败时执行该函数。then方法返回的是一个新的Promise实例。该实例对象的状态由回调函数的执行结果决定。如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回的值为对象的成功的值。若没有return返回结果，则同样是成功的状态，只是对应的值为undefined。若返回的是一个promise对象，then返回的状态则为return中promise对象的状态，其值也是对应的内部return中promise的值。若是抛出错误，则then返回的promise对象的状态为失败的状态，对应的值为抛出的值。

then方法中的两个参数当第一个参数没有传入时，默认地给该参数设置为一个携带value参数并返回value的函数。这些做可以实现promise中对应的值传递的功能。当第二个参数没有传值时，我们默认的将该参数赋值为一个携带reason参数并返回reason的函数。这样可以实现promise中的异常穿透的功能。then方法的回调是异步执行的，因此需要在执行回调的时候包裹一个定时器。

当实例对象的状态还是pending时，将对应的回调存放到保存回调函数的数组中。当实例的状态改变时则会进行调用。

Promise.prototype.then=function(onResolved,onRejected){
    const self=this;
    //判断回调函数参数
    if(typeof onRejected !=='function'){
        onRejected=reason=>{
            throw reason;
        }
    }
    if(typeof onResolved !== 'function'){
        onResolved = value => value;
    }
    return new Promise((resolve,reject)=>{
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                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==='fulfilled'){
            setTimeout(()=>{
                callback(onResolved);
            })
        }
        if(this.PromiseState==='rejected'){
            setTimeout(()=>{
                callback(onRejected);
            })
        }
        if(this.PromiseState==='pending'){
            //保存回调函数
            this.callBacks.push({
                onResolved:function(){
                    callback(onResolved);
                },
                onRejected:function(){
                    callback(onRejected);
                }
            })
            
        }

    });
  
}

catch方法封装

该方法用于处理当promise实例的状态为失败时的回调，相当于是then方法的第二个回调函数。

Promise.prototype.catch=function(onRejected){
    return this.then(undefined,onRejected);
}

resolve方法封装

该方法是Promise构造函数的方法，不是其实例对象的方法。其的作用是返回一个成功的promise对象。若传入的值不是promise，则一定返回成功的状态。当传入的值为Promise对象时，它的状态由传入的promise的状态决定。

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);
    }
   })
}

reject方法封装

该方法是Promise构造函数的方法。其的作用是返回一个失败的promise对象。不管传入的参数是什么，都是返回一个失败状态的promise对象。

Promise.reject=function(reason){
    return new Promise((resolve,reject)=>{
        reject(reason);
    })
}

all方法封装

该方法是Promise构造函数的方法。该方法接受多个promise实例。当接收的所有promise实例对象的状态都为成功时才会是成功的状态，返回的结构为所有对象的成功值，存储在数组中。但有其中的一个实例对象的状态为失败时，all方法返回的promise对象的状态会变成失败，且对应的值为其中传入失败的promise对象失败的值。

这里需要声明一个变量来进行记录，但执行成功的回调时就会增加一，当该数值与数组的长度一样时，说明所有的promise实例的状态都为成功。则让其调用成功的回调函数。由于返回的值是原本数组中实例存放的位置，因此需要 arr[i]=v;执行数组的对应下标，存放对应实例的值。

Promise.all=function(promises){
    return new Promise((resolve,reject)=>{
        //声明变量
        let count=0;
        let arr=[];
        //遍历
        for(let i=0;i<promises.length;i++){
            promises[i].then(v=>{
                count++;
                //将当前promise对象成功的结果存入到数组
                arr[i]=v;
                //判断
                if(count==promises.length){
                    //修改状态
                    resolve(arr);
                }
            },r=>{
                reject(r);
            });
        }
    })
}

race方法封装

该方法是Promise构造函数的方法。该方法同样接受多个promise对象。它返回的promise对象的状态以及值，由第一个最先改变状态的promise对象决定。

遍历数组之后，此时只需要有一个成功，则就调用成功的回调。

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);
            })
        }
    })
}

class封装

最后将其封装到class中，让其更加地简洁。

class Promise {
    //构造函数
    constructor(executor) {
        //添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        //声明属性 存储回调函数
        this.callBacks = [];
        //保存实例对象的this值
        const self = this;
        //resolve函数
        function resolve(data) {
            //判断状态
            if (self.PromiseState !== 'pending') return;
            //修改对象的状态（promiseState）
            self.PromiseState = 'fulfilled';
            //设置对象结果值
            self.PromiseResult = data;
            //调用成功的回调函数
            setTimeout(() => {
                self.callBacks.forEach(item => {
                    item.onResolved(data);
                })
            });
        }
        //reject函数
        function reject(data) {
            //判断状态
            if (self.PromiseState !== 'pending') return;
            //修改对象的状态（promiseState）
            self.PromiseState = 'rejected';
            //设置对象结果值
            self.PromiseResult = data;
            //调用失败的回调
            setTimeout(() => {
                self.callBacks.forEach(item => {
                    item.onRejected(data);
                })
            });
        }
        try {
            //同步调用
            executor(resolve, reject);

        } catch (e) {
            //修改promise对象状态为失败
            reject(e);
        }

    }
    //then方法
    then(onResolved, onRejected) {
        const self = this;
        //判断回调函数参数
        if (typeof onRejected !== 'function') {
            onRejected = reason => {
                throw reason;
            }
        }
        if (typeof onResolved !== 'function') {
            onResolved = value => value;
        }
        return new Promise((resolve, reject) => {
            //封装函数
            function callback(type) {
                try {
                    //获取回调函数的执行结果
                    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 === 'fulfilled') {
                setTimeout(() => {
                    callback(onResolved);
                })
            }
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    callback(onRejected);
                })
            }
            if (this.PromiseState === 'pending') {
                //保存回调函数
                this.callBacks.push({
                    onResolved: function () {
                        callback(onResolved);
                    },
                    onRejected: function () {
                        callback(onRejected);
                    }
                })

            }

        });

    }
    //catch方法
    catch(onRejected) {
        return this.then(undefined, onRejected);
    }

    //添加resolve方法
    static resolve(value) {
        //返回promise对象
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(v => {
                    resolve(v);
                }, r => {
                    reject(r);
                })
            } else {
                //状态设置为成功
                resolve(value);
            }
        })
    }

    //添加reject方法
    static reject(reason) {
        return new Promise((resolve, reject) => {
            reject(reason);
        })
    }

    //添加all方法
    static all(promises) {
        return new Promise((resolve, reject) => {
            //声明变量
            let count = 0;
            let arr = [];
            //遍历
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    count++;
                    //将当前promise对象成功的结果存入到数组
                    arr[i] = v;
                    //判断
                    if (count == promises.length) {
                        //修改状态
                        resolve(arr);
                    }
                }, r => {
                    reject(r);
                });
            }
        })
    }

    //添加race方法
    static race(promises) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    //修改返回对象的状态为成功
                    resolve(v);
                }, r => {
                    //修改返回对象的状态为失败
                    reject(r);
                })
            }
        })
    }

}

好啦！本文就到这里了。拜拜~~