Question

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

然而， Spinner 根本不显示。这就是问题。请帮助在 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");
      });
  }
}

Spinner 服务代码：

@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 调用完成，所以一旦它发生，setSpinnerState 函数就会以 false 作为参数被调用。如果您想查看延迟以进行测试，您应该像这样将延迟放入拦截器中

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

当然也要把它从 api.service 中删除。

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

1 个答案: