提问人：saurav sam 提问时间：10/21/2023 最后编辑：Heretic Monkeysaurav sam 更新时间：10/21/2023 访问量：36
函数应等待上一个函数完成处理，然后再执行下一行代码 [duplicate]
Function should wait for previous function to finish processing before executing next line of code [duplicate]
问：
我正在研究 TypeScript，我正在尝试在函数中调用模态。但是调用了一个服务，它验证了来自服务器的一些东西，并且根据返回的内容，我想调用该模式或完全跳过它。在我的例子中，服务器调用是异步的，这甚至在我们收到来自服务器的响应之前就会导致模式打开。有没有办法等待服务器响应，然后检查返回码并相应地打开模式？
如下图所示： 该函数应等待完成，并根据设置的输出值打开模态。但是，由于调用在服务器响应之前返回给调用函数，因此输出仍设置为 0 并调用模式。CheckandOpenModalsaveRecord
如何解决这个问题？
这是主要功能：
public output:number = 0;
CheckandOpenModal() {
/* do something */
this.saveRecord(); //Should wait for this to finish and return output
if (this.output == 0) {
//Call the modal window
const modalRef = this.modalService.open(editTableColComponent, {
centered: true,
scrollable: true
});
} else {
//Do something
}
}
saveRecord() {
this.serv.checkTableRecord(this.objTableFields.tableNm, this.objTableFields.tableID).subscribe(data => {
if (data.check.result == 1) {
this.output = 1;
}
});
答：
0赞
Grogu
10/21/2023
#1
你已经用 angular 标记了这个问题，那么我猜你正在使用可观察的异步代码。 好消息是，使用可观察对象，链接异步操作非常容易！
import { map, Observable, tap } from "rxjs";
checkAndOpenModal(): void {
this.saveRecord()
.pipe(
tap((output) => {
if (output == 0) {
const modalRef = this.modalService.open(editTableColComponent, {
centered: true,
scrollable: true,
});
} else {
//Do something
}
})
)
.subscribe();
}
saveRecord(): Observable<0 | 1> {
return this.serv
.checkTableRecord(this.objTableFields.tableNm, this.objTableFields.tableID)
.pipe(map((data) => (data.check.result == 1 ? 1 : 0)));
}
您还可以返回一个可观察对象以继续将其链接到其他地方。但请记住在链的末尾订阅，否则不会执行任何操作。
checkAndOpenModal(): Observable<1|0> {
return this.saveRecord()
.pipe(
tap((output) => {
if (output == 0) {
const modalRef = this.modalService.open(editTableColComponent, {
centered: true,
scrollable: true,
});
} else {
//Do something
}
})
);
}
使用过的运算符词汇表：
- pipe：能够在可观察对象上链接运算符
- map：转换 Observable 发出的数据
- TAP：当在 Observable 中发出某些内容时并行执行某些内容
一些文档：
- 关于 rxjs、observables 和运算符的良好文档：https://rxjs.dev/guide/overview
- 帮助您找到所需运算符的工具：https://rxjs.dev/operator-decision-tree
评论