
本文介绍了如何在JavaScript异步邮件发送成功后添加一个提示框,通过在fetch请求的.then()链中添加.finally()方法,确保无论请求成功与否,都能执行提示代码,从而提高用户体验。
在JavaScript中,使用fetch API进行异步请求时,通常会使用.then()和.catch()来处理请求成功和失败的情况。 然而,有时我们需要在请求完成之后,无论成功与否,都执行一些操作,例如显示一个提示信息。这时,可以使用.finally()方法。
以下是一个示例,展示了如何在发送邮件后显示一个提示框:
async function invitePeopleToMyTeam(){
let [invites,invite_statuses] = [[],$Q('.invitation-data.invite-access').slice(0,20)];
$Q('.invitation-data.invite-email').slice(0,20).map((i,ind)=>{
if(~i.value.search(/.+@.+\..+/gi)){
invites.push({
email:i.value.trim().toLowerCase(),
status:invite_statuses[ind].options[invite_statuses[ind].selectedIndex].innerHTML.slice(0,1).toLowerCase()
});
}else{
invite_statuses[ind] = null;
}
});
for(let i=0,il=invites.length; i<il; i++){
if(invites[i] === null){
invites.split(i,1);
il--;
i--;
continue;
}
if(invites[i].status == null || invites[i].status == ""){
invites[i].status = "m";
}
}
if(invites.length===0 || invites.filter(e=>e).length===0){
alert('There don\'t seem to be any e-mails in your invite list. Please review and try again.');
return false;
}
let sql = `./invitePeople.cfc?method=sendInvite`;
let params = {"invites" : invites};
let result = await fetch(sql, {
method:"post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
})
.then(resp => resp.text())
.then(resp=>{console.log(resp); return resp})
.then(r=>{
$Q('.invitation-data.invite-email').slice(0,20).map((i,ind)=>{
i.value= "";
})
})
.catch(e=>console.log(e))
.finally(() => {
alert('邮件已发送!');
});
}代码解释:
立即学习“Java免费学习笔记(深入)”;
注意事项:
总结:
使用.finally()方法可以方便地在异步请求完成后执行一些清理或提示操作,提高用户体验。 在发送邮件等需要通知用户的场景中,这是一个非常有用的技巧。
以上就是JavaScript异步邮件发送成功后显示提示信息的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号