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

Question

注意:此问题也在此处的 Q.js邮件列表中交叉发布.

---

我遇到了多个异步操作的情况,我接受的答案指出使用诸如q.js之类的库使用Promise会更有益.

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

回购在这里,最重要的文件就是这个.

要求是我希望在遍历所有拖放的文件后,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中使用Promises？

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创建一个Deferred,它包含两个部分,a 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秒wait(deferred.resolve)之后解析promise .then可以在promise上调用该方法,并传递一个回调函数,以便在解析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