Question

注意：此问题也会在here上的Q.js邮件列表中交叉发布。

我遇到了多个异步操作的情况，answer I accepted指出使用诸如q.js之类的库使用Promise会更有用。

我确信重构我的代码以使用Promises，但因为代码很长，我已经修剪了不相关的部分并将关键部分导出到一个单独的仓库中。

回购邮件是here，最重要的文件是this。

要求是在遍历所有拖放的文件后，我希望 pageSizes 非空。

问题是 getSizeSettingsFromPage 函数中的FileAPI操作导致 getSizeSettingsFromPage 异步。

所以我不能像这样放置 checkWhenReady（）; 。

function traverseFiles() {
  for (var i=0, l=pages.length; i<l; i++) {
    getSizeSettingsFromPage(pages[i], calculateRatio);   
  }
  checkWhenReady(); // this always returns 0.
}

这有效，但并不理想。在所有pages成功完成此函数calculateRatio之后，我更喜欢将checkWhenReady调用为ONCE。

function calculateRatio(width, height, filename) {
  // .... code 
  pageSizes.add(filename, object);
  checkWhenReady(); // this works but it is not ideal. I prefer to call this method AFTER all the `pages` have undergone calculateRatio
  // ..... more code...
}

如何重构代码以在Q.js中使用Promise？

Answer 1

我对Q.js的使用建议如下。关键是，无论何时想要异步执行某些操作，都应该返回一个承诺，一旦任务完成，您应该解决该承诺。这允许函数的调用者监听要完成的任务，然后执行其他操作。

和以前一样，我用// ***评论了我的更改。如果您有任何其他问题，请与我们联系。

        function traverseFiles() {
            // *** Create an array to hold our promises
            var promises = [ ];
            for (var i=0, l=pages.length; i<l; i++) {
                // *** Store the promise returned by getSizeSettingsFromPage in a variable
                promise = getSizeSettingsFromPage(pages[i]);
                promise.then(function(values) {
                    var width = values[0],
                        height = values[1],
                        filename = values[2];
                    // *** When the promise is resolved, call calculateRatio
                    calculateRatio(width, height, filename);
                });
                // *** Add the promise returned by getSizeSettingsFromPage to the array
                promises.push(promise);
            }
            // *** Call checkWhenReady after all promises have been resolved
            Q.all(promises).then(checkWhenReady);
        }

        function getSizeSettingsFromPage(file) {
            // *** Create a Deferred
            var deferred = Q.defer();
            reader = new FileReader();
            reader.onload = function(evt) {
                var image = new Image();
                image.onload = function(evt) {
                    var width = this.width;
                    var height = this.height;
                    var filename = file.name;
                    // *** Resolve the Deferred
                    deferred.resolve([ width, height, filename ]);
                };
                image.src = evt.target.result;
            };
            reader.readAsDataURL(file);
            // *** Return a Promise
            return deferred.promise;
        }

修改

defer创建延迟，其中包含两个部分：promise和resolve功能。 promise返回getSizeSettingsFromPage。基本上回复承诺是一种功能说“我稍后会回复你”的方式。一旦函数完成了它的任务（在这种情况下，image.onload事件被触发后）resolve函数用于解析承诺。这表明任何事情等待任务完成的承诺。

这是一个更简单的例子：

function addAsync(a, b) {
    var deferred = Q.defer();
    // Wait 2 seconds and then add a + b
    setTimeout(function() {
        deferred.resolve(a + b);
    }, 2000);
    return deferred.promise;
}

addAsync(3, 4).then(function(result) {
    console.log(result);
});
// logs 7 after 2 seconds

addAsync函数添加两个数字，但在添加它们之前等待2秒。由于它是异步的，它返回一个promise（deferred.promse）并在2秒等待（deferred.resolve）后解析promise。可以在promise上调用then方法，并传递一个回调函数，以便在解析promise之后执行。回调函数在promise的分辨率值中传递。

在你的情况下，我们有一系列的promises，我们需要在执行函数之前等待所有，所以我们使用 Q.all 。这是一个例子：

function addAsync(a, b) {
    var deferred = Q.defer();
    // Wait 2 seconds and then add a + b
    setTimeout(function() {
        deferred.resolve(a + b);
    }, 2000);
    return deferred.promise;
}

Q.all([
    addAsync(1, 1),
    addAsync(2, 2),
    addAsync(3, 3)
]).spread(function(result1, result2, result3) {
    console.log(result1, result2, result3);
});
// logs "2 4 6" after approximately 2 seconds

Answer 2

看起来您应该使用Q.all函数创建一个主承诺，该承诺对应于所有getSizeSettings承诺何时完成。

https://github.com/kriskowal/q#combination

var ps = [];
for (var i=0, l=pages.length; i<l; i++) {
   ps[i] = getSizeSettingsFromPage(pages[i], calculateRatio);   
}

Q.all(ps).then(function(){ callWhenReady() })

大多数promise表应提供类似的方法来执行此类同步。如果您遇到过一个不能做的事情，那就是将每个单独的承诺挂钩到一个回调，该回调在被调用时递增共享计数器。当你的计数器到达n时，你知道你已经解决了所有的承诺，所以你也可以让增量回调调用“真正的”回调。

//If you did not have Q.all available
//Or had to code this without a promise library

var to_go = pages.length;
for (var i=0, l=pages.length; i<l; i++) {
   getSizeSettingsFromPage(pages[i], calculateRatio)
   .then(function(){
       to_go--;
       if(to_go == 0){
           callWhenReady()
       }
   });
}

请注意，在这些情况下，直到现在才允许异步调用并行运行。如果你需要它们按顺序运行，那么通常唯一的方法是将for循环重写为递归函数

var go = function(i){
    if(i>=pages.length){
        return call_next_step()
    }else{
        return do_ith_calculation(i)
        .then(function(){
            return go(i+1)
        })
    }
};
go(0);

如何使用q.js promises来处理多个异步操作

2 个答案:

修改