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函数中，我们创建了一个promise。返回结果时，我们只需要将其放入extract方法中即可。

然后，我们创建一个异步函数，使用await关键字直接获取结果。

从Javascript函数中提取dataURL

2 个答案: