Angular2 http.get jQueryのAjaxで

Question

の開始と停止、私は（Angular2 http.getで

$(document).ajaxStart(function() { 
       $("body").addClass("loading");  
       }).ajaxStop(function() { 
        $("body").removeClass("loading"); 
       }); 

を行うことができます）、私はリクエストの開始と停止を検出することができます方法はありますか？

おかげ

Answer 1

AngularJSは非常に便利な機能があります：HTTPインターセプタを、これらのものは、それらが登録されると、自動的に（AJAX呼び出しの前に、AJAX呼び出しの後など）の各AJAX要求ステップで呼び出されるサービスです$ httpProviderを使用します。次のコードを使用することができますhttp.get方法で簡単に

：

$("body").addClass("loading"); 
$http.get(url).then(function(value) { 
     $scope.example1 = value.status; 
     $("body").removeClass("loading"); 
    }); 

をしかし、あなたはそれが世界的に動作するかどう私はすべてのHTTP（GET/POST）は、それがロードを示し、後になります呼び出す意味成功/エラーはロードを非表示にします。

あなたはこの記事を読むことができます：

http://www.daveoncode.com/2015/04/29/angularjs-centralized-application-loading-status-handling-using-http-interceptors/

http://codingsmackdown.tv/blog/2013/01/02/using-response-interceptors-to-show-and-hide-a-loading-widget/

私はそれはあなたの欲求に役立つと思います。

Answer 2

Angular2 httpはObservablesを返すので、すべてが非常に簡単になります。

観察可能でついに方法を持っている、あなたはその内削除コードを置くことができます。

以下のコードは簡単な実装です。

document.querySelector('body').classList.add('loading'); 
this._http.get(url) 
    .finally(() => { 
    document.querySelector('body').classList.remove('loading'); 
    }) 
    .subscribe(
    res => { console.log('success result --', res); }, 
    err => { console.log('error', err); }, 
    () => { console.log('completed'); } 
) 

すべてのhttp getコールで共通に実装したい場合は、

下記のようにCustomHttpを作成して、httpの代わりにCustomHttpを使用してください。

@Injectable() 
export class CustomHttp { 

    constructor(private _http: Http) { 
    } 

    get(url: string, options?) { 
    document.querySelector('body').classList.add('loading'); 
    return this._http.get(url, options).finally(() => { 
     document.querySelector('body').classList.remove('loading'); 
    }); 
    } 
}