Angular中如何使用RxJS等待异步返回值 非空校验后弹出确认对话框

• 原函数是同步返回boolean类型，但alertService.confirm弹出对话框是异步操作，subscribe内的赋值逻辑执行时机晚于函数return的时机，永远拿不到正确的用户选择结果
• 原代码中使用了filter( confirm => !!confirm)，只有用户点击确认时才会触发后续赋值逻辑，如果用户点击取消，流不会发射值，就算忽略同步返回的问题，也拿不到用户取消的结果

RxJS场景下推荐将函数返回值改为Observable<boolean>，符合响应式编程习惯，修改后代码如下：

import { of } from 'rxjs';
import { take, map } from 'rxjs/operators';

private showConfirmation(): Observable<boolean> {
    // MyString为空直接返回false，无需弹框
    if (!this.MyString || this.MyString === '') {
        return of(false);
    }
    // 弹出确认框，返回用户的选择结果
    return this.alertService.confirm('Confirm', `${this.MyString} Are you sure you want to proceed?`).pipe(
        take(1), // 仅取第一次返回结果就终止流
        map(confirm => !!confirm) // 统一转成boolean类型，确认返回true，取消返回false
    );
}

调用时通过订阅获取最终结果：

this.showConfirmation().subscribe(isConfirmed => {
    if (isConfirmed) {
        // 用户确认后执行的后续逻辑
        this.handleProceed();
    }
});

如果你偏好async/await的写法，也可以转成Promise实现：

import { firstValueFrom, of } from 'rxjs';
import { map } from 'rxjs/operators';

private async showConfirmation(): Promise<boolean> {
    if (!this.MyString || this.MyString === '') {
        return false;
    }
    return firstValueFrom(
        this.alertService.confirm('Confirm', `${this.MyString} Are you sure you want to proceed?`).pipe(
            map(confirm => !!confirm)
        )
    );
}

// 调用示例
const isConfirmed = await this.showConfirmation();
if (isConfirmed) {
    // 后续逻辑
}

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