在所有的promise被调用之后，通过jQuery Deferreds循环

我目前正在尝试使用HTML5 FileAPI构buildfile upload器。 file upload器应该处理多个文件，并显示图像预览，如果该文件是一个图像。

由于FileReader类asynchronous工作，我想等到所有的文件都被读取。 所以我使用了Deferreds。

读取文件的方法是返回一个承诺。 另一种方法循环遍历所有文件，并将所有的承诺推送到一个数组中。 然后，我将所有的promise都添加到我的数组中，然后应用then（）方法。

现在到我的问题。 由于then（）方法只被调用一次 ，当我得到所有的承诺。 我没有机会处理每一个承诺。 我想要做的是，一旦他们都在那里循环所有的承诺，并返回结果。

这是我的FileProcessor对象

read: function(file) { var reader = new FileReader(); var deferred = $.Deferred(); reader.onload = function(event){ deferred.resolve(event.target.result); }; reader.onerror = function() { deferred.reject(this); } if(/^image/.test(file.type)) reader.readAsDataURL(file); return deferred.promise(); }, 

这里是FileManager对象的handleFileSelect（）方法，它应该调用FileProcessor.read（）方法。

 handleFileSelect: function(e){ var $fileList = $('#file-list'); var files = e.target.files; var promises = []; //Promises are going to be stored here var filestring = ''; var processedFile; // Loop trough all selected files for(var i = 0; i < files.length; i++){ // Store the promise in a var... processedFile = FileProcessor.read(files[i]); // And push it into the array where the promises are stored promises.push(processedFile); } // Once all deferreds have been fired... $.when.apply(window, promises).then(function(){ for(var i = 0; i < promises.length; i++){ // PROBLEM HERE: I need to get the // result from my resolved Deferred // of every single promise object console.log(promises[i]); } }); }, 

我是否使用错误的方法来推迟和承诺？ 难道他们不应该像我试图做的那样使用吗？有没有更好的方法来达到我的目的？

Answer 1

我是否使用错误的方法来推迟和承诺？

是。 在asynchronouscallback中，您不应该访问promises ，而只能使用callback参数。 $.when .resolve()的返回承诺会使用数组中的每个.resolve()参数的数组来parsing – 您可以遍历arguments对象来访问结果：

 $.when.apply($, promises).then(function () { for (var i = 0; i < arguments.length; i++) { var singleresult = arguments[i][0]; console.log(singleresult); } }); 

Answer 2

您可以使用参数对象来引用promise对象返回的所有值

 $.when.apply($, promises).then(function () { for (var i = 0; i < arguments.length; i++) { var data = arguments[i][0]; // PROBLEM HERE: I need to get the // result from my resolved Deferred // of every single promise object console.log(data); } }); 

Answer 3

我看你已经接受了一个答案，但你可能想知道你的handleFileSelect方法可以大大简化如下

 handleFileSelect: function(e) { var promises = $.map(e.target.files, function(file) { return FileProcessor.read(file); }); $.when.apply(window, promises).then(function() { $.each(arguments, function(i, a) { console.log(a[0]); }); }); }, 

当然，当你处理结果时，它会变得更加复杂，但这应该给你一个很好的简洁的基础。