如何告诉拦截器不显示微调框 [英] how tell interceptor don't show up the spinner

问题描述

我有一个加载拦截器，每次我发出一个http请求时，它都会显示一个加载，并且运行良好，加载微调器全屏显示，但是我创建了一个searchcomponent，它是输入，每次编写时在输入中，它发出一个http请求并获取所有数据，但是问题是加载以全屏显示，并且我希望加载在这种请求中具有另一个行为，我该如何对我的拦截器说:呼叫是由输入发起的，不会显示负载吗?

I have a loading-interceptor who shows up a loading every time I make a http request and it works very well,the loading spinner its full screen, but I made a searchcomponent, that it is an input and every time I write inside the input, it make a http request and get all the data, but the problem is that the loading shows up in full screen and I want that loading have another behaivor in this kind of request, how can I say to my interceptor that when the call is made by the input dont shows up the loading?

//这是我的拦截器的代码

//this is the code of my interceptor

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

  constructor(private spinner:NgxSpinnerService, private router: Router) { }

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

    this.router;

    this.spinner.show();
    return next.handle(req).pipe(
      finalize(() => this.spinner.hide())
    );
  }

}

推荐答案

以下是我处理相同问题的方法:

Here is how i handled the same :

a)在此请求的请求标头中添加"hideSpinnerIcon"属性

a) Add 'hideSpinnerIcon' property in request header for this particular request

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
    constructor(
        private activateRoute: ActivatedRoute,
        private loaderSvc: LoaderService
    ) {}

    // "Counter" keeps track to stop spinner for corresponding request only
    counter = 0;
    intercept(req: HttpRequest<any>, next: HttpHandler) {
       // Start Spinner only if it does not have 'hideSpinnerIcon' header
        if (!_.get(req.headers, 'hideSpinnerIcon')) {
            this.counter++;
            if (this.counter === 1) {
                this._loaderSvc.start();
            }
        }

        next.handle(req).pipe(
             tap((event: HttpEvent<any>) => updateSpinner(req); ),
             catchError((error: HttpErrorResponse) => {
                  updateSpinner(req,true);
                  return throwError(error);
             });
        );
    }

   // Reduce Counter here if got success response from api or Errored Out
   // don't alter when hideSpinnerIcon is set
    private updateSpinner(req,isErroredOut?) {       
        if (!_.get(req.headers, 'hideSpinnerIcon')) {
            this.counter--;
        }     
        if (isErroredOut || this.counter === 0) {
            this._loaderSvc.stop();
        }
    }
}

使用上面的代码:

a)您可以将微调器的开始/停止与相应的请求对齐.

a) You can align spinner's start/stop to the corresponding request.

b)如果有任何api错误，我们可以停止微调器并显示适当的错误消息，而不是无限旋转.

b) If any api is errored out, we can stop the spinner and show appropriate error message, instead of the infinite spins.

c)对于任何在标头中具有元数据为"hideSpinnerIcon"的api，它将不会显示spinner

c) For any api having metadata as 'hideSpinnerIcon' in headers, it will not show spinner

注意编写一个http-wrapper-service来包含这些活动，以提高可维护性和隔离性

NOTE Write a http-wrapper-service to include these activities for better maintainability and seggregation

这篇关于如何告诉拦截器不显示微调框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！