使用Jquery ajax,我可以做到
$(document).ajaxStart(function() {
$("body").addClass("loading");
}).ajaxStop(function() {
$("body").removeClass("loading");
});
使用Angular2 http.get(),有没有办法可以检测到请求的开始和停止?
感谢
答案 0 :(得分:2)
Angular2 http返回Observables ,这使得一切都变得非常简单。
Observable有最终方法,您可以将删除代码放在其中。
下面的代码是一个简单的实现。
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
,然后在您的应用中的任何位置使用CustomHttp
代替http
。
@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');
});
}
}
答案 1 :(得分:1)
AngularJS有一个非常有用的功能:HTTP拦截器,这些是在使用$ httpProvider注册后,在每个ajax请求步骤(ajax调用之前,ajax调用之后等)自动调用的服务。 / p>
只需在http.get方法中,您就可以使用以下代码:
$("body").addClass("loading");
$http.get(url).then(function(value) {
$scope.example1 = value.status;
$("body").removeClass("loading");
});
但是如果你想要它将全局工作我的意思是每个http(GET / POST)调用它将显示加载,并在成功/错误后隐藏加载。
你可以阅读这篇文章:
我认为它会满足您的需求。