Promise All队列在Canvas应用上的小技巧

前几天在做一个抽奖转盘的时候，突然集中用到promise api所以记录并总结一二。

需求是做一个如下的转盘，转盘上的图片和文字是从后端字段返回的。

image

文字的绘制倒是问题不大，难点在于图片，众所周知canvas的context.drawImage(img element)所绘制的图片需要是已经保证onload的img对象，当时我的第一想法是拿到后端图片数组之后依次onload它，并塞进一个新的数组，数组长度 = 后端数组长度，再调用绘制api不就行了，伪代码如下

const newArr = []

for (let i = 0; i  {

        newArr.push(arr[i])

        if (newArr.length === 后端图片数组.length) {

              调用方法绘制转盘方法

        }

      }

}

至少一开始我也觉得没问题的，但是发现只要你清空缓存(第一次进入)图片顺序就不对了，抽奖的顺序不对那可不是小事情，于是乎我console了一下如上代码的输出数组的图片顺序，我发现他并不会一个一个按照顺序的塞入数组，想到for和onload的执行原理，它onload完了才会给你这个回调，那确实是不可靠的。

后来大佬看到我在纠结于此，便提出你可以参考一下我的做法随手便甩给我一个仓库地址，我看到第一眼promise all这个api我就知道了大概做法(也就是说其实我并没有看大佬后面的具体实现2333，不过我猜想应该差不多)。这个api第一次用还是当时为了应付面试所以临时学习的，事实上工作中前端业务所用到的场景并不多，一般在后端nodejs上可能对于队列之间有严格前后顺序依赖关系的业务会比较有帮助，一般前端需求promise单api即可完成所以使用不多，但恰好canvas这个drawimage需要的就是加载完的图片，而且需要顺序正确。

下面是具体代码，在preloadImage我们把img的onload这一过程作为promise对象存进队列，也就是说其实你打印this.renderList 会得到[promise, promise,promise,promise，....]这样一个数组， 这个promise对象返回值就是我们已经onload成功的img对象，再通过promise all，它等待所有返回完成再执行后面的绘制过程，虽然这个过程可能会有一点点滞后但是对于这种强顺序关系并且需要已经加载完成的事件，这个api就发挥的淋漓精致了。

  async renderTheWheelImage(params) {    // params : ['图片src', '图片src', ....]

            for (let i = 0; i < params.length; i++) {

                await this.preloadImage(params[i])

            }

            Promise.all(this.renderList).then((res) => {

               // 绘制转盘的方法(res)

            })

        },

        preloadImage(item) {

            this.renderList.push(new Promise((resolve, reject) => {

                const newImage = new Image()

                newImage.onload = () => {

                    resolve(newImage)

                }

                newImage.onerror = reject

                newImage.src = item

            }))

        },