Question

使用Jquery ajax，我可以做到

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

使用Angular2 http.get（），有没有办法可以检测到请求的开始和停止？

感谢

Answer 1

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');
    });
  }
}

Answer 2

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/

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

Angular2 http.get启动和停止

2 个答案: