There was a problem when submitting the form ： Forms and other data submission , If you click the submit button continuously , If it is not processed, the same form will be submitted to the database many times .
I thought about it at first , simple , stay data Function and then bind to the disable Attribute
Click the submit button to disable Set to true, This will disable the button , Then send a request to submit the data, and put it in the callback function disable Change to false
be accomplished !
But here's the problem
What if there is a problem in the back end that causes the data submission to fail ?
Because I added judgment to the interceptor , If an error occurs , The program won't get there callback Functional ,callback Function to handle the main is to submit a successful prompt and jump to other pages , If you don't set interception, even if you fail to submit data, this function will obviously have problems , And other pages also use this encapsulated request method , Therefore, it is not advisable to cancel the interception .
So what happens is ： Prompt the user that there is a problem on the page, resulting in unsuccessful submission , And then because it wasn't implemented callback Function, so the state of the button is still disable. But what I want to achieve is
Just prevent users from submitting more than once , Whether the submission is successful or not , I hope the status of the button is still clickable after the user clicks submit .
So I went to the Internet to see how others dealt with it
sendComment () { this.disabled = true if (this.text == '') { this.$message({
type: 'error', message: ' Input content cannot be empty ', }) this.disabled = false } else {
this.$post('/xx/xx/IdleGoodsComment', { goods_id: this.$route.params.id,
content: this.text, user_id: window.uId, type: 1 }).then((res) => { if (res) {
this.getDetail() setTimeout(() => { this.disabled = false this.getCommentList()
this.text = '' } , 2000) this.disabled = true } }) } }
well , The problem is solved , Success or failure , My button will return to the clickable state .
however , A new question came to mind ,
What if you meet some users who are slow and naughty ?
It takes several seconds to click Submit , But I only set two seconds to return to the clickable state , Then the user can click the submit button again , Well, I'll order it again , And then back to the original question , You can still submit multiple times .
But see the code above , So I thought of a way , Since it also works promise, Then I'll put the modification status code in the promise Of finally Is it feasible to go in the way ?（finally
Method is used to specify the Promise What is the final state of the object , Will be executed .） It feels feasible , want a go , It seems that there is no problem with it .
Style adjustment , Remove the previous ones disable, use vant Of Toast assembly , Click the button to add the Toast assembly
Toast.loading({ message: ' Submitting , Do not repeat ', forbidClick: true, // Prohibit background click
loadingType: 'spinner', duration: 0, // Display duration (ms), The value is 0 Time ,toast It won't go away }); request({
url: '/care/create', method: 'post',
And then in the finally Get rid of it Toast
finally(() => { Toast.clear(); });
code
else { Toast.loading({ message: ' Submitting , Do not repeat ', forbidClick: true, loadingType:
'spinner', duration: 0, }); request({ url: '/care/create', method: 'post',
data: { id: this.id, title, }, }).then(() => { Dialog.alert({ message: ' Submitted successfully !',
}).then(() => { this.$router.push('/appointments'); }); }).catch(() => {
}).finally(() => { Toast.clear(); });
Technology