async await in Angular 2

Question

I have a basic knowledge of await/async in Angular 2 following this exemple:

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

In my Angular app I need to take a screenshot of a div, convert it to Blob, fetch an Amazon presigned URL from my backend and upload the screenshot client side with the presigned URL.

Each part of my logic is working and tested with PostMan. My issue is that the picture is uploaded before the function creating it returns it, resulting in an empty uploaded picture.

 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()
  }

My 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);
    });
  }

As I log pic I get undefined This logic is not working since it's not waiting for this.getPicture() to return a value before ploading it.

Probably won't change anything but you can simplify your function to getPicture() { return this.slideGenerator.generateAnswer(); } — Chrillewoodz
– Chrillewoodz, Commented Jul 24, 2021 at 8:20
async / await has nothing to do with angular. It is ecma script. Could you please show us the content of the method generateAnswer and could you please log pic? I this there is a missing await in the generateAnswer method. in general you can await everything in javascript but it makes only sense for returns promises. but if the important promise is already "ignored" in generateAnswer is has no effect if you await out side. — Thomas Renger
– Thomas Renger, Commented Jul 24, 2021 at 9:22

Or Yaacov · Accepted Answer · 2021-07-24 11:20:34Z

2

you can use await only in async functions, you should put await before anything that you wish to run synchronous (finish executing first)

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;
}

and another thing, avoid using var, let when they are not necessary :)

edited Jul 24, 2021 at 11:20

answered Jul 24, 2021 at 11:14

Or Yaacov

3,9205 gold badges29 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

async await in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related