Angular 2 中的异步等待答案

【问题标题】：async await in Angular 2Angular 2 中的异步等待
【发布时间】：2021-07-24 20:28:00
【问题描述】：

按照这个例子，我对 Angular 2 中的 await/async 有了基本的了解：

 async getValueWithAsync() {
    const value = <number>await this.resolveAfter2Seconds(20);
    console.log(`async result: ${value}`);
  }

在我的 Angular 应用程序中，我需要截取 div 的屏幕截图，将其转换为 Blob，从我的后端获取 Amazon 预签名 URL，然后使用预签名 URL 上传屏幕截图客户端。

我的逻辑的每个部分都在使用 PostMan 进行工作和测试。我的问题是图片在创建它的函数返回之前上传，导致上传的图片为空。

 async generateAnswer() {
    // takes a snaphot of the div and returns it as Blob
    var pic = await this.getPicture()
    // coonects to the backend and returns an Amazon S3 presigned Url
    this.s3Upload.getPresignedUrl("myPic")
      .subscribe(r => {
        // upload the snapshot as a Blob to my bucket 
        this.s3Upload.uploadFile(r["url"], pic)
          .subscribe(r => console.log("uploaded"))
      })
  }

  getPicture() {
    // takes a snaphot of the div and returns it as Blob
    return this.slideGenerator.generateAnswer()
  }

我的 generateAnswer():

generateAnswer() {
    let answer = document.querySelector('#answer') as HTMLImageElement;
    html2canvas(answer, { useCORS: true }).then(canvas => {
      var base64image = canvas.toDataURL("image/png");
      this.blobImage = this.dataURIToBlob(base64image);
      return (this.blobImage);
    });
  }

当我记录图片时，我得到undefined 此逻辑不起作用，因为它没有等待 this.getPicture() 在 pload 之前返回值。

【问题讨论】：

可能不会改变任何东西，但您可以将您的功能简化为getPicture() { return this.slideGenerator.generateAnswer(); }
async / await 与 Angular 无关。它是 ecma 脚本。你能告诉我们方法generateAnswer的内容吗？你能登录pic吗？我在 generateAnswer 方法中缺少等待。一般来说，你可以在 javascript 中等待所有内容，但它只对返回承诺有意义。但是如果重要的承诺已经在generateAnswer 中被“忽略”了，那么如果你在外面等待，则没有效果。
尝试在 getPicture 方法中使用 async 和 await。

标签： javascript angular asynchronous async-await

【解决方案1】：

您只能在异步函数中使用 await，您应该将 await 放在您希望同步运行的任何内容之前（先完成执行）

async generateAnswer() {
  const answer = document.querySelector('#answer') as HTMLImageElement;
  const canvas = await html2canvas(answer, { useCORS: true });
  const base64image = canvas.toDataURL("image/png");
  this.blobImage = this.dataURIToBlob(base64image);//use await if async
  return this.blobImage;
}

还有一件事，避免使用var、let 在不必要的时候:)

【讨论】：