手写Promise-then方法多次调用添加多个处理函数

前言

在上篇文章中为大家揭示了，怎么处理异步情况，在本篇文章中揭秘如何多次调用then方法并添加多个处理函数

代码演示

//设置promise 状态
const PENDING = "pending"; //等待状态
const FULFILLED = 'FULFILLED'; //成功状态
const REJECTED = 'rejected'; //失败状态

class MyPromise {
    constructor(executor) {
            //立即调用函数
            executor(this.resolve, this.reject)
        }
        //初始化状态
    status = PENDING
        //初始化成功之后的值
    success = undefined
        //初始化失败之后的值
    error = undefined
        //用于保存成功回调，成功回调的默认值需要改成数组，因为只有数组可以存储多个回调函数
    successCallback = []
        //用于保存失败回调，失败回调的默认值需要改成数组，因为只有数组可以存储多个回调函数
    failCallback = []

    resolve = success => {
        //如果状态不是等待 则阻止程序执行
        if (this.status !== PENDING) return
            //把promise状态改为成功
        this.status = FULFILLED
            //保存成功之后的值
        this.success = success
            //如果有这个回调，那么要执行这个回调，并且把成功的值传递进去
            //this.successCallback && this.successCallback(this.success);
            //现在呢数组中存储了多个回调函数，所以遍历数组的每个函数并让其执行,上面的代码已经不符合要求
            //重新编写逻辑
            //这里使用while语句用successCallback.length作为循环条件，如果数组中有值，拿到数组中的第一个回调函数传值并执行
        while (this.successCallback.length) this.successCallback.shift()(this.success);
    }
    reject = error => {
        //如果状态不是等待 则阻止程序执行
        if (this.status !== PENDING) return
            //把promise状态改为失败
        this.status = REJECTED
            //保存失败之后的值
        this.error = error
            //如果有这个回调,那么要执行这个回调，并且把失败的原因传递进去   
            //this.failCallback && this.failCallback(this.error);
            //现在呢数组中存储了多个回调函数，所以遍历数组的每个函数并让其执行,上面的代码已经不符合要求
            //重新编写逻辑
            //这里使用while语句用failCallback.length作为循环条件，拿到数组中的第一个回调函数传值并执行
        while (this.failCallback.length) this.failCallback.shift()(this.error);

    }
    then(successCallback, failCallback) {
        //逻辑判断如果当前状态为成功 则执行成功的回调并且把保存成功的值传递进去
        if (this.status === FULFILLED) {
            successCallback(this.success);
            //逻辑判断如果当前状态为成功 则执行失败的回调并且把失败的原因传递进去
        } else if (this.status === REJECTED) {
            failCallback(this.error)
        } else {
            //当前状态为等待，也就是promise状态为pending，
            //如果是等待的话那应该调用成功回调还是失败回调呢
            //那当然是两个回调都无法调用，应为不知道到底是成功了还是还是失败了
            //在这种情况下应该将成功回调和失败回调进行保存

            //保存成功回调函数
            //在这里有一个问题  this.successCallback一次只能存储一个函数这样的不符合要求
            //所以在上面定义successCallback的时候将其定义为数组，这样就可以存储多个回调 ，将回调push进去
            this.successCallback.push(successCallback);

            //保存失败回调函数
            this.failCallback.push(failCallback);
        }
    }
}
//遵循commjs规范 导出
module.exports = MyPromise;

代码测试

let MyPromise = require('./手写promise-3 then多次调用.js');

let promise = new MyPromise((resolve, reject) => {
    resolve('success')
});

promise.then(res => { console.log(res) })

promise.then(res => { console.log(res); })

promise.then(res => { console.log(res); })

promise.then(res => { console.log(res) })

promise.then(res => { console.log(res); })

promise.then(res => { console.log(res); })

//结果为
//success
//success
//success
//success
//success
//success

谢谢大家观看，如有不足，敬请指教