美文网首页
Promise常用方法的实现

Promise常用方法的实现

作者: 贰玖是只猫 | 来源:发表于2021-03-20 18:51 被阅读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)
     }
    

    相关文章

      网友评论

          本文标题:Promise常用方法的实现

          本文链接:https://www.haomeiwen.com/subject/qbvwcltx.html