Question

我使用HTTP库来执行对SPA中服务器的请求，如下所示：

public get(cls: number): Observable<any[]> {

    const data = {

    };

    return this.http.post(null, data)
      .map(result => {
        return result.json().result;
      })
      .catch(this.handleErrorObservable);
  }

假设我们有一个预加载器服务，该服务在请求离开时启动，在响应到来时停止。

如何将此服务绑定到HTTP？确实，我可以订阅Observer的响应，例如：

preloader.start();
get(1).subscribe(data => {}, error => {
   preloader.stop();
});

但这不适合我，我想使它更通用，更抽象

Answer 1

您可能想使用 ng-http-loader 库进行安装：

$ npm install ng-http-loader --save / yarn add ng-http-loader

此软件包提供了HTTP拦截器和一些微调器组件。 HTTP拦截器侦听所有HTTP请求，并在未决的HTTP请求期间显示微调器/加载器指示符。

用法：

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
[...]
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; <============
import { NgHttpLoaderModule } from 'ng-http-loader'; <============

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, <============ (Perform http requests with this module)
    NgHttpLoaderModule, <============
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在您的app.component.html中，只需添加：

<ng-http-loader></ng-http-loader>

这是完整的文档：https://github.com/mpalourdio/ng-http-loader

如何监听HTTP响应并应用预加载器？

1 个答案: