Angular2 http.get启动和停止

时间:2016-06-18 03:58:02

标签: jquery angular

使用Jquery ajax,我可以做到

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

使用Angular2 http.get(),有没有办法可以检测到请求的开始和停止?

感谢

2 个答案:

答案 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)调用它将显示加载,并在成功/错误后隐藏加载。

你可以阅读这篇文章:

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/

我认为它会满足您的需求。