JavaScriptでのPromiseの使い方を事例付きで詳しく解説

JavaScriptでのPromiseの使い方を事例付きで詳しく解説_基礎知識

WBOY

リリース： 2016-05-16 15:53:01

オリジナル

1149 人が閲覧しました

抜粋 – Parse JavaScript SDK は、ほとんどの非同期メソッドをサポートする jquery 互換の Promises モードを提供するようになりました。これが何を意味するかは、以下を読むと理解できるでしょう。

「Promise」は JavaScript プログラミングにおける次の素晴らしいパラダイムを表していますが、なぜそれがそれほど素晴らしいのかを理解するのは簡単ではありません。その核心は、Promise がタスクの結果を表し、完了する場合と完了しない場合があるということです。 Promise モードで必要な唯一のインターフェイスは then メソッドを呼び出すことです。これは、Promise が完了または失敗したときに呼び出されるコールバック関数を登録するために使用できます。これについては、一般的に CommonJS Promises/A proposal。たとえば、Prase.Object オブジェクトを保存したいとします。これは非同期操作です。古いコールバックパラダイムでは、コードは次のように記述されます。

object.save({ key: value }, {
 success:function(object) {
  // the object was saved.
 },
 error:function(object, error) {
  // saving the object failed.
 }
});
在新的Promise范式中，同样的代码你可以这样写:
 
object.save({ key: value }).then(
 function(object) {
  // the object was saved.
 },
 function(error) {
  // saving the object failed.
 });

ログイン後にコピー

あまり違いはありませんか？それで、何が大事なのでしょうか？そうですね、Promise の真の力は、複数の連鎖です。promise.then(func) が呼び出されるとき、新しい Promise が返されますが、前の Promise が完了するまで実行されません。ただし、ここには特殊なケースがあり、コールバックが then を通じて新しい Promise を返した場合、 then を通じて返された Promise はコールバックの実行が完了するまで実行されません。詳細については、Promise/A を参照してください。これは、例を通してより明確に理解できます。

オブジェクトを検索して更新するログインコードを作成するとします。古いコールバックパラダイムでは、ピラミッドコード補完を使用できました:

Parse.User.logIn("user","pass", {
 success:function(user) {
  query.find({
   success:function(results) {
    results[0].save({ key: value }, {
     success:function(result) {
      // the object was saved.
     }
    });
   }
  });
 }
});

ログイン後にコピー

これだけでもばかげているように見えますが、さらにばかばかしいのは、エラー処理さえ存在しないことです。ただし、Promise チェーン構造により、コードがより快適に見えます:

Parse.User.logIn("user","pass").then(function(user) {
 returnquery.find();
}).then(function(results) {
 returnresults[0].save({ key: value });
}).then(function(result) {
 // the object was saved.
});

ログイン後にコピー

すごい！

エラー処理
上記のコードは単純だったのでエラー処理を追加していませんでしたが、追加した後は、古いコールバックコードが混乱していることがわかります。

Parse.User.logIn("user","pass", {
 success:function(user) {
  query.find({
   success:function(results) {
    results[0].save({ key: value }, {
     success:function(result) {
      // the object was saved.
     },
     error:function(result, error) {
      // An error occurred.
     }
    });
   },
   error:function(error) {
    // An error occurred.
   }
  });
 },
 error:function(user, error) {
  // An error occurred.
 }
});

ログイン後にコピー

Promise は処理が完了したかどうかを認識しているため、エラーが発生するまでコールバックを実行せずにエラーを渡すことができます。たとえば、上記のコードは次のように省略できます:

Parse.User.logIn("user","pass").then(function(user) {
 returnquery.find();
}).then(function(results) {
 returnresults[0].save({ key: value });
}).then(function(result) {
 // the object was saved.
},function(error) {
 // there was some error.
});

ログイン後にコピー

通常、開発者は、非同期 Promise の失敗は例外をスローすることと同等であると考えます。実際、コールバックがエラーをスローした場合、Promise は失敗メッセージを返します。エラーを次に使用可能なエラーハンドラーに渡すことは、例外がキャッチされるまで例外をスローすることと同じです。

jQuery、バックボーン、解析
開発者が使用できる Promise を実装するライブラリは数多くあります。 jQuery の Deferred、Microsoft の WinJS.Promise、when.js、q、dojo.Deferred と同様です。

しかし、知っておくべき興味深いことがあります。ここで、長くて魅力的な jQuery のプルリクエストのディスカッションを読むことができます。jQuery の実装は、Promises/A のルールに完全には準拠していません。実験中に、1 つだけ違いがあることがわかりました。エラーハンドラーが単に Promise を返す以外の情報を返す場合、ほとんどの実装はエラーを伝播せずにエラーを処理することを検討します。ただし、jquery はこのエラーをここで処理しようとは考えず、代わりに前方に渡します。異なるシステムの Promise はシームレスに混在する必要がありますが、注意が必要です。潜在的な問題の 1 つは、Promise が同等に扱われるため、エラーハンドラー内で Promise が返される (元の値を置き換える) ことです。

doFailingAsync().then(function() {
 // doFailingAsync doesn't succeed.
},function(error) {
 // Try to handle the error.
 return"It's all good.";
}).then(function(result) {
 // Non-jQuery implementations will reach this with result === "It's all good.".
},function(error) {
 // jQuery will reach this with error === "It's all good.".
});

ログイン後にコピー

Backbone 0.9.10 の最新バージョンでは、非同期メソッドは jQuery Promise の一種である jqXHR を返すようになりました。 Parse JavaScript SDK の目標の 1 つは、Backbone と可能な限り互換性を持たせることです。

Cloud Code
ではうまく動作しないため、jqXHR を返すことはできません。 Parse.Promise クラスを追加します。これは、jQuery Deferred 標準に従います。 Parse JavaScript SDK最新バージョンでは、これらの新しいオブジェクトをサポートするためにすべての非同期メソッドが更新されており、古いコールバックメソッドも引き続き使用できます。しかし、上記の例に基づくと、あなたは新しい方法を好むと思います。だから約束をしてみてください！