javascript - 在调用所有 promise 后循环遍历 jQuery Deferreds

Question

我目前正在尝试使用 HTML5 FileAPI 构建一个文件 uploader 。文件 uploader 应该处理多个文件并在文件是图像时显示图像预览。

由于 FileReader 类异步工作，我想等到所有文件都已读取。因此，我正在使用 Deferreds。

读取文件的方法正在返回一个 promise 。另一种方法遍历所有文件并将所有 promise 推送到一个数组中。然后，一旦所有 promise 都添加到我的数组中，我就应用 then() 方法。

现在是我的问题。由于 then() 方法仅在我获得所有 promise 时被调用一次。我没有机会处理每一个 promise 。我想要做的是，一旦所有 promise 都存在并返回结果，就循环遍历我的所有 promise 。

这是我的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]);
        }
    });

},

我是否对延期和 promise 使用了错误的方法？难道它们不应该像我尝试做的那样使用吗？是否有更优雅的方式来实现我的目的？

Answer 1

Am I using the wrong approach for deferreds and promises?

是的。在异步回调中，您不应访问 promises，而只能访问回调参数。 $.when的返回 promise 确实为数组中的每个 promise 使用 .resolve() 参数数组进行解析 - 您可以遍历 arguments object访问结果:

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