Как конвертировать 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 содержит null s, new Blob([null], { type: "image/svg+xml" }); приводит к сбою изображения - и в настоящее время у вас нет прослушивателей ошибок.

При возникновении ошибки либо отклонить (либо устранить) , но не помещайте sh в массив изображений):

img.onerror = res;

Вы также можете не пытаться создавать изображения null, во-первых, просто пропустите эти итерации:

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

(значение undefined в массиве Promise.all вызывается с не будет иметь никакого отрицательного эффекта, не беспокойтесь)