本文介绍了如何在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 库。
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
然后，修改 finally() 块：
.finally(() => {
Swal.fire({
title: '邮件已发送!',
text: '邀请邮件已成功发送。',
icon: 'success',
confirmButtonText: '确定'
});
});总结：
使用 finally() 方法可以方便地在异步操作完成后显示提示信息，从而改善用户体验。 结合错误处理和更友好的提示方式，可以创建一个更完善的Web应用。
