Vue.js如何合并多个API请求数据至同一对象？

我看了你的代码，问题主要出在异步请求的处理逻辑和this指向错误上，导致数据无法正确合并到this.lista里。下面我来一步步拆解问题并给出修复方案：

问题分析 #

1. this指向丢失：你在.then()里用了普通的function回调，这里的this已经不是Vue组件实例了，所以你修改的this.lista根本不是组件里的那个变量。
2. 异步请求的并发冲突：循环里的API请求都是异步的，多个回调会同时修改this.lista，很容易出现数据覆盖的情况；而且你没有等待所有请求完成，可能最后只保留了最后一次请求的数据。
3. 闭包导致的offset错误：用var声明循环变量i，会导致所有异步回调共享同一个i值，最终所有请求的offset都是最后一次计算的结果。
4. lista初始化问题：如果this.lista一开始没有初始化（比如是undefined），用对象展开运算符...this.lista会报错，而且transactions是数组，用对象展开的方式合并是错误的，应该用数组拼接。

修复后的代码 #

created() {
  // 先把Vue实例的this存起来，避免回调中指向混乱
  const vm = this;
  // 初始化lista为数组，确保后续合并不会出错
  vm.lista = [];

  this.$http.get('/api/transactions?senderId=8642612272713533685S&limit=1&offset=0')
    .then(res => {
      const totalCount = res.body.count;
      // 计算需要请求的次数（注意这里是i < limit，因为offset从0开始）
      const requestTimes = Math.ceil(totalCount / 1000);
      console.log(`总共需要发起 ${requestTimes} 次请求`);

      // 生成所有请求的Promise数组
      const requestPromises = [];
      for (let i = 0; i < requestTimes; i++) {
        const currentOffset = i * 1000;
        requestPromises.push(
          this.$http.get('/api/transactions?senderId=8642612272713533685S&limit=1000', {
            params: { offset: currentOffset }
          })
        );
      }

      // 等待所有请求都完成后再处理数据
      return Promise.all(requestPromises);
    })
    .then(allResponses => {
      // 遍历所有响应，把transactions合并到lista里
      allResponses.forEach(response => {
        // 用数组展开或者concat都可以，效果一样
        vm.lista = [...vm.lista, ...response.body.transactions];
        // vm.lista = vm.lista.concat(response.body.transactions); // 另一种写法
      });
      console.log('所有数据合并完成，总条数：', vm.lista.length);
    })
    .catch(error => {
      console.error('请求过程中出错：', error);
    });
}

关键修改点说明 #

• 用箭头函数/保存vm=this：确保回调里能正确访问到Vue组件的this，避免指向错误。
• Promise.all处理并发请求：一次性发起所有请求，等全部请求完成后再统一合并数据，既保证数据不丢失，也能提高请求效率。
• let声明循环变量：避免闭包问题，确保每个请求的offset都是正确的计算值。
• 数组方式合并数据：因为transactions是数组类型，用数组展开或concat来合并才是正确的，之前的对象展开会把数组转成以索引为键的对象，完全不符合需求。

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