本文介绍了如何在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; ie).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免费学习笔记（深入）”；
fetch(sql, { … }): 发起一个POST请求到sql指定的URL，并传递params作为请求体。.then(resp => resp.text()): 将响应转换为文本格式。.then(resp=>{console.log(resp); return resp}): 打印响应内容到控制台，并返回响应。.then(r=>{…}): 清空输入框的值.catch(e=>console.log(e)): 捕获请求过程中发生的任何错误，并将错误信息打印到控制台。.finally(() => { alert(‘邮件已发送！’); }): 无论请求成功还是失败，都会执行这个函数。 在这个例子中，它会弹出一个提示框，显示“邮件已发送！”。
注意事项：
.finally()方法是ES2018引入的，如果你的浏览器或Node.js版本不支持，请确保进行polyfill。.finally()方法不接收任何参数，也无法知道请求是成功还是失败。如果需要根据请求结果执行不同的操作，请在.then()和.catch()中处理。在实际应用中，可以使用更友好的提示方式，例如使用模态框或消息提示组件，而不是简单的alert()。
总结：
使用.finally()方法可以方便地在异步请求完成后执行一些清理或提示操作，提高用户体验。 在发送邮件等需要通知用户的场景中，这是一个非常有用的技巧。
以上就是JavaScript异步邮件发送成功后显示提示信息的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508683.html
微信扫一扫 
支付宝扫一扫 
