原代码(同一个函数内，多次调用this.$message，弹窗内容会重叠)：
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$refs.button_submit.loading = true
this.$axios.request(
// 发送axios请求
{
url: '/alterpassword/', // 请求路径
method: 'put', // 请求方式
data: {
// 要发送的数据
old_password: this.alterpasswdForm.oldpass,
new_password: this.alterpasswdForm.newpass
},
responseType: 'json' // 期望返回的类型是json格式
}
).then(function (response) {
that.$refs.button_submit.loading = false
// 把返回的结果交给回调函数处理
console.log(response.data)
if (response.data['code'] === 200) {
this.$message.success(response.data)
this.$message.info('请重新登录')
this.isVisible = false
sessionStorage.removeItem('token')
sessionStorage.clear()
this.$router.push('/login')
} else {
that.$message({ type: 'warning', message: response.data })
}
}).catch(error => {
console.log(error)
this.$message({ type: 'warning', message: error })
this.$refs.button_submit.loading = false
})
} else {
console.log('请输入合法用户名和密码')
return false
}
})
},
使用async、await实现不重叠：
submitForm (formName) {
var that = this
this.$refs[formName].validate((valid) => {
if (valid) {
this.$refs.button_submit.loading = true
this.$axios.request(
// 发送axios请求
{
url: '/alterpassword/', // 请求路径
method: 'put', // 请求方式
data: {
// 要发送的数据
old_password: this.alterpasswdForm.oldpass,
new_password: this.alterpasswdForm.newpass
},
responseType: 'json' // 期望返回的类型是json格式
}
).then(async function (response) {
that.$refs.button_submit.loading = false
// 把返回的结果交给回调函数处理
console.log(response.data)
if (response.data['code'] === 200) {
await that.$message.success(response.data)
await that.$message.info('请重新登录')
that.isVisible = false
sessionStorage.removeItem('token')
sessionStorage.clear()
that.$router.push('/login')
} else {
that.$message({ type: 'warning', message: response.data })
}
}).catch(error => {
console.log(error)
this.$message({ type: 'warning', message: error })
this.$refs.button_submit.loading = false
})
} else {
console.log('请输入合法用户名和密码')
return false
}
})
},