Vue中Axios子请求后结果顺序错乱问题求助

使用WordPress API实现搜索功能时，首次Axios请求能正常返回带标题和ID的文章列表，但在forEach循环中调用getPost接口获取单篇文章时，返回结果的顺序与原请求不一致，且最后一个console.log(this.tutos_search)提前输出空数组。确认是async/await的使用问题，但无法定位解决。技术栈为VueJS。

methods: {
    getSearch: async function () {
      const query = "/search?subtype=post&search=" + this.$route.query.q;
      const response = await this.axios.get(query);
      return response.data;
    },
    getPost: async function (id) {
      const query = "/posts/" + id;
      const response = await this.axios.get(query);
      return response.data;
    },
    getCategorie: async function (id) {
      const query = "/categories?post=" + id;
      const response = await this.axios.get(query);
      return response.data;
    },
    search: async function () {
      await this.getSearch().then((search) =>
        Promise.all(search).then(
          search.forEach(async (tuto) => {
            console.log(tuto.title); // Result in order
            await this.getPost(tuto.id).then((post) => {
              console.log(post.title); // Not the same order
            });
          })
        )
      );

      console.log(this.tutos_search);
    },
  },

487
493
480
463
458
Proxy {}[[Handler]]: Object[[Target]]: Array(0)[[IsRevoked]]: false
480
487
458
493
463

问题根源 #

1. forEach不支持异步等待：forEach会直接遍历执行所有异步函数，不会等待前一个异步操作完成，导致getPost的返回结果顺序取决于接口响应速度，而非原数组顺序。
2. Promise.all用法错误：直接将search数组传入Promise.all，而非异步请求的Promise数组，导致Promise.all无法等待所有getPost请求完成，最终console.log(this.tutos_search)提前执行。

修改后的代码 #

search: async function () {
  // 先获取搜索结果，避免嵌套then
  const searchResults = await this.getSearch();
  
  // 用map生成Promise数组，保证异步操作按原顺序执行
  const posts = await Promise.all(
    searchResults.map(async (tuto) => {
      console.log(tuto.title); // 按原搜索顺序输出
      const post = await this.getPost(tuto.id);
      console.log(post.title); // 现在会和原顺序一致
      
      // 如果需要同时获取分类，可在此添加
      // const categorie = await this.getCategorie(tuto.id);
      // return { ...post, categorie };
      
      return post;
    })
  );
  
  // 所有请求完成后再赋值并打印
  this.tutos_search = posts;
  console.log(this.tutos_search);
},

说明 #

• 用map替代forEach：将每个搜索项转换为一个返回Promise的异步函数，Promise.all会按数组顺序等待每个Promise完成，最终返回的posts数组顺序与原搜索结果完全一致。
• 扁平化异步逻辑：避免嵌套then，直接用await获取结果，代码可读性更强。
• 确保所有请求完成后再更新数据：只有当所有getPost请求都完成后，才会给this.tutos_search赋值并打印，不会再出现提前输出空数组的情况。

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