ng-http-loader 不适用于通过 httpbackend 处理的 API 调用

Question

我试图创建一个服务，以便该服务中的所有 API 调用都不会附加令牌。我使用 HttpBackend 实现了这一点。但是现在 ng-http-loader 不适用于这些 API。

我需要什么

ng-http-loader 在 API 通过 HttpBackend 处理的调用中工作。

首页-http.service.ts

@Injectable()
export class HomeHttpService {
  private http: HttpClient;
  constructor(handler: HttpBackend) {
    this.http = new HttpClient(handler);
  }

app.module.ts

    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        TooltipModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        NgbModule,
        AuthModule,
        AppRoutingModule,
        ToastrModule.forRoot(),
        NgHttpLoaderModule.forRoot()
      ],
      providers: [
        { provide: ErrorHandler, useClass: ErrorsHandler },
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
      ],
      bootstrap: [AppComponent]
    })

app.component.html

 <router-outlet></router-outlet>
 <ng-http-loader [backdrop]="true" [debounceDelay]="100" [extraDuration]="300" [minDuration]="300" [opacity]="0.6" [backgroundColor]="'#767676'" [spinner]="spinkit"></ng-http-loader>

api.service.ts

import { HomeHttpService } from '../home-http.service';
import { Observable } from 'rxjs';
import { environment } from 'environments/environment';

@Injectable()
export class APIService {
  constructor(private apiservice: HomeHttpService) {}

ng-http-loader 正在 api 来自除 api.service.ts

之外的所有其他服务的调用

Answer 1

讨论到这里，重点来了。

当您在 HttpClient 中提供 HttpBackend 时，它将忽略所有拦截器，因此 ng-http-loader 将无法工作，因为它不知道该请求。

现在可以通过将 header 与 here 中提到的请求一起使用来解决这个问题。

拦截器

export const InterceptorSkipHeader = 'X-Skip-Interceptor';

@Injectable()
export class SkippableInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.headers.has(InterceptorSkipHeader)) {
      const headers = req.headers.delete(InterceptorSkipHeader);
      return next.handle(req.clone({ headers }));
    }
    ...  // intercept
  }
}

现在，从服务中，对于API你不想有拦截器，你可以设置这个header。

const headers = new HttpHeaders().set(InterceptorSkipHeader, '');
this.httpClient.get(someUrl, { headers })
    ...

ng-http-loader 不适用于通过 httpbackend 处理的 API 调用

ng-http-loader not working for API calls handled via httpbackend

loader

httpbackend

angular

我需要什么

首页-http.service.ts

app.module.ts

app.component.html

api.service.ts