Htykuut

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?

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

});

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.