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;

resolvereject方法更改:

    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


HeiYanjing
45 声望1 粉丝

生活本就很艰难,且行且珍惜。