從Javascript函數中提取dataURL

Question

我有一個旨在使用FileReader創建文件的dataURL的函數。 考慮這個例子。

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

我想將內聯函數中的變量this.result提取為返回變量。 它沒有其他功能。 我該怎么做？

Answer 1

基本上，您要做的是從異步函數返回一個值，您可以使用Promises以及可選的async / await來實現。

看一下這個：

 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

您可以嘗試使用Promise ，如下所示：

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

在toDataURL函數內部，我們創建了一個toDataURL 。 返回結果時，我們只需要將其放入extract方法中即可。

然后，我們創建一個異步函數以使用await關鍵字直接獲取結果。