Angular 如何在请求期间显示微调器？

有一个应用程序发送http请求。特殊服务存储微调器的状态。为此，它使用BeahivoirSubject。侦听器在任何http请求之前将微调器状态设置为true。当http请求结束时，拦截器将微调器状态设置为false

但是，根本不显示微调器。这就是问题所在。请帮助在http请求期间显示微调器

我特意使用RXJS功能向每个http请求添加人工2000ms延迟

拦截器代码：

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  constructor(private globalService: GlobalService) {}

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    request = request.clone({
      setHeaders: { Authorization: `Bearer 123` }
    });

    this.globalService.setSpinnerState(true);

    return next
      .handle(request)
      .pipe(finalize(() => this.globalService.setSpinnerState(false)));
  }
}

微调器服务代码：

@Injectable({
  providedIn: "root"
})
export class ApiService {
  constructor(private http: HttpClient) {}

  getData() {
    console.log("start request");
    return this.http
      .get("https://jsonplaceholder.typicode.com/todos/1")
      .pipe(delay(2000))
      .subscribe((res: any) => {
        console.log(res);
        console.log("end request");
      });
  }
}

@Injectable({
  providedIn: "root"
})
export class GlobalService {
  private isShowSpinner = new BehaviorSubject(false);

  constructor() {}

  spinner() {
    return this.isShowSpinner.asObservable();
  }

  setSpinnerState(state: boolean) {
    return this.isShowSpinner.next(state);
  }
}

组件代码：

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  isShowSpinner: boolean;
  constructor(
    private apiService: ApiService,
    private globalService: GlobalService
  ) {
    this.apiService.getData();
    this.globalService.spinner().subscribe((state: boolean) => {
      this.isShowSpinner = state;
    });
  }
}

---

你的方法大体上是正确的。在您提供的示例中，我可以在短时间内看到微调器。然而，为api调用实现人工延迟的方式是错误的。handle只等待http调用完成，因此一旦调用完成，就会使用false作为参数调用setSpinnerState函数。如果您希望看到用于测试目的的延迟，您应该像这样将延迟放入拦截器中

 return next.handle(request).pipe(
      delay(2000),
      finalize(() => this.globalService.setSpinnerState(false))
    );

当然，从api.service中删除它