如何在JS/TS中将API响应存入对象映射的对应数组变量？

你的核心问题是当前代码直接用response.data覆盖了mapped[i]指向的原数组引用，导致原数组变量（比如fruits）不会同步更新。正确的做法是将响应数据追加到原数组中，而不是替换数组引用。

分场景处理： #

• 如果response.data是数组类型（比如返回一组同类型数据），批量追加元素到目标数组：

  this.apiService.fetchReferenceData(payload).then((response)=>{
    // 展开响应数组元素，追加到目标数组
    mapped[i].push(...response.data);
    // 兼容旧环境写法：Array.prototype.push.apply(mapped[i], response.data);
  })
  

• 如果response.data是单个数据项，直接追加单个元素：

  this.apiService.fetchReferenceData(payload).then((response)=>{
    mapped[i].push(response.data);
  })
  

完整修改代码示例： #

let fruits = [];
let vegetables = [];
let nuts = [];
// ...其他数组变量

let mapped = {1: fruits, 2: vegetables, 3: nuts /* ...其他映射项 */};

// 可选：用Promise.all统一管理所有异步请求，方便后续处理完成逻辑
const requestPromises = [];

for(let i = 1; i <= 15; i++){
    let payload = {id: i};
    const promise = this.apiService.fetchReferenceData(payload).then((response)=>{
        // 根据返回数据类型自动选择追加方式
        if(Array.isArray(response.data)){
            mapped[i].push(...response.data);
        } else {
            mapped[i].push(response.data);
        }
    });
    requestPromises.push(promise);
}

// 所有请求完成后可执行的逻辑（如状态更新、提示）
Promise.all(requestPromises).then(() => {
    console.log('所有数据加载完成');
    console.log('当前fruits数组:', fruits);
});

关键说明： #

• mapped对象中存储的是原数组的引用，对mapped[i]调用push方法会直接修改对应的原数组变量（比如fruits），无需额外同步操作。
• 禁止直接赋值mapped[i] = response.data，这会替换原数组的引用，导致原数组变量与mapped中的值彻底断开关联。

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