本文介绍了如何在JavaScript代码中，在发送邀请邮件成功后添加一个提示框，以增强用户体验。通过在fetch请求的then链中添加.finally()方法，无论请求成功或失败，都能确保提示信息显示给用户。
在Web应用中，及时向用户反馈操作结果至关重要。对于发送邀请邮件这类异步操作，用户往往需要知道邮件是否已成功发送。以下是如何在你的JavaScript代码中添加一个发送成功的提示框。
使用 finally() 添加提示
finally() 方法用于指定一个在 Promise 完成后总是被执行的回调函数。这意味着，无论 Promise 是 resolve 还是 reject，finally() 中的代码都会执行。 这非常适合用于清理工作或显示最终状态，例如显示“邮件已发送”的提示。
在你的代码中，可以将 alert(’email sent’) 添加到 finally() 块中，如下所示：
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('email sent'));
代码解释：
fetch(sql, { … }): 发起一个 POST 请求到 sql 地址，发送包含邀请信息的 JSON 数据。.then(resp => resp.text()): 将响应转换为文本格式。.then(resp => {console.log(resp); return resp}): 打印响应内容到控制台，并返回响应。.then(r => { … }): 清空邀请邮件输入框。.catch(e => console.log(e)): 捕获并记录任何发生的错误。.finally(() => alert(’email sent’)): 无论请求成功还是失败，都会执行这个回调函数，显示 “email sent” 的提示框。
注意事项：
错误处理： 虽然 finally() 确保提示显示，但它不会处理错误。确保在 catch() 块中处理错误，例如显示更具体的错误信息。用户体验： alert() 是一种简单的提示方式，但在现代Web应用中，通常使用更友好的提示方式，例如模态框或Toast消息。你可以使用第三方库（例如 SweetAlert2, Noty）来实现更美观和可定制的提示。异步操作： 确保 alert() 中的提示信息与实际的异步操作状态相符。 在某些情况下，你可能需要在 then() 或 catch() 块中根据具体的结果来修改提示信息。
更友好的提示方式示例（使用SweetAlert2）：
首先，引入 SweetAlert2 库。
然后，修改 finally() 块：
.finally(() => { Swal.fire({ title: '邮件已发送!', text: '邀请邮件已成功发送。', icon: 'success', confirmButtonText: '确定' });});
总结：
使用 finally() 方法可以方便地在异步操作完成后显示提示信息，从而改善用户体验。 结合错误处理和更友好的提示方式，可以创建一个更完善的Web应用。
以上就是添加邀请邮件发送成功后的提示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508679.html
微信扫一扫 
支付宝扫一扫 
