Javascript，使用 Promises 在 Array.reduce 中上传多个文件，怎么样？

Question

从Javascript, spliced FileReader for large files with Promises, how?演变而来，它向我展示了 Promise 如何解析函数，现在我陷入了同样的困境，但在 Array.reduce 函数内部。

目标是我想在数组中上传一个文件(已经这样做了)，其中每个数组项(一个文件)都是按顺序上传的(即通过 Promise 控制)。

然后，我知道答案就在 http://www.html5rocks.com/en/tutorials/es6/promises/?redirect_from_locale=es 中。 ，但我不明白如何将其应用到这里。我的数组不是 promise 数组，而是文件数组。好吧，整件事对我来说仍然很困惑。

这是我的代码，如果我能看到 ein console.log 消息，它就会起作用:

return myArray.reduce(function(previous, current) {
    var BYTES_PER_CHUNK = 100000;
    var start = 0;
    var temp_end = start + BYTES_PER_CHUNK;
    var end = parseInt(current.size);
    if (temp_end > end) temp_end = end;
    var content = ''; // to be filled by the content of the file
    var uploading_file = current;
    Promise.resolve().then(function() {
        return upload();
    })
    .then(function(content){
        // do stuff with the content
        Promise.resolve();
    });
},0)  // I add the 0 in case myArray has only 1 item
//},Promise.resolve()) goes here?

.then(function(){
    console.log('ein') // this I never see
});

function upload() {
  if (start < end) {
    return new Promise(function(resolve){
      var chunk = uploading_file.slice(start, temp_end);
      var reader = new FileReader();
      reader.readAsArrayBuffer(chunk);
      reader.onload = function(e) {
        if (e.target.readyState == 2) {
          content += new TextDecoder("utf-8").decode(e.target.result);
          start = temp_end;
          temp_end = start + BYTES_PER_CHUNK;
          if (temp_end > end) temp_end = end;
          resolve(upload());
        }
      }
    });
  } else {
    uploading_file = null;
    return Promise.resolve(content);
  }
}

• 经过几条评论后更新，看来现在可以使用了......还不确定

  var uploading_file, start, temp_end, end, 内容;var BYTES_PER_CHUNK = 100000;

  myArray.reduce(函数(上一个，当前){ 返回上一个 .then(函数() { BYTES_PER_CHUNK = 100000； 开始=0； temp_end = 开始 + BYTES_PER_CHUNK； 结束 = parseInt(当前.size); 如果(临时结束>结束)临时结束=结束； 内容=''； uploading_file = 当前；

  upload()
  .then(function(content){
      // do stuff with "content"
      console.log('here')
      return Promise.resolve();
  });
  

  });},Promise.resolve()).then(函数(){ console.log('ein');});

  函数上传() { 如果(开始<结束){ 返回新的 Promise(函数(解析){ var chunk = uploading_file.slice(start, temp_end); var reader = new FileReader(); reader.readAsArrayBuffer( block ); reader.onload = 函数(e) { if (e.target.readyState == 2) { content += new TextDecoder("utf-8").decode(e.target.result); 开始=临时结束； temp_end = 开始 + BYTES_PER_CHUNK； 如果(临时结束>结束)临时结束=结束； 解决(上传())； } } }); } 别的 { 上传文件=空； 返回 Promise.resolve(内容); }}

• 改进的代码，似乎有效，也许更容易阅读？

      var start, temp_end, end;
      var BYTES_PER_CHUNK = 100000;
  
      myArray.reduce(function(previous, current) {
          return previous
          .then(function() {
              start = 0;
              temp_end = start + BYTES_PER_CHUNK;
              end = parseInt(current.size);
              if (temp_end > end) temp_end = end;
              current.data = '';
  
              return upload(current)
              .then(function(){
                  // do other stuff
                  return Promise.resolve();
              });
          });
      },Promise.resolve())
      .then(function(){
        // do other stuff
      });
  
      function upload(current) {
          if (start < end) {
              return new Promise(function(resolve){
                  var chunk = current.slice(start, temp_end);
                  var reader = new FileReader();
                  reader.readAsText(chunk);
                  reader.onload = function(e) {
                      if (e.target.readyState == 2) {
                          current.data += e.target.result;
                          start = temp_end;
                          temp_end = start + BYTES_PER_CHUNK;
                          if (temp_end > end) temp_end = end;
                          resolve(upload(current));
                      }
                  }
              });
          } else {
              return Promise.resolve();
          }
      }
  

Answer 1

你已经很接近了!您需要使用之前的值；这应该是一个 promise 。将reduce的初始值设置为Promise.resolve()。然后在reduce函数中，而不是Promise.resolve().then(...)。你应该有这样的东西:

return previous
  .then(function() { return upload(current); })
  .then(function() { /* do stuff */ });

返回这里很重要。下次调用reduce函数时，这将成为上一个。

<小时/>

您在使用上传功能时遇到不少问题。 最大问题是传递变量的方式使其很难阅读:)(而且容易出错!)

如果您仅读取文本文件，请改用readAsText。请注意，我已将其重命名为 readFile，因为这是一个更准确的名称。

// returns a promise with the file contents
function readFile(file) {
    return new Promise(function (resolve) {
        var reader = new FileReader();
        reader.onload = function(e) {
            resolve(e.target.result);
        };
        reader.readAsText(file);
    };
}

那么你的归约就很简单:

files.reduce(function(previous, file) {
    return previous
      .then(function() { return readFile(file); })
      .then(function(contents) {
          // do stuff
      });
}, Promise.resolve());

<小时/>

不过，upload_file 变量有一个大错误。该变量是reduce 函数范围内的本地变量，因此它在upload 中只是undefined。将其作为参数传递:

function upload(upload_file) { ... }

<小时/>

关于var的旁注。这就是为什么即使您在reduce函数中使用var设置了upload_file，它也将是调用该函数进行upload之前的内容:

var a = 3;

function foo() {
  var a = 4;
  console.log(a); // 4
}

foo();
console.log(a); // 3