Promise 简单源码

Promise简单源码

Promise方法

一个简单的Promise方法执行过程

const promise = new Promise(function(resolved, rejusted){
    setTimeout(function(){
        if(true){
            resolved('成功');
        }else{
            rejusted('失败');
        }
    },1000);
})

promise.then(function(res){
    console.log(res)
}).catch(function(errer){
    throw new Error(errer)
})

分析Promise方法

1. 创建一个构造函数MyPromise
   1. 传入一个Fn方法为参数：操作事件的成功或者失败的
   2. 创建一个属性记录成功的事件：successList
   3. 创建一个属性记录失败的事件：failList
   4. 创建一个属性记录状态的绑定state：pending（初始状态）、fullfilled（成功）、rejected（失败）
2. Fn方法有两个参数：resolveFn（成功）和 rejusteFn（失败）
   2. resolveFn：遍历成功的任务
   2. rejusteFn：遍历失败的任务
3. 在该构造函数的原型上创建then方法和catch方法
   3. then方法：参数resolveFn（成功）和 rejusteFn（失败）
   3. catch方法：rejusteFn失败方法

回到顶部 目录

Promise源码

class MyPromise {
    constructor(Fn) {
        // 存放成功的微任务
        this.successList = [];
        // 存放失败的微任务
        this.failList = [];
        // 记录Promise执行状态
        this.state = 'pending';
        // Promise的参数
        Fn(this.resolveFn.bind(this), this.rejusteFn.bind(this));
    }
    // then方法
    then(resolveFn, rejusteFn){
        if(typeof resolveFn === 'function'){
            this.successList.push(resolveFn);
        }
        if(typeof rejusteFn === 'function'){
            this.failList.push(rejusteFn);
        }
        
        return this;
    }
    // catch方法
    catch(rejusteFn){
        if(typeof rejusteFn === 'function'){
            this.failList.push(rejusteFn);
        }
        return this;
    }
    // 循环执行成功微任务
    resolveFn(res){
        // 改变状态
        this.state = 'fullfilled';
        this.successList.forEach(item => item(res));
    }
    // 循环执行失败微任务
    rejusteFn(err){
        // 改变状态
        this.state = 'rejected';
        this.failList.forEach(item => item(err));
    }
}


// 测试代码
const p = new MyPromise(function(resolved, rejusted){
    setTimeout(function(){
        if(true){
            resolved('MyPromise成功');
        }else{
            rejusted('MyPromise失败');
        }
    },1000);
})

p.then(function(res){
    console.log(res)
}).catch(function(errer){
    throw new Error(errer)
})

回到顶部 目录