The front-end uses a back-end management and control system. In some scenarios where the request time of interfaces is too long, users need to prevent repeated requests.
Suppose that after a user clicks the query button in a certain scenario, the backend response takes a long time to return data. Then it is nothing more than to avoid users returning to clicking the query button to prevent users from clicking the button again within a reasonable time. There are several implementation methods:
1. After clicking the button to initiate a request, pop up a mask layer, display a loading, and hide the mask layer when the request data is returned.
2. After clicking the button to initiate a request, disable the button and wait until the data is returned to release the button.
The above are two more common solutions.
The simplest implementation is definitely to process the required page before requesting and after obtaining the data. The advantage of this solution is only simple, but each page that needs to be processed must write a string of repeated codes separately, even if you use mixin, you will need more and more redundant code.
If you use instructions, you only need to add a v-xxxx in the appropriate place, and the others are handled uniformly within the logic of the instructions.
Take the second method as an example:
let forbidClick = null;
export default {
bind(e) {
const el = e;
let timer = null;
forbidClick = () => {
= true;
('is-disabled');
timer = setTimeout(() => {
= false;
('is-disabled');
}, 3000);
};
('click', forbidClick);
},
unbind() {
('click', forbidClick);
},
};
The logic of the instruction is very simple. When the button is inserted into the DOM node, add an event to listen to the click. When the button is clicked, disable the button and add a disable style. The button will be unlocked after 3 seconds.
Consider the request again, take axios as an example:
import axios from 'axios';
export baseURL = 'xxxx';
const api = ({
baseURL,<br data-filtered="filtered"> timeout: 3000,
});
/* Record whether the current request is completed */
= {
done: true,
config: {},
};
(function(config) {
clearTimeout(resqTimer);
= {
done: false,
config,
};
// If the request time of the interface exceeds 3s, it will be considered completed, regardless of whether the request result is successful or failed. resqTimer = setTimeout(() => {
= {
done: true,
config: {},
};
}, 3000);
});
(function(response) {
const { config } = ;
const { url, method, data } = ;
if ( === url && === method && === data) {
clearTimeout(resqTimer);
= true;
}
return response;
}, function (error) {
return error;
});
export default api;
Use a global currentResq as a flag for whether the request is completed. In the axios request interceptor type, the current requested data is recorded in currentResq and the done is set to false. In the axios response interceptor, when the three parameters of url, method, and data are the same, the request recorded in the currentResq returns data and set done to true.
The same way, add a poll to the instruction logic to listen to whether the done of currentResq is completed.
let forbidClick = null;
export default {
bind(e) {
const el = e;
let timer = null;
forbidClick = () => {
= true;
('is-disabled');
timer = setInterval(() => {
if () {
clearInterval(timer);
= false;
('is-disabled');
}
}, 500);
};
('click', forbidClick);
},
unbind() {
('click', forbidClick);
},
};
This is achieved by adding it to the buttonv-clickForbidden. The button will be disabled after clicking, and the button will be disabled only if a request returns data or after 3 seconds.
Now consider only the scenario where the button only sends one request at a time, and in currentResq, one data can also be used to record the request.
Summarize
The above are two methods introduced by Xiao Xiao to Vue to use instructions to prohibit repeated sending of requests. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!