javascript - 如何设置与服务调用绑定的表单提交按钮，该按钮必须在 Angular/TypeScript 中提交之前完成？

Question

我正在尝试设置表单提交，其中表单本身包含一个在应用程序其他地方使用的字段，因此有自己的服务与之相关联。我的目标是为表单设置提交按钮以执行该特定字段的服务调用，等到它完成并成功响应，然后继续执行常规表单提交逻辑。

这是我迄今为止尝试过的简化版本：

async onSubmit(form) {
    if(specialField) {
        const response = await this.updateSpecialField();
    }
    // I will leave the rest of the form submission abstracted away
}

async updateSpecialField() {
    this.specialService.updateField().subscribe(then => {
        this.specialService.loadingFields$.subscribe(data => {
            this.loading = data;
        });
    });
}

在这种情况下，会进行服务调用，但它发生在后台，并且总是在表单提交完成后完成。由于我没有走这条路，我尝试使用 await 并承诺在继续之前完成服务调用。

这是相同 updateSpecialField 函数的不同方法：

async updateSpecialField() {
    let updatedFieldResponse = await this.specialService.updateField().toPromise();
    return Promise.resolve(updatedFieldResponse);
}

在这种情况下，返回行似乎永远不会执行，并且表单提交也不会发生。我从服务获得了成功的响应，但它没有从我期望的位置恢复执行代码行。

标签： javascriptangulartypescriptasync-await

Answer 1

尝试这个

async onSubmit(form) {
    if(specialField) {
        const response = await this.updateSpecialField();
    }
    // I will leave the rest of the form submission abstracted away
  }
  
  async updateSpecialField() {
    return this.specialService.updateField().pipe(
              switchMap((_: any) =>
                this.specialService.loadingFields$.toPromise().then(data => {
                    this.loading = data;
                })
              )
            ).toPromise();
  }