如何解决仅针对某些请求显示全局微调器
我正在通过常规 HTTP 调用在 angular 上使用全局微调器。
加载拦截器
import { Injectable } from '@angular/core';
import {
HttpResponse,HttpRequest,HttpHandler,HttpEvent,HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoaderService } from '../services/loader.service';
@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
private requests: HttpRequest<any>[] = [];
constructor(private loaderService: LoaderService) { }
removeRequest(req: HttpRequest<any>) {
const i = this.requests.indexOf(req);
if (i >= 0) {
this.requests.splice(i,1);
}
this.loaderService.isLoading.next(this.requests.length > 0);
}
intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
this.requests.push(req);
console.log("No of requests--->" + this.requests.length);
this.loaderService.isLoading.next(true);
return Observable.create(observer => {
const subscription = next.handle(req)
.subscribe(
event => {
if (event instanceof HttpResponse) {
this.removeRequest(req);
observer.next(event);
}
},err => {
alert('error' + err);
this.removeRequest(req);
observer.error(err);
},() => {
this.removeRequest(req);
observer.complete();
});
// remove request from queue when cancelled
return () => {
this.removeRequest(req);
subscription.unsubscribe();
};
});
}
}
加载服务
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LoaderService {
public isLoading = new BehaviorSubject(false);
constructor() { }
}
加载器组件
import { Component,OnInit } from '@angular/core';
import { LoaderService } from '../../services/loader.service';
@Component({
selector: 'app-my-loader',templateUrl: './my-loader.component.html',styleUrls: ['./my-loader.component.css']
})
export class MyLoaderComponent implements OnInit {
loading: boolean;
constructor(private loaderService: LoaderService) {
this.loaderService.isLoading.subscribe((v) => {
console.log(v);
this.loading = v;
});
}
ngOnInit() {
}
}
我有一些 URL 会在新通知出现时动态加载 触发,我想要的是避免来自 加载程序以防止微调器显示在这些特定请求上。
解决方法
有几种方法可以避免拦截器,这取决于您选择的要求。
-
您可以使用
HttpBackend
代替HttpClient
进行 API 调用。这是通过跳过您的拦截器来实现的,因此它会跳过所有您的拦截器,这些拦截器对您来说可能有问题也可能没有问题。 -
您可以在请求中传递一个额外的参数,例如
skipLoadingInterceptor: boolean
,如果存在,您可以跳过负责设置加载动画的拦截器中的逻辑。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。