JavaScript异步发邮件成功提示技巧

还在为JavaScript异步邮件发送后的用户体验发愁吗？本文为你提供了一种简单有效的解决方案：利用`.finally()`方法，无论邮件发送成功与否，都能及时向用户显示提示信息。通过修改后的代码示例，你将学会如何在`fetch`请求的`.then()`链中添加`.finally()`，确保最终状态提示的执行，从而改善用户体验。文章还深入解释了`.finally()`方法的作用和优势，并提醒开发者注意错误处理、用户体验以及浏览器兼容性问题。立即阅读，掌握JavaScript异步邮件发送成功提示的技巧，提升你的网站用户体验！

本文介绍了如何在JavaScript的异步邮件发送函数中添加成功提示。通过在fetch请求的.then()链中添加.finally()方法，确保无论请求成功还是失败，都能执行提示代码，从而改善用户体验。文章提供了修改后的代码示例，并解释了finally()方法的作用和优势。

在JavaScript中，当使用fetch API发送异步请求时，为了在邮件发送成功后向用户显示提示信息，可以使用.finally()方法。finally()方法会在Promise完成（resolve或reject）后始终执行，这使得它成为添加清理代码或显示最终状态（如“邮件已发送”或“发送失败”）的理想选择。

以下是如何修改原始代码以添加成功提示的步骤：

1. 理解现有代码： 首先，确保你理解现有的invitePeopleToMyTeam()函数。它负责收集邮件地址，发送请求，并在成功后清除输入框。

2. 添加.finally()： 在fetch的.then()链中添加.finally()方法。这个方法接收一个函数作为参数，该函数将在Promise完成时执行。

下面是修改后的代码示例：

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('邮件已发送！');
    });
}

代码解释：

• .finally(() => { alert('邮件已发送！'); }): 这行代码添加了.finally()方法，并在其中调用alert('邮件已发送！')，无论fetch请求成功或失败，都会显示这个提示框。

注意事项：

• 错误处理： 虽然.finally()确保提示显示，但它不处理错误。如果希望根据请求成功或失败显示不同的提示，可以在.then()和.catch()中分别处理，或者在.finally()中检查请求的状态。
• 用户体验： alert() 可能会打断用户体验。考虑使用更友好的提示方式，例如在页面上显示一个消息框或使用 toast 通知。
• 浏览器兼容性： .finally() 方法在较旧的浏览器中可能不受支持。如果需要支持这些浏览器，可以使用polyfill。

总结：

使用.finally()方法是在JavaScript异步函数中添加最终状态提示的有效方法。它确保无论请求成功还是失败，都能执行提示代码，从而提高用户体验。但是，请注意错误处理和用户体验，并根据需要选择更友好的提示方式。

以上就是《JavaScript异步发邮件成功提示技巧》的详细内容，更多关于的资料请关注golang学习网公众号！