Prevent multiple request being sent and listed as pending in network tab
Hi Guys,
I created a pagination component for a table using vue and it's working fine however, when I click on the right arrow multiple times and quickly to go to the next page or if I click the left arrow to go back a page. It calls axios to fetch the new data.
However, It sends multiple requests and kind of messes up the data being loaded in the table. It loads eventually but its because there is so many requests pending in the network tab (google chrome inspector tools) because it sends a request with each click.
Is there anyway to stop multiple requests being sent or not send another until the first is completed. So basically I only want to allow the user to go to the next page once the data has been loaded.
Cancel any active request that is running when someone requests a new one
Keep them all running but only process the last request. To prevent accidental showing the user page 2 (because that was the slowest to load) but the user is already at page 5.
Only allow prev/next when the data is loaded. This is what you suggest.
You simply keep track of a loading boolean in your vue component. If the loading is set to "true" you do not allow to press prev/next or load anything.
So simply said:
data() {
return {
loading: false,
};
},
methods() {
fetch() {
if (this.loading) {
return;
}
// load the next/prev page
this.loading = true;
// do your fetching, when fetching is done (success or error) set loading back to 'false'.
},
}
// and in your component you can disable/enable your buttons, show a loading indicator, etc.
<button :disabled="loading">Prev</button>
<button :disabled="loading">Next</button>
I usually resolve this situation with a flag variables.
I set the flag to true before calling axios request. then I set it back when the promise is fully resolved.
So the flag is true when the client is waiting for a response. you just have not to launch any other request while the flag is true.
