ES6: Using DataURI to provide input results in undefined output

Question

ES6: Using DataURI to provide input results in undefined output

In my current project, I am facing a challenge. I am attempting to pass image dataURI as an input from a url link to the image. To achieve this task, I know that I have to utilize canvas and convert it from there. However, since this process involves an 'async' method, I seem unable to generate a proper return value.

    getLogo() {
    let image = new Image();
    let canvas = document.createElement('canvas');
    return new Promise((resolve) => {
      image.onload = () => {
        canvas.width = image.naturalWidth;
        canvas.height = image.naturalHeight;
        canvas.getContext('2d').drawImage(image, 0, 0);
        let uri = canvas.toDataURL('image/png');
        resolve(uri);
      };
      image.src = this.logo;
    });
  }

  getLogoURI() {
    this.getLogo().then((result) => {
      console.log(result); // the correct output writes here
      return result; // this returns undefined
    });
  }

To retrieve the URI within a for loop in my class, I make use of this function.

let logo = tariff.getLogoURI();

I suspect that when calling getLogoURI(), it is automatically considered a synchronous function, thus failing to provide the expected outcome. However, I'm unsure about the exact reason behind this behavior.

javascript asynchronous ecmascript-6 data-uri

Answer 1

Answer №1

Let's dive into the current functionality of the getLogoURI method

getLogoURI() {
  // When getLogoURI() is called, it in turn calls getLogo()
  // getLogo() returns a promise,
  // The success callback within then() is invoked upon resolving the promise
  // The then() function also returns a promise which is not being returned by getLogoURI() 
  // Hence, getLogoURI() does not return anything and defaults to undefined
  // You're seeing 'undefined' as the output for this reason
  this.getLogo().then((result) => {
    console.log(result); // This prints the correct output
    return result; // However, this actually returns undefined
  });
}

To address this issue, we need to make some adjustments:

getLogoURI() {
  // Return the promise generated by then()
  return this.getLogo().then((result) => {
    console.log(result); // This prints the correct output
    return result; // However, this actually returns undefined
  });
}

Now, getLogoURI will successfully return a promise that can be utilized like so:

getLogoURI().then(result => // Use the result here);

Wait, the modification made above essentially eliminates the need for getLogoURI. Attempting synchronous execution of async operations is impossible. I recommend exploring MDN's documentation on then for further clarification.

You could explore using async/await for a more streamlined control flow, mimicking synchronicity while staying asynchronous. Exercise caution with compatibility issues across browsers when employing async/await. With async/await, your code would look something like this:

async useLogoURI() {
  let logo = await this.getLogo();
  // Utilize the logo data at this point
}

Answer 2

Let's dive into the current functionality of the getLogoURI method

getLogoURI() {
  // When getLogoURI() is called, it in turn calls getLogo()
  // getLogo() returns a promise,
  // The success callback within then() is invoked upon resolving the promise
  // The then() function also returns a promise which is not being returned by getLogoURI() 
  // Hence, getLogoURI() does not return anything and defaults to undefined
  // You're seeing 'undefined' as the output for this reason
  this.getLogo().then((result) => {
    console.log(result); // This prints the correct output
    return result; // However, this actually returns undefined
  });
}

To address this issue, we need to make some adjustments:

getLogoURI() {
  // Return the promise generated by then()
  return this.getLogo().then((result) => {
    console.log(result); // This prints the correct output
    return result; // However, this actually returns undefined
  });
}

Now, getLogoURI will successfully return a promise that can be utilized like so:

getLogoURI().then(result => // Use the result here);

Wait, the modification made above essentially eliminates the need for getLogoURI. Attempting synchronous execution of async operations is impossible. I recommend exploring MDN's documentation on then for further clarification.

You could explore using async/await for a more streamlined control flow, mimicking synchronicity while staying asynchronous. Exercise caution with compatibility issues across browsers when employing async/await. With async/await, your code would look something like this:

async useLogoURI() {
  let logo = await this.getLogo();
  // Utilize the logo data at this point
}

ES6: Using DataURI to provide input results in undefined output

Answer №1

Similar questions

The Map Function runs through each element of the array only one time

The variable 'firebase' is nowhere to be found

Storing content from external files in Angular 1.x templateCache

Scroll positioning determines the height of an entity

Displaying adornments in a vertical arrangement within a TextField using Material UI

The header in the fetch() function is displaying as application/x-www-form-urlencoded rather than the expected application/json

What is the mechanism by which a custom hook, functioning as a trigger, initiates the re-rendering of a separate function component?

Navigate array in vue-chart.js

Successor in a JavaScript array with multiple dimensions

Avoiding data type conversion in JavaScript/TypeScript

Database storage of image tags on websites, similar to functionality found on social media platforms such as Facebook

Anonymous self-executing functions with parameters from an external scope

Exploring the intricacies of debugging async/await in Node.js with the help of

AngularJS: accessing siblings by using the ng-click directive

Solving routing issues using object constructors in expressjs

I encounter Error 406 and CORS issues when making API calls

Ways to determine if the user is either closing the browser or navigating to a different website

Modifying the default text within a select box using jQuery

The placeholder feature seems to be malfunctioning when it comes to entering phone numbers in a react

execute action after a specific point in time in the video is reached