Angular表单提交需两个函数均成功才显示成功校验消息

当前实现的核心问题是registerUser、registerInfo内部的HTTP请求都是异步Observable，调用这两个方法时不会等待接口返回结果，会直接执行后续的成功提示逻辑，完全没有校验两个注册接口的实际执行状态，自然会出现接口失败仍错误弹出成功提示的问题。

核心思路是把两个注册方法的请求流返回，通过RxJS的组合操作符等待两个请求全部执行成功后，再触发成功提示，任意请求失败则进入错误分支。

1. 改造两个注册方法，返回请求Observable #

去掉方法内部的subscribe逻辑，直接返回HTTP请求实例，方便外层统一控制执行状态：

registerUser(user: cusInfo) {
    const userinfo = { cusInfo: { ...user } }
    return this.registrationService.saveUserInfo(userinfo);
}

registerInfo({ code,name }) {
    const item = { "reserve": { code,name} };
    console.log(item);
    return this.registrationService.infoRequest(item);
}

2. 引入RxJS操作符，修改提交逻辑 #

先在文件顶部引入需要的RxJS方法：

import { forkJoin } from 'rxjs';

再修改表单提交方法，等待两个注册接口全部返回成功后再弹出提示：

registerCustomer(item, info, reservelockerform: NgForm) {
    this.alertService.clear();
    this.registrationService.checkDuplicateUser(info.userName).subscribe({
        next: (data) => {
            if (data.executionDescription !== 'Success') {
                this.alertService.error(data.executionDescription);
                return;
            }
            // 并行发起两个注册请求，等待所有请求完成
            forkJoin([
                this.registerUser(info),
                this.registerInfo(item)
            ]).subscribe({
                next: () => {
                    // 仅当两个接口全部成功时，弹出成功提示
                    this.alertService.success('Registration has been made successfully');
                    // 这里可以加表单重置、跳转等其他成功后的逻辑
                },
                error: (err) => {
                    // 任意一个接口失败，弹出错误提示
                    this.alertService.error('注册失败，请检查信息后重试');
                    console.error('注册请求异常：', err);
                }
            })
        },
        error: () => {
            this.alertService.error('用户名校验失败，请稍后重试');
        }
    });
}

• forkJoin会并行发起传入的所有请求，只有所有请求都成功返回才会进入next回调，只要任意一个请求报错就会直接进入error回调，完全匹配你的需求
• 如果两个注册接口有先后依赖顺序（比如必须先调用registerUser拿到返回的用户ID，再调用registerInfo提交信息），可以把forkJoin换成concatMap操作符实现串行调用，逻辑判断规则不变。

内容的提问来源于stack exchange，提问作者Kumara