javascript - Javascript、Promises を使用して Array.reduce 内に複数のファイルをアップロードする方法は?

Question

Javascriptから進化し、大きなファイル用の FileReader を Promises に接続しました。どのように? Promise がどのように関数を解決できるかを示しましたが、今は同じですが Array.reduce 関数内で立ち往生しています。

目標は、各配列アイテム (ファイル) が順番にアップロードされる (つまり、promise によって制御される) 配列内にファイルをアップロードすることです (既に実行しています)。

次に、答えがhttp://www.html5rocks.com/en/tutorials/es6/promises/?redirect_from_locale=esにあることは理解していますが、それをここに適用する方法がわかりません。私の配列は約束の配列ではなく、ファイルの配列です。まあ、全体はまだ難読化されています。

これは私のコードで、einconsole.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、content; var BYTES_PER_CHUNK = 100000;

  myArray.reduce(function(previous, current) { return previous .then(function() { BYTES_PER_CHUNK = 100000; start = 0; temp_end = start + BYTES_PER_CHUNK; end = parseInt(current.size); if (temp_end > end) temp_end = 終了; コンテンツ = ''; uploading_file = 現在;

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

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

  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); リーダー. 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(アップロード()); } } }); } else { uploading_file = null; 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();
          }
      }