时间戳

首页 > 解决方案 > Angular 4 中是否有类似 ajaxStart 和 ajaxstop 的东西？

angular - Angular 4 中是否有类似 ajaxStart 和 ajaxstop 的东西？

问题描述

我需要您的帮助来解决我的疑问和疑问。

基本上我想在加载时在屏幕上显示“Loader”。所以我在 Angular 中寻找类似 ajaxStart 和 ajaxStop 的东西，我可以在其中开始显示我的加载器，一旦完成所有请求，我将隐藏我的加载器/进度条。

目前我必须在每种方法中显示加载器，并且需要在每种方法成功中隐藏。我正在寻找一个智能且通用的功能。

我希望我能让你理解我的担忧。

标签： angulartypescriptangular6

解决方案

示例代码：

看一下：

  1. pendingRequests-> 跟踪打开的请求
  2. loaderService-> 单独的服务来显示/隐藏加载器。

进口

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from 
"@angular/common/http";
import { Observable, throwError } from "rxjs";
import { catchError, finalize } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class ErrorInterceptor implements HttpInterceptor {

    private pendingRequests = 0;

    constructor(private loaderService: LoaderService) {}

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

      this.pendingRequests++;
      this.loaderService.show();

      return next.handle(request).pipe(

          catchError(err => {
            if (err instanceof HttpErrorResponse) {

              if (err.status === 401 || err.status === 403) {
                  // Invalidate user session and redirect to login/home
              }

              console.log('HTTP ERR: ', err);
              return throwError(err);
            }
          }),

          finalize(() => {
            this.pendingRequests--;
            if (!this.pendingRequests) {
              this.loaderService.hide();
            }
          })
        );
    }
}

推荐阅读