Promise常用方法的实现

2021-03-20  本文已影响0人  贰玖是只猫

上一篇文章《Promise核心功能从原理到实现》中我们从基本使用触发,慢慢由浅入深实现了Promise的核心功能。那么本章我们就去试着加入一些我们常用的方式的实现,更好的去理解Promise


Promise.all()
我们再从功能的使用上切入

function p1 () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("p1")
        }, 2000)
    })
}
function p2 () {
    return new Promise((resolve, reject) => {
            resolve("p2")
    })
}

Promise.all(["a","b", p1(), p2(), "c"]).then(function(result) {
    console.log(result); 
// result -> ["a","b", "p1", "p2", "c"]
})

返回值是按照传入的Promise的顺序来决定的,如果传入的Promise都是成功的,那么all返回的是成功的,只要有一个是失败的,那么all就是失败的,并且错误的Promise之后的都不会再去执行。

    static all (array) {
        let result = []
        let index = 0; //用来记录所有的参数的promise的结果都加入result数组再去执行 resolve
        return new MyPromise((resolve, reject) => {
            function addData(key, value) {
                result[key] = value;
                index++;
                if (index === array.length) {
                    resolve(result)
                }
            }
            for (let i = 0; i < array.length; i++) {
                let current = array[i]
                if (current instanceof MyPromise) {
                    // promise 对象
                    current.then(value => addData(i, value), reason => reject(reason) )
                } else {
                    //普通值
                    addData(i, array[i])
                }
            }
        }) 
    }

我们使用的时候就已经发现, all()方法是Promise对象上的静态方法,并且为了我们都将结果都按照 顺序保存下载就需要我们去以数组的形式依次存储,并且让一个flag去判断是不是存在有异步的回调没有完成的情况,以便于all()方法能够完整的返回结果。

Promise.resolve()

function p1 () {
    return new Promise((resolve, reject) => {
            resolve("p1")
    })
}
Promise.resolve(10).then(value => console.log(value))//如果是值,会将其转换为一个promise
Promise.resolve(p1()).then(value => console.log(value))// 如果是promise对象,会原封不动的返回

依旧从Promise.resolve()的使用入手, 它仍然是一个静态方法

    static resolve(value) {
        if (value instanceof MyPromise) return value;
        return new MyPromise(resolve => resolve(value))
    }

finally()

function p1 () {
    return new Promise((resolve, reject) => {
            resolve("p1")
    })
}
p1().finally(() => {
    console.log("finally")
}).then(value => console.log(value))

我们从中能够得到的是finallythen一样,是实例上的一个方法,并且返回值同样是一个新的Promise对象

finally (callback) {
// 调用 this.then 我们就可以拿到promise的结果
        return this.then(value => {
//充分利用 resolve 静态方法的特性 可以不去知道返回值是值还是promise, 都能够让我们返回一个promise
            return MyPromise.resolve(callback()).then(() => value)
        }, reason => {
            return MyPromise.resolve(callback()).then(() => {throw reason}) 
        })
}

catch()
catch()方法是返回最终的失败回调, 是一个实例的方法
非常简单只需要调用一下then方法的失败回调即可

catch(failCallback) {
        return this.then(undefined, failCallback)
 }
上一篇下一篇

猜你喜欢

热点阅读