Angular中for循环内的subscribe订阅如何等待完成后执行后续逻辑

问题核心原因：Observable的subscribe回调为异步非阻塞执行，forEach循环不会等待异步回调执行就会继续执行后续同步代码，因此会先打印B再打印A，此时updatedValue还未被赋值，读取自然返回undefined。你直接调用toPromise只拿到ZoneAwarePromise，是因为Promise本身是异步容器，必须通过await或者.then()才能拿到内部的返回结果，无法同步读取。

方案1：async/await + Promise.all （适合习惯异步语法的场景） #

// RxJS 7+ 需引入firstValueFrom，低版本直接使用toPromise即可
import { firstValueFrom } from 'rxjs';

async function abc() {
    this.array = someValueInitialized;
    // 收集所有请求的Promise实例
    const requestTasks = this.array.map(data => {
        // 注意这里要替换为实际的请求逻辑，确保每个data对应独立的Observable
        return firstValueFrom(this.apiCall(data)).then(resp => {
            console.log("A");
            data.updatedValue = resp.value;
        })
    });
    // 等待所有请求全部执行完成
    await Promise.all(requestTasks);
    console.log("B");
    // 此处可正常读取到updatedValue
    console.log(this.array);
    // 所有依赖更新后array的逻辑都可放在此处执行
}

方案2：纯RxJS forkJoin实现 （适合全链路使用RxJS的场景） #

import { forkJoin } from 'rxjs';

function abc() {
    this.array = someValueInitialized;
    // 收集所有请求的Observable实例
    const requestObservables = this.array.map(data => {
        // 注意这里要替换为实际的请求逻辑，确保每个data对应独立的Observable
        return this.apiCall(data);
    });
    // forkJoin会等待所有Observable全部完成后，统一返回结果数组
    forkJoin(requestObservables).subscribe(responses => {
        responses.forEach((resp, index) => {
            console.log("A");
            this.array[index].updatedValue = resp.value;
        });
        console.log("B");
        // 此处可正常读取到updatedValue
        console.log(this.array);
        // 所有依赖更新后array的逻辑都可放在此处执行
    })
}

注意事项 #

• 如果你的this.apiCall是全局单例的Observable，需要调整为每次请求生成独立实例，避免所有循环共用同一个流导致只有第一次请求生效
• RxJS 7及以上版本废弃了toPromise()，推荐用firstValueFrom/lastValueFrom替代，低版本可直接将firstValueFrom(apiCall)替换为apiCall.toPromise()使用
• 所有需要用到更新后this.array的逻辑，必须放在异步等待完成的回调内执行，不能写在外部的同步代码中

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