ES6 Promise all 的实现

更新日期: 2019-10-22阅读: 2.2k标签: 异步分享

复制链接

新浪微博

QQ 好友

扫一扫分享

Promise 是ES6语法标准里的新定义，一般用来处理异步方法的同步执行。本文主要介绍Promise all的用法和实现。
加入有以下场景：我有5个异步方法，需要等到这5个方法执行结束之后再执行下一步，如果其中有一个出错，则进入到catch方法里。具体实现如下：

function promiseAll(arr){
    return new Promise((resolve, reject) => {
        const result = [];
        let i = 0;
        function next(promise){
            if( i > arr.length - 1){
                return resolve(result);
            }
            promise().then(res => {
                const end = new Date().valueOf();
                const diff = end - start;
                console.log(i, diff)
                result.push(res);
                next(arr[++i]);
            }).catch(err => {
                return resolve(err);
            })
        }
        next(arr[i]);
    });
};

const promiseList = [1,2,3,4,5].map(one => {
    return () => {
         return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(one);
            }, 1000);
        })
    }
});

const start = new Date().valueOf();
promiseAll(promiseList).then(res => {
    const end = new Date().valueOf();
    console.log(res, end - start)
});
// [1, 2, 3, 4, 5] 15000

对性能要求比较高的朋友会发现，这个是一个一个按顺序执行的，而且如果传进去的数组元素不是promise的话，会报错(没有then方法)。
并发执行实现方式如下：

function promiseAll(arr){
    const result = [];
    return new Promise((resolve, reject) => {
        for(let i = 0; i < arr.length; i++){
            let p = arr[i];
            if(p instanceof Promise){   
            } else {
              p = Promise.resolve(p);
            }
            p.then((res) => {
                result[i] = res;
            }).catch(err => {
                return reject(err);
            })
        }
        return resolve(result);
    })
}
const input = [1,2,3,4,5];
promiseAll(input).then(res => {
    console.log(res);
}).catch(error => {
    console.log(error);
})

链接: https://fly63.com/article/detial/7327

ES6 Promise all 的实现

通过alert方法，去理解js中阻塞、局部作用域、同步/异步任务

如何优化async代码?更好的编写async异步函数

【JS】异步处理机制的几种方式

js异步加载方式有哪些？_详解异步加载js的多种方案

Nodejs 处理异步（获取异步数据并处理）的方法

JS常用的几种异步流程控制

前端异步编程之Promise和async的用法

异步的JavaScript

js 多个异步的并发控制

解读react的setSate的异步问题