javascript - 如何使用 q.js Promise 处理多个异步操作

Question

注意:这个问题也通过 here 交叉发布在 Q.js 邮件列表中.

<小时/>

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

我确信要重构我的代码以使用 Promises，但由于代码相当长，我 trim 了不相关的部分并将关键部分导出到单独的存储库中。

仓库是 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.
}

这可行，但并不理想。我更喜欢在所有页面成功执行此函数calculateRatio之后仅调用一次checkWhenReady。

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 一起使用的建议。关键是，任何时候你想要异步执行某些操作，都应该返回一个 Promise，一旦任务完成，你就应该解决该 Promise。这允许函数的调用者监听要完成的任务，然后执行其他操作。

和以前一样，我用 //*** 注释了我的更改。如果您还有任何其他问题，请告诉我。

        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，其中包含两部分:promise 和 resolve 函数。 promise 由 getSizeSettingsFromPage 返回。基本上，返回一个 Promise 是函数表达“我稍后再回复你”的一种方式。一旦函数完成其任务(在本例中，一旦 image.onload 事件触发)，resolve 函数将用于解析 Promise。这向等待 promise 的任何事物表明任务已完成。

这是一个更简单的示例:

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。 then 方法可以在 Promise 上调用，并传递一个回调函数，以便在 Promise 解决后执行。回调函数传入promise的解析值。

在你的例子中，我们有一系列的 promise ，我们需要在执行函数之前等待所有 promise 完成，所以我们使用了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