Question

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

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

countb

Answer 1

据我所知，HttpInterceptor不能真正分辨出请求的来源。

考虑到这一点，如果您的NgxSpinnerService是单身人士，那么您可以使其成为有状态的，并在input发出HTTP请求之前设置一个标志。此标志将告诉NgxSpinnerService不同地显示微调器。您还希望在输入的HTTP请求完成后取消设置该标志。您可以将该逻辑包装在自己的定制HttpClient类似服务中。

您还可以在请求中设置一些特殊的内容（即：在标题中，在查询字符串上），然后进行检测。请注意，除非您修改请求，否则该标志将无故发送到服务器。

请注意，这种方法和您当前使用的拦截器需要牢记：

如果您发送两个HTTP请求，它们将同时设置标志并调用您的spinner.show。然后，当第一个请求完成时，它将取消设置标志并调用spinner.hide。这意味着即使第二个请求仍在进行中，您的微调器也将消失。

可以通过拥有一个计数器show()被调用的次数来解决此问题。您可以在调用hide()时将其减小，如果该计数器现在为0，则只有您实际上隐藏了微调器。如果其不为0，则说明正在处理另一个请求，因此请不要隐藏微调框。

您可以在此处查看示例：https://stackoverflow.com/a/51813213/78804

Answer 2

这是我处理相同问题的方式：

a）在此特定请求的请求标头中添加“ hideSpinnerIcon”属性

@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）您可以将微调器的开始/停止与相应的请求对齐。

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

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

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

如何告诉拦截器不显示微调框

2 个答案: