使用Angular9 Promise调用一个又一个方法时出现问题

Question

在我的Angular9项目中的一个组件中，我有一个从外部API获取数据的方法，还有一个通过向外部API发送详细信息来删除记录的方法(两个调用都使用服务类(。方法编码如下：-

getImageData(): void {
this.subscriptions.add(this.service.getImageData()
.subscribe((result: Response) => {
if(result.Found) {
this.imageData = result.Data;
}
});
}
deleteImage(): void {
this.subscriptions.add(this.service.deleteImage()
.subscribe((result: Response) => {
if(result.success) {
// Display Toastr Notification for successful deletion
this.imageDeleted = true;
}
})
}

如果用户决定删除图像，则应在deleteImage((函数完成操作后调用getImageData((函数(从后端数据库中删除图像，并向用户显示成功通知(。为了实现这一点，我尝试以以下方式使用promise：-

deletePromiseFunction() {
return new Promise<void>((resolve) => {
this.deleteImage();
resolve();
});
}
refreshGalleryDataPromise() {
return new Promise<void>((resolve) => {
this.getImageData();
resolve();
});
}

我使用then((来指定需要调用方法的顺序：-

deleteRefreshWorkflow() {
this.deletePromiseFunction().then(() => {
if(this.imageDeleted) {
this.refreshGalleryDataPromise();
}
});
}

调用上述函数的HTML代码是：-

<button class="btn btn-danger" (click)="deleteRefreshWorkflow()">Delete</button>

然而，我面临的问题是，即使指定了方法执行顺序，也会首先调用"getImageData(("函数，然后在单击"Delete"按钮时调用"deleteImage(("。这给出了错误的结果。在调用deleteImage((函数之后，应调用getImageData((函数。

我做错什么了吗？有人能帮我做这个吗。我是Angular9 的新手

Answer 1

您可以在不订阅单个可观察器的情况下实现相同的功能，而不是订阅单个可观测器。由于deleteImage()和getImageData()方法返回可观测值，因此可以使用tap运算符来侦听源可观测值的变化。然后使用像exhaustMap或switchMap这样的rxjs高阶映射算子来处理多个可观察性。

试试这个：

deleteRefreshWorkflow() {
this.service
.deleteImage()
.pipe(
tap((result: Response) => {
if (result.success) {
// Display Toastr Notification for successful deletion
this.imageDeleted = true;
}
}),
delay(200),
exhaustMap(() =>
this.service.getImageData().pipe(
tap((result: Response) => {
if (result.Found) {
this.imageData = result.Data;
}
})
)
)
)
.subscribe(() => {});
}