Vue.js中Promise处理结果过滤后新数组为空的问题求助

你代码里的核心错误是在Promise还未执行完成时就提前过滤了Promise数组：
this.ids.map(fakeApiRequest)得到的是一组处于pending状态的Promise，这时候它们根本没有status属性，filter((promise) => promise.status === "fulfilled")直接把所有元素都过滤掉了，传给Promise.allSettled的是空数组，最终newArr自然为空。

正确的做法是先让所有Promise执行完成，拿到结果后再过滤处理：

<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 {
      // Fetch ids
      ids: [1, 2, 3, 4, 5, 6],
      // Complete ids
      successIds: [],
    };
  },

  methods: {
    async send() {
      // 先执行所有Promise，拿到全部结果
      const results = await Promise.allSettled(
        this.ids.map(fakeApiRequest)
      );
      // 过滤出成功的请求，提取对应的值
      const newArr = results
        .filter(item => item.status === "fulfilled")
        .map(item => item.value);
      // 用splice把新数组的元素插入到successIds开头
      this.successIds.splice(0, 0, ...newArr);
      // 如果要追加到末尾可以用：this.successIds.splice(this.successIds.length, 0, ...newArr)
    },
  },
};
</script>

<style scoped>
.out {
  margin: 20px 0;
  color: #41b883;
}
</style>

修改要点说明：

• 先调用Promise.allSettled获取所有请求的结果，此时每个结果对象才有status属性
• 再对结果数组做过滤和映射，得到成功请求的数据集
• 使用splice时，用扩展运算符...newArr把数组元素逐个插入，避免把整个数组作为单个元素嵌套进successIds

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