javascript - 如何将 img.onload 转换为 Promise.All?
问题描述
如何让我的Promise.all(promiseArray).then()
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));
解决方案
由于data
数组包含null
s,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
(undefined
数组中的值Promise.all
被调用不会有任何负面影响,不用担心)
推荐阅读
- git - 没有双星,gitignore 模式不起作用
- java - hashCode() 是否被视为散列函数?
- c# - 如何阻止移动的用户控件与相同类型的其他用户控件相交?
- python - Is there any way to getpeername() in Python after the socket disconnects?
- java - for循环中的Arraylist然后在if语句中找不到符号
- google-chrome - 选项卡处于活动状态后的 Chrome 扩展回调
- javascript - JS 价格突破计算器。从数量中查找数组值
- android - 如何在服务类的活动中显示对话框?
- excel - VBA - 通过下拉/验证列表迭代并将生成的工作表保存到一个 PDF
- html - 如何使元素 div(即将推出的时钟)具有响应性?