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

Question

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

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

我故意使用 RXJS 功能为每个 http 请求添加人为的 2000 毫秒延迟。

LIVE DEMO

拦截器代码:

@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;
    });
  }
}

Answer 1

您的方法总体上是正确的。在您提供的示例中，我可以在短时间内看到旋转器。但是，您实现 api 调用的人为延迟的方式是错误的。 next.handle 仅等待 http 调用完成，因此一旦发生，就会使用 false 作为参数调用 setSpinnerState 函数。如果您想查看延迟以进行测试，您应该将延迟放入拦截器中，如下所示

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

当然，还要从 api.service 中删除它。