如何将多次连续接口调用结果全部存入数组并在视图展示？

• 每次调用getCodicePanList时，函数内部都会新建空数组codicePanList，接口返回后将当前响应推入这个新数组，再赋值给this.dettaglioCodicePanData。这导致每次请求都会覆盖之前的数组，最终只剩最后一次的响应结果。
• this.listaCodiciPanFlottaStatus会被每个请求重复设置，逻辑上应该等所有请求完成后再标记状态。

方案1：复用同一个数组（修改现有逻辑） #

把codicePanList改为组件的成员变量，不在函数内部重复创建：

// 组件类中初始化数组
codicePanList: any[] = [];

// 遍历调用部分保持不变
dettaglioPan.forEach(x => {
    let codicePans = x.listaCodiciPanFlotta;
    if (codicePans.length > 0) {
        codicePans.forEach(value => {
            this.getCodicePanList(value);
        })
    }
})

getCodicePanList(value) {
    this.dettaglioPanService.findDettaglioCodicePanList('pan', 'dettaglioPan',
        [
            { name: 'codicePan', value: value },
        ])
        .subscribe(dettaglioCodicePan => {
            this.codicePanList.push(dettaglioCodicePan);
            this.dettaglioCodicePanData = this.codicePanList;
            // 可选：若需等所有请求完成再改状态，可添加计数逻辑
            // 比如先统计总请求数，每次push后计数+1，等于总数时设置status
        })
}

方案2：用forkJoin批量处理（更推荐） #

一次性发起所有请求，等全部完成后统一处理结果，逻辑更清晰，也能准确判断所有请求的完成时机：

import { forkJoin } from 'rxjs';

// 收集所有请求的Observable
const requestObservables: any[] = [];
dettaglioPan.forEach(x => {
    let codicePans = x.listaCodiciPanFlotta;
    if (codicePans.length > 0) {
        codicePans.forEach(value => {
            const obs = this.dettaglioPanService.findDettaglioCodicePanList('pan', 'dettaglioPan',
                [{ name: 'codicePan', value: value }]
            );
            requestObservables.push(obs);
        })
    }
})

// 批量执行所有请求
forkJoin(requestObservables).subscribe(allResponses => {
    this.dettaglioCodicePanData = allResponses;
    this.listaCodiciPanFlottaStatus = true;
})

方案2的优势 #

• 所有请求并行发起，比逐个订阅更高效。
• 能准确在所有请求完成后更新状态和赋值，避免重复修改状态的问题。
• 结果数组allResponses的顺序与收集请求的顺序一致，和原listaCodiciPanFlotta的编码顺序对应。

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