从Javascript函数中提取dataURL

Question

I have a function that aims to create a dataURL of a file using the FileReader. Considering this example.

toDataURL(url, callback){
  var xhr = new XMLHttpRequest();
  xhr.open('get', url);
  xhr.responseType = 'blob';
  xhr.onload = function(){
    var fr = new FileReader();
    var test = fr.onload = function(){
      callback(this.result);
    };

    fr.readAsDataURL(xhr.response); // async call
  };

  xhr.send();
}

I want to extract the variable this.result in the inline function as a return variable. It has not acces from other function. How can I do it?

Answer 1

Basicaly, what you want to do is return a value from an async function, you can do this with Promises, and optionally async/await.

Check this out:

 function toDataURL(url, callback) { return new Promise( function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get', url); xhr.responseType = 'blob'; xhr.onload = function() { var fr = new FileReader(); var test = fr.onload = function() { resolve(this.result) callback(this.result); }; fr.readAsDataURL(xhr.response); // async call }; xhr.onerror = function() { reject('Error); } xhr.send(); }); } const result = await toDataURL('some url'); // or toDataURL('some url').then((result) => { // do something with the result }); 

Answer 2

You could try to use Promise , like this:

toDataURL(url){
  var promise = new Promise(function (extract) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.responseType = 'blob';
    xhr.onload = function(){
      var fr = new FileReader();
      var test = fr.onload = function(){
        extract(this.result);
      };

      fr.readAsDataURL(xhr.response); // async call
    };

    xhr.send();
  });

  return promise;
}

(async function () {
  var result = await toDataURL('/someurl');

  console.log(result);
}());

Inside the toDataURL function, we create a promise. When returning the result, we just need to put it inside extract method.

Then, we create an asynchronous function to use await keyword to get the result directly.