如何将fabric.Image.fromURL的非标准回调重构为Promise？

问题原因 #

fabric.Image.fromURL的回调参数顺序是**(创建的图片实例, 错误状态)，不符合Node.js util.promisify要求的错误优先回调格式**（错误在前，结果在后），所以无法直接用工具自动转换，需要手动封装。

封装实现 #

自己写一个Promise包装函数，将原函数的回调逻辑转为Promise的resolve/reject：

function promisifiedImageFromURL(url, imgOptions) {
  return new Promise((resolve, reject) => {
    fabric.Image.fromURL(url, (oImg, isError) => {
      if (isError) {
        reject(new Error('图片加载失败'));
      } else {
        resolve(oImg);
      }
    }, imgOptions);
  });
}

使用示例 #

在async函数中通过await依次加载并添加图片，还能方便地处理加载错误：

async function addImages() {
  try {
    // 加载并添加第一张图
    const img1 = await promisifiedImageFromURL(url1);
    canvas.add(img1);
    
    // 加载并添加第二张图，可传入配置项
    const img2 = await promisifiedImageFromURL(url2, { left: 100, top: 100 });
    canvas.add(img2);
  } catch (err) {
    console.error('图片加载出错:', err);
  }
}

// 执行函数
addImages();

对比原嵌套回调代码 #

原写法（回调地狱）：

// add first image
fabric.Image.fromURL(url1, function (oImg) {
  canvas.add(oImg);
  // add second image
  fabric.Image.fromURL(url2, function (oImg) {
    canvas.add(oImg);
  });
});

重构后的async/await写法更简洁，逻辑层级清晰，错误处理也更集中可控。

内容的提问来源于stack exchange，提问作者C_Z_