I am currently working on implementing a search functionality using the Wordpress API. Although I am able to successfully make requests, I am facing an issue where the results are not ordered as expected after my initial request. Let me explain the situation. My initial axios request is for a search operation which returns a list of posts with their titles and IDs. However, within a foreach loop, I am attempting to make subsequent requests to fetch individual posts based on their IDs:
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);
},
},
Although I suspect it may be related to the usage of async/await functions, I have been unable to identify a solution thus far.
The console output displays:
487
493
480
463
458
Proxy {}[[Handler]]: Object[[Target]]: Array(0)[[IsRevoked]]: false
480
487
458
493
463
As evident from the console log, there is a discrepancy in the ordering between the first and second logs, interspersed with the final console.log message. I am perplexed by this inconsistency as I have included await statements in my code.
For your information, I am using VueJS. Thank you for your assistance.