首页 > web前端 > js教程 > 正文

JavaScript异步邮件发送成功后显示提示信息

聖光之護
发布: 2025-07-08 15:22:25
原创
584人浏览过

javascript异步邮件发送成功后显示提示信息

本文介绍了如何在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免费学习笔记(深入)”;

芦笋演示
芦笋演示

一键出成片的录屏演示软件,专为制作产品演示、教学课程和使用教程而设计。

芦笋演示 34
查看详情 芦笋演示
  1. fetch(sql, { ... }): 发起一个POST请求到sql指定的URL,并传递params作为请求体。
  2. .then(resp => resp.text()): 将响应转换为文本格式。
  3. .then(resp=>{console.log(resp); return resp}): 打印响应内容到控制台,并返回响应。
  4. .then(r=>{...}): 清空输入框的值
  5. .catch(e=>console.log(e)): 捕获请求过程中发生的任何错误,并将错误信息打印到控制台。
  6. .finally(() => { alert('邮件已发送!'); }): 无论请求成功还是失败,都会执行这个函数。 在这个例子中,它会弹出一个提示框,显示“邮件已发送!”。

注意事项:

  • .finally()方法是ES2018引入的,如果你的浏览器或Node.js版本不支持,请确保进行polyfill。
  • .finally()方法不接收任何参数,也无法知道请求是成功还是失败。如果需要根据请求结果执行不同的操作,请在.then()和.catch()中处理。
  • 在实际应用中,可以使用更友好的提示方式,例如使用模态框或消息提示组件,而不是简单的alert()。

总结:

使用.finally()方法可以方便地在异步请求完成后执行一些清理或提示操作,提高用户体验。 在发送邮件等需要通知用户的场景中,这是一个非常有用的技巧。

以上就是JavaScript异步邮件发送成功后显示提示信息的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号