Javascript Wrong order after Axios subrequest

Question

I'm trying to make a search with Wordpress API, i have no problems to request but during my function my results are not order anymore from the first request. I explain. My first axios request is a search and it return a list of posts with title and id. But inside a foreach i wanna make a sub request to get a post by id :

  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);
    },
  },

I'm pretty sure it's a problem with async/await but i can't find a solution.

This is the console :

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

As you can see, it's not the same order between first log and second, and in the middle we see my last console.log. Don't understand why because i have await.

FYI i use VueJS. Thanks a lot

Asynchronous tasks are not guaranteed to be finished in the same order they were called. — Teemu, Nov 29 '22 at 13:03
Be aware that forEach will not wait even if you use async/await, if you really need to, use a for loop instead. — Lk77, Nov 29 '22 at 13:07
Mixing `async`/`await` with `.then()` is usually discouraged. Little reason to use `.then()` (instead of `await`) when you're in an `async` function. Also the `Promise.all(search)` doesn't seem to make a lot of sense, since `search` is the result of your API call and is not an array of Promises. — Ivar, Nov 29 '22 at 13:10

score 0 · Answer 1 · answered Nov 29 '22 at 14:29

Thank you guys, I am not 100% satisfied but my code below work !!


  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 () {
      const search = await this.getSearch();

      for (let i = 0; i < search.length; i++) {
        const id = search[i].id;
        const post = await this.getPost(id);
        const categories = await this.getCategorie(id);
        post.categories.length = 0;
        post.categories = categories;
        console.log(post);
      }
    },
  },

Javascript Wrong order after Axios subrequest

1 Answers1