2015-12-30 20 views
6

$httpリクエストをすべて「ラップ」する方法を探していますので、アプリケーションが何らかの処理を行っているときにgifイメージを表示できます。私はまた、$httpだけでなく、他の種類のバックグラウンド処理にも同じソリューションを使いたいと思っています。

私が求めていた理由は、私はいつも私のprocessingIndicatortrueに設定してから全くエレガントではありません、私のsuccess機能に切り替える必要があるということです。

私が見る解決策の1つは、関数をパラメータとして使用する関数を使用することです。この関数はprocessingIndicatortrueに設定し、関数を呼び出してprocessingIndicatorを `falseに戻します。

function processAjaxRequestSuccessFn(fooFn){ 
    // display processing indicator 
    fooFn(); 
    // hide processing indicator 
} 

そして

$http.get(...).then(processAjaxRequestSuccessFn, processAjaxRequestErrorFn) 

私は何かが起こっていることをユーザに通知する必要があるたびに、私はこの機能を使用する必要があるため、このソリューションは非常に便利ではありません。

私はこのプロセスを自動化する方法を模索しています。

他のアイデアはありますか?

その後編集

私が持っているもう一つのアイデアは、私自身のgetpostなどで$httpを拡張または類似の挙動を持つカスタムサービスを作成することです。しかしそれほどエレガントではありません。

答えて

2

インターセプタを使用します。


app.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('HttpInterceptor'); 
    /*...*/ 
}]); 

app.factory('HttpInterceptor', ['$q', function ($q) { 
    return { 
     'request': function (config) { 
      /*...*/ 
      return config || $q.when(config); // -- start request/show gif 
     }, 
     'requestError': function (rejection) { 
      /*...*/ 
      return $q.reject(rejection); 
     }, 
     'response': function (response) {  // -- end request/hide gif 
      /*...*/ 
      return response || $q.when(response); 
     }, 
     'responseError': function (rejection) { 
      /*...*/ 
      return $q.reject(rejection); 
     } 
    }; 
}]); 

ここでは、APIによって提供される供給のコールバックをフック、httpリクエストのライフサイクル中の様々なポイントで集中管理ロジックを注入することができます...次の例を守ってください。再利用可能なリクエストロジックを作成する必要があります。詳細については、 AngularJS $http docsのインターセプタ部分を参照してください。

0

httpリクエストが保留されている間にローディングインジケータを表示するためにAngularOverlayを使用することに成功しました。ファイルをダウンロードし、指示に従うとうまくいくはずです。

関連する問題