const actions = {
search: debounce(
async ({ commit, dispatch, getters, rootGetters }, { page = 1 }) => {
commit("setLoading", true);
commit("setPage", page);
console.log("Starting...")
const randId = Math.random() * 100;
console.log(randId);
const results = await EventApi.get();
console.log("Done: ", randId, `|${results.meta.slept}|`)
// After `await`
commit(page == 1 ? "setEvents" : "addEvents", results.events);
// ... and a bunch more commits after that.
}, 300, { leading: true, trailing: true })
}
}
If the action above is called twice:
store.dispatch('search', { page: 1 });
store.dispatch('search', { page: 1 });
Let's assume the request made by the first call takes 10s to complete, and the request made by the second one takes only 1 second.
Is the code after await EventApi.get() in the second call executed after the one in the first call, even thought the request should have finished way earlier? I wouldn't have thought so but my experiment showed that it was the case, so something must be wrong with my code.
Here are the Vuex logs + some of my comments:
https://gist.github.com/niuage/9e2dcd509dc6d5246b3a16af56ccb3d3
In case it helps, here's the simplified EventApi module:
const get = async () => {
const q = await fetch(someUrl);
const result = await q.json();
return result;
}
export default {
get
}
I'm asking because I'm having an issue where, super rarely, I get my result count out of sync with the results actually displayed, so I was guessing that it could be because there was a race condition between multiple requests.