Angular has got us covered with its latest feature - combining Async Await with an EventListener

Question

Angular has got us covered with its latest feature - combining Async Await with an EventListener

I have been facing this issue for the past day and need help creating a specific scenario:

<img [src]="userdp | async" />

In my component.ts file, I want to include only this line:

this.userdp = this._userService.getUserDp();

Here is the code within the getUserDp() method:

async getUserDp() {
    return await
    this._http.get(APIvars.APIdomain+'/'+APIvars.GET_USER_DP,  { responseType: 'blob' }).toPromise().then( image => {
        if(image['type'] === 'application/json') {
          return null;
        }
        const reader = new FileReader();
        reader.addEventListener('load', () => {
           **return this._dom.bypassSecurityTrustResourceUrl(reader.result.toString());**
        });
        }, false);
        if (image) {
          reader.readAsDataURL(image);
        }
    });
  }

The promise does not wait for the reader to load in the EventListener, any immediate return statement produces the desired result. The bolded line contains the main data to be returned.

Thank you

angular typescript promise async-await

Answer 1

Answer №1

If you want to simplify your life and make it easier for future code readers, consider creating a promise-based FileReader method to eliminate callbacks in one place.

// Create a promise that resolves when the FileReader 'load' event is triggered
async function readAsDataURL(image) {
  const reader = new FileReader();
  return new Promise((resolve, reject) => {
    reader.addEventListener('load', () => {
      resolve(reader.result.toString());
    });
    // Add an error handler if needed
    reader.readAsDataURL(image);
  });
}

With the file handling code transformed into promises, using it becomes much more straightforward...

async getUserDp() {
  // Set temporary variables for readability
  const url = APIvars.APIdomain+'/'+APIvars.GET_USER_DP;
  const options = { responseType: 'blob' };
  
  // Use async/await instead of .then()
  const image = await this._http.get(url,  options).toPromise();
  
  // Check if the image is valid before proceeding
  if (!image || image['type'] === 'application/json') return null;
  
  // Read the file asynchronously using the created method
  const readerResult = await readAsDataURL(image);
  return this._dom.bypassSecurityTrustResourceUrl(readerResult);
}

Answer 2

If you want to simplify your life and make it easier for future code readers, consider creating a promise-based FileReader method to eliminate callbacks in one place.

// Create a promise that resolves when the FileReader 'load' event is triggered
async function readAsDataURL(image) {
  const reader = new FileReader();
  return new Promise((resolve, reject) => {
    reader.addEventListener('load', () => {
      resolve(reader.result.toString());
    });
    // Add an error handler if needed
    reader.readAsDataURL(image);
  });
}

With the file handling code transformed into promises, using it becomes much more straightforward...

async getUserDp() {
  // Set temporary variables for readability
  const url = APIvars.APIdomain+'/'+APIvars.GET_USER_DP;
  const options = { responseType: 'blob' };
  
  // Use async/await instead of .then()
  const image = await this._http.get(url,  options).toPromise();
  
  // Check if the image is valid before proceeding
  if (!image || image['type'] === 'application/json') return null;
  
  // Read the file asynchronously using the created method
  const readerResult = await readAsDataURL(image);
  return this._dom.bypassSecurityTrustResourceUrl(readerResult);
}

Answer 3

Answer №2

Commit to your vow

    writer.onload = function (e) {
       
    };

Answer 4

Commit to your vow

    writer.onload = function (e) {
       
    };

Angular has got us covered with its latest feature - combining Async Await with an EventListener

Answer №1

Answer №2

Similar questions

Show a reset button in an Angular 2 reactive form only when the form has unsaved changes

Encountering a problem when attempting to add ngrx to an Angular project

Learn how to retrieve the return data from two combined objects using Angular's TypeScript syntax

Empty initial value for first item in array using React hooks

Creating OL maps with subpar quality using the Ionic framework

Angular HTML is throwing an error related to object arrays

Using Typescript to create a Checkbox Grid that displays pipe-delimited values and implements a custom validation rule

Turning a JSON string into interpolation within an Angular application

The useEffect hook is triggering multiple unnecessary calls

ASP.NET is being used to host an angular application, but the deployUrl feature is

What is the process for incorporating custom parameters into Angular 5 DataTables?

Generating a form structure from json containing repeated inputs: Control with path formArray could not be located

There are no HTTP methods being exported in this specific file. Remember to export a named export for each individual HTTP method

The triggering of routing in Next.js is not established by useEffect

Include a .done() callback within a customized function

What is the reason behind the inability of the Angular/TypeScript HTTP GET method to accept a JSON object as a parameter

Verify if Angular 2 route parameters have a legitimate value

Using Typescript for Asynchronous Https Requests

In Ionic 2, any modifications made to the data model will only be reflected in the user interface after there is

Understanding the attribute types in Typescript React