JavaScript异步操作中实现用户反馈与状态管理教程

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.splice(i,1); // 使用splice而不是split
            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('您的邀请列表中似乎没有有效的电子邮件地址。请检查后重试。');
        return false;
    }

    let sql = `./invitePeople.cfc?method=sendInvite`;
    let params = {"invites" : invites};

    try {
        // 发送请求
        let response = await fetch(sql, {
            method:"post",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        });

        // 检查HTTP响应状态码
        if (!response.ok) {
            // 如果HTTP状态码表示错误（例如4xx, 5xx），抛出错误
            const errorText = await response.text();
            throw new Error(`服务器错误: ${response.status} ${response.statusText} - ${errorText}`);
        }

        // 解析响应数据
        const resultText = await response.text(); // 根据服务器返回类型，可能是.json()
        console.log(resultText);

        // 清空输入字段
        $Q('.invitation-data.invite-email').slice(0,20).map((i,ind)=>{
            i.value= "";
        });

        // 邮件发送成功提示
        alert('您的邮件已成功发送！');

    } catch (error) {
        // 捕获网络错误、解析错误或上述自定义抛出的错误
        console.error('发送邮件时发生错误:', error);
        alert(`邮件发送失败：${error.message || '网络或系统错误。'}`);
    }
}

async function invitePeopleToMyTeam(){
    // ... (数据收集和验证逻辑，与上面相同) ...

    let sql = `./invitePeople.cfc?method=sendInvite`;
    let params = {"invites" : invites};

    let result = await fetch(sql, { // 这里使用await是为了保持函数签名，但内部是Promise链
        method:"post",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(params)
    })
    .then(resp => {
        // 检查HTTP响应状态码
        if (!resp.ok) {
            // 如果HTTP状态码表示错误，抛出错误以被后续的.catch()捕获
            return resp.text().then(errorText => {
                throw new Error(`服务器错误: ${resp.status} ${resp.statusText} - ${errorText}`);
            });
        }
        return resp.text(); // 继续Promise链，解析响应文本
    })
    .then(respText => {
        console.log(respText); // 打印服务器响应

        // 清空输入字段
        $Q('.invitation-data.invite-email').slice(0,20).map((i,ind)=>{
            i.value= "";
        });

        // 邮件发送成功提示
        alert('您的邮件已成功发送！');
        return respText; // 返回数据，如果后续还有链式操作
    })
    .catch(e => {
        // 捕获网络错误、解析错误或上述自定义抛出的错误
        console.error('发送邮件时发生错误:', e);
        alert(`邮件发送失败：${e.message || '网络或系统错误。'}`);
    });
}

// ... (之前的fetch请求和.then/.catch链) ...
    .catch(e => {
        console.error('发送邮件时发生错误:', e);
        alert(`邮件发送失败：${e.message || '网络或系统错误。'}`);
    })
    .finally(() => {
        // 无论成功或失败，都会执行到这里
        // 例如：隐藏一个全局的加载指示器
        console.log('邮件发送操作已完成。'); 
    });