23

注: この質問は、こちらの Q.js メーリング リストにも相互投稿されています。

私は複数の非同期操作を伴う状況にあり、私が受け入れた答えは、q.js などのライブラリを使用して Promises を使用する方がより有益であると指摘しました。

Promises を使用するようにコードをリファクタリングすることを確信していますが、コードがかなり長いため、無関係な部分をトリミングし、重要な部分を別のリポジトリにエクスポートしました。

リポジトリはここにあり、最も重要なファイルはこれです。

要件は、ドラッグアンドドロップされたすべてのファイルをトラバースした後、 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 を 1 回だけ呼び出すことを好みます。

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 を利用するためにコードをリファクタリングするにはどうすればよいですか?

4

2 に答える 2

45

これを 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;
        }

編集

deferaと関数の 2 つの部分を含むDeferredを作成します。はによって返されます。基本的に promise を返すことは、関数が「後で返信します」と言う方法です。関数がそのタスクを完了すると (この場合はイベントが発生すると)、関数は promise を解決するために使用されます。これは、タスクが完了したという約束を待っているものに示します。promiseresolvepromisegetSizeSettingsFromPageimage.onloadresolve

より簡単な例を次に示します。

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

関数は 2 つのaddAsync数値を追加しますが、それらを追加する前に 2 秒待機します。非同期であるため、Promise を返し ( deferred.promse)、2 秒待機した後に Promise を解決します ( deferred.resolve)。プロミスでthenメソッドを呼び出し、プロミスが解決された後に実行されるコールバック関数を渡すことができます。コールバック関数は、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
于 2012-11-28T06:02:54.620 に答える
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);
于 2012-11-28T05:00:48.133 に答える