JavaScript中节点画布loadImage的异步等待问题[重复]答案

【问题标题】：Async Await Problems with node-canvas loadImage in JavaScript [duplicate]JavaScript中节点画布loadImage的异步等待问题[重复]
【发布时间】：2020-02-27 15:44:30
【问题描述】：

我无法让异步等待函数在节点 js 中工作。我使用node canvas repository 加载本地图像。当试图访问返回的值时，它仍然是一个 Promise，即使我在等待它。如何修复代码？

   async function loadMyLocalImage() {
      const img = await loadImage("pathToMyImage/img.jpg"); // loadImage is a function from node canvas package https://github.com/Automattic/node-canvas#loadimage      
      return img;
    }

    let localImage = loadMyLocalImage();
    console.log(localImage); // returns: Promise { <pending> }

    const canvas = createCanvas(200, 200);
    const ctx = canvas2.getContext("2d");
    ctx.drawImage(localImage, 0, 0);

此代码抛出错误：

ctx.drawImage(localImage, 0, 0);
     ^

TypeError: Image or Canvas expected

因为此时 localImage 仍然是一个 Promise。

在执行下一个函数之前，如何等待我的 Promise 在这段代码 sn-p 中解析？

【问题讨论】：

标签： javascript node.js canvas async-await

【解决方案1】：

loadMyLocalImage 是一个返回承诺的函数

async function loadMyLocalImage() {
    const img = await loadImage("pathToMyImage/img.jpg");       
    console.log(img);
    const canvas = createCanvas(200, 200);
    const ctx = canvas.getContext("2d");
    ctx.drawImage(localImage, 0, 0); 
}

loadMyLocalImage();

【讨论】：

【解决方案2】：

您的函数返回一个承诺，而不是您需要的实际值。所以你的函数并没有真正添加任何东西到 loadImage 已经做了：它返回一个承诺。

所以，.. 将您的输出逻辑和任何其他需要承诺值的代码移到您的函数中，就在 await 之后：

const canvas = createCanvas(200, 200);
const ctx = canvas2.getContext("2d");

async function loadAndProcessMyLocalImage() {
  const localImage = await loadImage("pathToMyImage/img.jpg");      
  console.log(localImage);
  ctx.drawImage(localImage, 0, 0); 
}

loadAndProcessMyLocalImage();

【讨论】：

【解决方案3】：

是的，您需要在 .then 和 .catch 以及在 .then 或.catch 这将是您真正的价值。使用 .then 后 success 或使用 .catch 后 error 。使用 async await 时总是返回 promise。如果您有多个 await 请求，请使用 promise.all 否则只需返回 promise 。

【讨论】：