流浪のwolf

卷帝

导航

封装一个Promise.all 的函数

 // 1. 准备三个异步函数
    const promise1 = Promise.resolve('prom11ise1');
    const promise2 = new Promise(function (resolve, reject) {
        setTimeout(resolve, 2000, 'promise2');
    });
    const promise3 = new Promise(function (resolve, reject) {
        setTimeout(resolve, 1000, 'promise3');
    });

    // 2. 封装PromiseAll函数 返回的结果是一个new Promise 信息是一个数组 data
    const PromiseAll = (iterator) => {
        // 对传入的数据进行浅拷贝,确保有遍历器 - 类数组转换真数组
        const promises = Array.from(iterator);
        const len = promises.length; // 长度 3 
        let index = 0; // 每次执行成功+1,当等于长度时,说明所有数据都返回,则可以resolve
        let data = []; // 用来存放返回的数据数组
        return new Promise((resolve, reject) => {
            // 遍历逐个执行 Promise
            for (let i in promises) {
            promises[i]
                .then((res) => {
                data[i] = res;  // 如果成功了就保存 message
                // 先判断 是否全部都执行成功了 成功执行 resolve 并把 data 数组返回
                // 如果没有全部执行 index+1
                if (++index === len) { 
                    resolve(data);
                }
                })
                .catch((err) => {
                    reject(err);  // 只要有一次error直接返回 reject
                });
            }
        });
    };

    // 3. 调用
    PromiseAll([promise1, promise2, promise3]).then(function(values) {
        console.log(values); // 结果: ["prom11ise1", "promise2","promise3"]
    });

Promise是一种抽象异步处理对象,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数(resolve,reject),如果执行成功则调用resolve回调函数,否则执行reject回调函数。

Promise.all介绍:promise.all(promises),promises参数是一个数组(iterable类型),数组内的元素都是promise对象,当里面的每一个promise对象都返回成功resolve的回调函数,它则返回包含数组内每一个元素信息的成功回调函数(resolve),当数组内有一个或以上promise对象返回失败的回调函数,则最后也会返回调用失败的回调函数(reject)。

ps:Array,Map,Set都属于ES6的iterable类型。

posted on 2024-06-09 21:05  流浪のwolf  阅读(2)  评论(0编辑  收藏  举报