Node/Angular项目Observable/Subscription订阅重复触发多弹Toast问题

• 第一种写法的核心问题是：每次调用deleteRecord方法都会给responseMessage$新增一个订阅，这些订阅不会自动销毁，后续responseMessageListener调用next发值时，所有历史订阅都会触发回调，所以删除次数越多弹出的toast越多。
• 额外存在语法bug：判断条件用了赋值运算符=而非比较运算符===，会导致逻辑判断永远走第一个匹配的分支，需要修正。
• 第二种写法的问题是：Observable是异步执行的，你在订阅后同步判断this.response的值时，HTTP请求还没返回，回调还没执行，this.response还没有最新值，所以第一次删除不会触发提示，后续触发的也是上一次删除的结果，逻辑完全错位。

方案1：单次订阅自动销毁（改动最小） #

在订阅前加RxJS的take(1)操作符，让订阅收到一次响应后自动销毁，不会残留订阅：

// 先导入take操作符：import { take } from 'rxjs';
deleteRecord(id) {
    this.recordService.delete(id);
    this.recordService.responseMessage$.pipe(take(1)).subscribe(response => {
        // 注意这里把=改成===
        if (response.message === 'record deleted') {
            this.messageService.add({severity:'success', summary:'Success', detail:`Record ${id} deleted`});
        } else if (response.message === 'could not delete record') {
            this.messageService.add({severity:'error', summary:'Oops!', detail:`Not able to delete record.`});
        }
    });
}

这个方案改动最小，完全贴合原来的写法习惯。

方案2：全局单次订阅（性能更优） #

只在组件初始化时订阅一次responseMessage$，组件销毁时统一取消订阅，全程只有一个订阅实例：

import { Subscription } from 'rxjs';

private responseSub: Subscription;

ngOnInit(): void {
    // 初始化时订阅一次
    this.responseSub = this.recordService.responseMessage$.subscribe(response => {
        if (response.message === 'record deleted') {
            this.messageService.add({severity:'success', summary:'Success', detail:'Record deleted'});
        } else if (response.message === 'could not delete record') {
            this.messageService.add({severity:'error', summary:'Oops!', detail:`Not able to delete record.`});
        }
    })
}

deleteRecord(id) {
    this.recordService.delete(id);
}

ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.responseSub?.unsubscribe();
}

这个方案避免了每次点击都新建订阅的开销，适合删除操作频率较高的场景。

当前用全局Subject中转删除响应的设计容易出现多组件订阅互相干扰的问题，更推荐直接让Service的delete方法返回HTTP请求的Observable，组件直接订阅单次请求的结果，完全不需要全局Subject：

调整RecordService代码： #

import { tap } from 'rxjs';

export class RecordService {
    // 删掉原来的responseMessageListener相关代码
    delete(id: number) {
        return this.http.delete<{message:string}>(this.authService.getApiUrl(`/record/${id}`)).pipe(
            // 列表更新逻辑还是放在Service里处理
            tap(() => this.getRecords())
        )
    }
}

组件调用代码： #

deleteRecord(id) {
    this.recordService.delete(id).subscribe({
        next: (response) => {
            if (response.message === 'record deleted') {
                this.messageService.add({severity:'success', summary:'Success', detail:`Record ${id} deleted`});
            } else if (response.message === 'could not delete record') {
                this.messageService.add({severity:'error', summary:'Oops!', detail:`Not able to delete record.`});
            }
        },
        error: (err) => {
            // 可加HTTP请求失败的兜底提示
            this.messageService.add({severity:'error', summary:'Oops!', detail:'Network error, please try again later.'});
        }
    })
}

这个方案从根源上避免了共享Subject带来的订阅累积问题，逻辑更内聚，也不会出现多实例冲突。

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