Question

我有以下代码。它调用了Angular服务，后者又调用了REST服务以从数据库中获取数据。

this.carService.getCarsById(id, searchType)
.subscribe(c => {
  this.cars = c;
});

tmpCars = this.cars.map(x => x.color);

console.log("cars: " + tmpCars);

问题在于，从数据库返回数据之前，执行tmpCars =和console.log()开头的行。在可观察到的getCarsById()和Observable<Car[]>返回所有数据之前，如何停止执行代码？

Answer 1

JS中的异步操作仅通过回调进行交互。如果您想要在订阅完成后执行任何操作，则需要将其添加为subscribe调用中的操作：

this.carService.getCarsById(id, searchType)
        .subscribe(c => {
            this.cars = c;
            const tmpCars = this.cars.map(x => x.color);
            console.log("cars: " + tmpCars);
        })

如果您希望整个页面在请求完成之前停止，那么您需要使您的请求成为同步（阻塞）请求。通常建议不要这样做，因为它会对页面性能产生负面影响。该页面可能正在工作，但是它只是坐在那里旋转直到请求完成。

默认情况下，Angular（source）中似乎不支持同步请求。

或者，如果您要在更新汽车时执行其他操作，则可以将“汽车”持有人作为Subject的可观察对象：

car.component.html：

<div *ngFor="let car of cars$ | async">
    <div>Car</div>
    <div>Make: {{car.make}}</div>
    <div>Model: {{car.model}}</div>
    <div>Year: {{car.year}}</div>
</div>

car.component.ts：

...
private carsSubject: Subject<Car[]> = new BehaviorSubject([]);
private cars$: Observable<Car[]> = this.carsSubject.asObservable();
private carsSubscription: Subscription;

constructor(private carService: CarService) {
    this.carsSubscription = this.cars$.subscribe(cars => {
        const tmpCars = cars.map(x => x.color);
        console.log("cars: "+ tmpCars);
    });
}

ngOnDestroy() {
    this.carsSubscription.unsubscribe();
}

getCars(id, searchType) {
    this.carService.getCarsById(id, searchType)
            .subscribe(cars => this.carsSubject.next(cars));
}
...

可以对某些代码进行精简以适应您的需求。

Answer 2

我不使用Angular，但看起来像是正常的发布/订阅机制。

如果此异步，并且应该使用数据库中的数据更新tmpCars，则应在订阅回调上执行该逻辑。

this.carService.getCarsById(id, searchType).subscribe(c => { //MY LOGIC FROM DB});

希望有帮助。

我如何等待直到通过服务呼叫完成可观察到的工作？

2 个答案: