FileReader 的 Promise 函数过早解决答案

【问题标题】：Promise function with FileReader resolves prematurelyFileReader 的 Promise 函数过早解决
【发布时间】：2018-05-11 03:05:39
【问题描述】：

我正在打开一个文件以读取如下内容：

convertBlobToBase64(blob){
    var convertPromise = new Promise(function(resolve, reject){
      var fileReader = new FileReader();
      fileReader.onload = function() {
          var dataUrl = this.result;
          var base64 = dataUrl.split(',')[1];
          resolve(base64);
      };

      fileReader.readAsDataURL(blob);
    });

    return convertPromise;
  }

然后我调用这个函数并在它解析时传递结果数据：

myFunction(audioFile){
    var to64 = this.convertBlobToBase64(audioFile);
    to64.then(function(base64Val){
        var nextPromise = postCall();
        nextPromise.then(//stuff);
        return nextPromise;
    });

    return to64;
}

但是，当我调用 myFunction 时，它会立即返回一个已解决的 Promise，其中包括来自 convertBlobToBase64 的转换数据，而不是一个未解决的 Promise，它应该像预期的那样等待 nextPromise。

相反，myFunction 的 .then 会立即被调用并失败，因为它没有正确的数据。我是不是误解了 Promise 函数？

【问题讨论】：

为什么需要base64？
@Endless 将音频内容发送到服务器。
不能直接发送吗？ FormData? base64 的大小约为 3 倍
@Endless 你能详细说明一下吗？当我没有编码到 base64 时，音频没有正确加载，会显示为损坏。我正在将其上传到保管箱。

标签： javascript angular promise

【解决方案1】：

试试这个代码：

myFunction(audioFile){
    var to64 = this.convertBlobToBase64(audioFile);
    return to64.then(function(base64Val){
        var nextPromise = postCall();
        return nextPromise.then(//stuff);
    });
}

【讨论】：

成功了，谢谢。你能解释一下为什么return to64 是一个预先解决的承诺吗？
如果它有效，那么这里是解释。承诺是包装价值的东西。因此，当您在一个承诺上调用then 时，它反过来会返回一个新的承诺。所以nextPromise.then(//stuff); 行只是忽略了返回的承诺。我希望这很清楚。
是的，但为什么return to64 行不是延迟承诺？为什么已经解决了？
可能解决得那么快哈哈。我的意思是 to64 不必等待 then 之后的内容。

【解决方案2】：

顺便说一句，您不需要为函数包装另一个承诺。你可以使用你的 postCall 作为解析函数并像这样链接它：

myFunction(audioFile){
  return convertBlobToBase64(audioFile)
    .then(base64Val => postCall())
    .then(//stuff)
}

【讨论】：