web-dev-qa-db-ja.com

Angular.jsで約束が満たされたときに常にいくつかのコードを実行する方法

私のAngular.jsアプリケーションでは、いくつかの非同期操作を実行しています。開始する前に、アプリケーションをモーダルdivでカバーし、操作が完了したら、操作が成功したかどうかにかかわらず、divを削除する必要があります。

現在、私はこれを持っています：

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    LoadingOverlay.stop();
}, function() {
    LoadingOverlay.stop(); // Code needs to be duplicated here
})

それはうまくいきますが、私はこの擬似コードのようなよりクリーンなものを持っていることを好むでしょう：

LoadingOverlay.start(); 
Auth.initialize().finally(function() { // *pseudo-code* - some function that is always executed on both failure and success.
    LoadingOverlay.stop();
})

私はそれが非常に一般的な問題だと思うので、それはできると思っていましたが、ドキュメントには何も見つかりません。それを行うことができれば、何かアイデアはありますか？

javascriptangularjspromisedeferredfinally
83
laurent

この機能は このプルリクエスト で実装され、AngularJSの一部になりました。最初は「常に」と呼ばれ、その後finallyに名前が変更されたため、コードは次のようになります。

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    // Success handler
}, function() {
    // Error handler
}).finally(function() {
    // Always execute this on both error and success
});

finallyは予約済みのキーワードであるため、特定のブラウザ（IEやAndroidなど）で破損しないように、文字列にする必要がある場合があります。ブラウザ）：

$http.get('/foo')['finally'](doSomething);
161
laurent

Umbracoバージョン7.3.5バックエンドとAngularJSバージョン1.1.5を使用していますが、このスレッドが見つかりました。承認済みの回答を実装すると、エラーが発生しました。

xxx（...）。then（...）。finallyは関数ではありません

ただし、機能したのはalwaysでした。古いバージョンのAngularJSを使用している誰かがこのスレッドを見つけてfinallyを使用できない場合は、代わりにこのコードを使用します

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    // Success handler
}, function() {
    // Error handler
}).always(function() {
    // Always execute this on both error and success
});
7
Ogglas

AngularJSを使用していない場合、およびエラーをキャッチしても大丈夫な場合（.finally（）がそれを行うかどうか不明）、. catch（）。then（）を使用して重複コードを回避できます。

Promise.resolve()
  .catch(() => {})
  .then(() => console.log('finally'));

とにかく、catch（）は、ロギングやその他のクリーンアップに役立つ可能性があります。 https://jsfiddle.net/pointzerotwo/k4rb41a7/

2
PointZeroTwo

NgViewを使用してページのコンテンツをレンダリングし、イベント$ viewContentLoadedでモーダルの削除をトリガーします。そのイベントについては http://docs.angularjs.org/api/ng.directive:ngView および http://docs.angularjs.org/api/ng を参照してください。 $ onイベントリスナーの$ rootScope.Scope。

1
ocolot