ES6 Promise在循环下的解决方案

发表于

最近有个场景，需要实现Promise的循环同步。

类似这样：

1
Promise.resolve().then(()=>promise1).then(()=>promise2).then(()=>promise3)...

现在需要对一个数组，执行一长串的promise操作。在不使用 async的情况下，只用for循环完成多个promise的操作。

这里我们使用Array.reduce来解决Promise的循环同步。

Array.reduce解决循环同步

1
arr.reduce(callback[, initialValue])

reduce 函数的callback接受4个参数，分别是previousValue，currentValue，currentIndex，array。

previousvalue的值可以是一个Promise对象。

我们给reduce的callback函数一个初始值，initialValue设为Promise.resolve()

在每一次callback返回一个Promise对象，而这个对象是对previousValue对象的一个封装，将previousValue.then(()=>promiseInstance)返回，又在下一次的回调函数中，previousValue为上个回调函数的返回值。

1
2
3
4
5
6
Array.from(Array(100))
        .reduce(function(promise, value) {
            return promise.then(function(){
                  return Promise.resolve()
             })
         },Promise.resolve('init'));

如此便能解决 Promise的循环串行问题

Promise.all()解决循环异步

如果不需要保证每个promise都是同步的，而是只需保证所有的promise最终都已执行完毕，可以使用Promise.all()。

Promise.all()用于在所有的promise结束后调用，返回一个promise。
这种解决方案下的promise异步执行，Promise.all() 会等所有的promise执行完毕后调用，返回一个最终的promise。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//arr: [''name','']
let promises = [];
let myData = [];
arr.forEach(item => {
  promises.push(
    this.storage.get(item).then(data => { 
      myData.push(data);
    })
  );
});
return Promise.all(promises).then(() => {
  return declaration;
});