如何将img.onload转换为Promise.All

Question

如何获取Promise.all(promiseArray).then()以触发回调？

演示：https://codesandbox.io/s/white-sea-wxkdh

import "./styles.scss";
import o from "./letters/0.svg";
import i from "./letters/1.svg";
import a from "./letters/4.svg";
import d from "./letters/d.svg";
import g from "./letters/g.svg";
import m from "./letters/m.svg";
import h from "./letters/h.svg";
import r from "./letters/r.svg";
import n from "./letters/n.svg";
import w from "./letters/w.svg";
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const arena = 500;
const padding = 60;
const edge = arena - padding;
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "DeepSkyBlue";
const origin = [padding, padding];
ctx.moveTo(...origin);
ctx.lineTo(edge, padding);
ctx.lineTo(edge, edge);
ctx.lineTo(padding, edge);
ctx.lineTo(...origin);
ctx.stroke();
let data = [g, o, o, d, null, m, o, r, n, i, n, g, null, h, a, r, w, o, o, d];
var imgEls = [];
var promiseArray = data.map((item, i) => {
return new Promise((res, rej) => {
let offset = i * 20;
let img = new Image();
let svg = new Blob([item], { type: "image/svg+xml" });
let url = window.URL.createObjectURL(svg);
img.onload = () => {
imgEls.push(img);
ctx.drawImage(img, padding + offset, padding - 19);
window.URL.revokeObjectURL(url);
console.log("loaded");
res(img);
};
img.src = url;
});
});
Promise.all(promiseArray).then(() => console.log(imgEls));

Answer 1

由于data数组包含nulls，new Blob([null], { type: "image/svg+xml" });会导致映像失败，并且您目前没有错误侦听器。

当出现错误时，要么拒绝(要么解决，但不要推到图像阵列(：

img.onerror = res;

你也可以考虑一开始就不尝试创建null的图像——只需跳过这些迭代：

var promiseArray = data.map((item, i) => {
if (!item) {
return;
}
return new Promise(...
// rest of the code

(调用数组Promise.all中的undefined值不会有任何负面影响，不要担心(