HttpClient请求拦截器之类的，在从服务器获取响应时 [英] HttpClient Request intercepter like, at time of getting response from server

问题描述

我想在请求试图命中时打开一个加载器弹出窗口，获得响应后，我想将其关闭. 使用httpclient可以从一个地方执行它.

I want to open a loader popup when request is trying to hit and after getting response,I want to close it. Is any way with using httpclient to perform it from a single place.

推荐答案

类似以下内容:

@Injectable()
export class I1 implements HttpInterceptor {

  constructor(public service: SomeService) {
    console.log(service);
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    setTimeout(() => {
      this.service.loading = true;
    });

    return next.handle(req).do(
      (event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          setTimeout(() => {
            this.service.loading = false;
          });

        }
      },
      (err: any) => {

      }
    );
  }
}

SomeService.ts :

@Injectable()
export class SomeService {
  _loading = false;
  constructor() {

  }

  set loading(isLoad: boolean) {
    this._loading = isLoad;
  }

  get loading() {
    return this._loading;
  }

}

然后在您的Root组件中注入此服务:

And in your Root component inject this service:

@Component({
    selector: 'my-app',
    template: `
        IsLoading: {{service.loading}}
        <div><h3>Response</h3>{{response|async|json}}</div>
        <button (click)="request()">Make request</button>`
    ,
})
export class AppComponent {
    response: Observable<any>;
    constructor(private http: HttpClient, public service: SomeService) {}

    request() {
        const url = 'https://jsonplaceholder.typicode.com/posts/1';
        this.response = this.http.get(url, {observe: 'body'});
    }
}

代码示例

1. 使用 BehaviorSubject

SpinnerService:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { share } from 'rxjs/operators';

@Injectable()
export class SpinnerService {
  private visible$ = new BehaviorSubject<boolean>(false);

  show() {
    this.visible$.next(true);
  }

  hide() {
    this.visible$.next(false);
  }

  isVisible(): Observable<boolean> {
    return this.visible$.asObservable().pipe(share());
  }
}

StackBlitz示例

这篇关于HttpClient请求拦截器之类的，在从服务器获取响应时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！