Vue.js中如何通过Promise遍历数组并填充successIds数组？

原代码核心问题 #

• newValues方法调用fakeApiRequest的语法完全错误：el.this.fakeApiRequest(id)不符合JS语法，应直接调用全局的fakeApiRequest并传入当前遍历的id。
• 未处理Promise异步逻辑：没有等待API请求完成，也没有收集成功的id。
• send方法赋值逻辑错误：newValues无返回值，直接赋值给successIds会导致结果为空。

修复后的完整代码 #

<template>
  <div class="hello">
    <h1>Example 2</h1>
    <input @click="send" type="button" value="Send" />
    <div class="out" v-if="successIds.length">{{ successIds }}</div>
  </div>
</template>

<script>
/*
@return
  resolve: { id: 1, success: true }
  or
  reject: { success: false }
*/

const fakeApiRequest = (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = id % 2;
      success ? resolve({ id, success }) : reject({ success });
    }, 2000);
  });
};

export default {
  data() {
    return {
      ids: [1, 2, 3, 4, 5, 6],
      successIds: [],
    };
  },
  methods: {
    async send() {
      // 清空历史成功id
      this.successIds = [];
      
      // 逐个发起请求并处理结果
      for (const id of this.ids) {
        try {
          const res = await fakeApiRequest(id);
          // 请求成功，将id加入数组（Vue数组push默认支持响应式）
          this.successIds.push(res.id);
          // 若需强制确保响应式（场景：直接修改数组索引时用），可替换为：
          // this.$set(this.successIds, this.successIds.length - 1, res.id);
        } catch {
          // 请求失败时可忽略或做日志记录
          console.log(`id ${id} 请求失败`);
        }
      }
    },
  },
};
</script>

关键实现说明 #

1. 异步逻辑处理：用async/await简化Promise异步流程，逐个处理每个id的API请求，避免回调嵌套。
2. 正确调用API：直接调用全局的fakeApiRequest并传入当前遍历的id，解决原语法错误问题。
3. 响应式数组更新：Vue对数组的push方法默认支持响应式，无需额外调用$set；如果是直接修改数组索引值（如this.successIds[0] = xxx），才需要用$set确保视图更新。
4. 失败容错：通过try/catch捕获单个请求的失败，避免某一个请求失败导致整个流程中断。

并行请求优化方案（可选） #

如果希望所有请求同时发起、提升效率，可使用Promise.allSettled并行处理：

async send() {
  this.successIds = [];
  
  // 生成所有请求的Promise数组
  const requestList = this.ids.map(id => fakeApiRequest(id));
  // 等待所有请求完成（无论成功失败）
  const results = await Promise.allSettled(requestList);
  
  // 遍历结果收集成功id
  results.forEach(item => {
    if (item.status === 'fulfilled') {
      this.successIds.push(item.value.id);
    }
  });
}

这种方式所有请求会同时启动，2秒后一次性返回所有结果，比逐个请求节省时间。

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