乐趣区

关于javascript:手写Promise12promise加入异步逻辑

jiezi

Promise 最常见的利用就是解决异步申请。而之前的代码没有对于异步逻辑的解决，测试代码做一下批改


let promise = new MyPromise((resolve, reject) => {// resolve('---success----');
    setTimeout(()=>{resolve('success')
    },1000)
    // reject("---failed----");
})
promise.then(value => {console.log(value);
}, reason => {console.log(reason)
})

测试代码中退出了 setTimeout, 依照应用Promise 的习惯，咱们心愿代码在期待 1 秒之后再执行resolve

    then(successCallback, failedCallback) {
        // 状态判断
        if (this.status === FULFILLED) {successCallback(this.value)
        } else if (this.status === REJECTED) {failedCallback(this.reason)
        }
    }

在 MyPromise 类中，then办法只判断了胜利和失败两种状态，当测试代码中呈现异步逻辑的时候，程序会持续向下进行执行 then 办法。而在 then 办法外面，此时的状态还是 pending。所以要退出第三种期待的状态判断。
这外面须要再定义两个状态的回调属性，初始值是 undefined, 在then 办法中，将参数赋值给两个属性。并且在 resolve 办法和 reject 办法中，须要判断回调属性是否存在，存在就执行。

  // 胜利回调
    successCallback = undefined;
    // 失败回调
    failedCallback = undefined;

resolve和 reject 办法更改：

    resolve = value => {
        // 如果状态不是期待，阻止程序向下进行
        if (this.status !== PENDING) return
        // 更改状态为胜利
        this.status = FULFILLED
        // 保留胜利的值
        this.value = value;
        // 判断胜利回调是否存在，如果存在就调用
        this.successCallback && this.successCallback(this.value);
    }
    reject = reason => {
        // 如果状态不是期待，阻止程序向下进行 
        if (this.status !== PENDING) return
        // 更改状态为失败
        this.status = REJECTED
        // 保留失败的起因
        this.reason = reason;
        // 判断失败回调是否存在，存在就调用
        this.failedCallback && this.failedCallback(this.reason);
    }

then办法批改

    then(successCallback, failedCallback) {
        // 状态判断
        if (this.status === FULFILLED) {successCallback(this.value)
        } else if (this.status === REJECTED) {failedCallback(this.reason)
        } else {
            // 期待，须要将胜利回调和失败回调存储起来，期待须要执行的时候才执行
            this.successCallback = successCallback;
            this.failedCallback = failedCallback;
        }
    }

测试代码测试通过，期待一秒后打印 success

退出移动版