JavaScript異步操作中實(shí)現(xiàn)用戶反饋與狀態(tài)管理教程

async function invitePeopleToMyTeam(){     let [invites,invite_statuses] = [[],$Q('.invitation-data.invite-Access').slice(0,20)];      // 數(shù)據(jù)收集和驗(yàn)證邏輯     $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('您的邀請(qǐng)列表中似乎沒(méi)有有效的電子郵件地址。請(qǐng)檢查后重試。');         return false;     }      let sql = `./invitePeople.cfc?method=sendInvite`;     let params = {"invites" : invites};      try {         // 發(fā)送請(qǐng)求         let response = await fetch(sql, {             method:"post",             headers: {                 'Accept': 'application/json',                 'Content-Type': 'application/json'             },             body: JSON.stringify(params)         });          // 檢查http響應(yīng)狀態(tài)碼         if (!response.ok) {             // 如果HTTP狀態(tài)碼表示錯(cuò)誤（例如4xx, 5xx），拋出錯(cuò)誤             const ErrorText = await response.text();             throw new Error(`服務(wù)器錯(cuò)誤: ${response.status} ${response.statusText} - ${errorText}`);         }          // 解析響應(yīng)數(shù)據(jù)         const resultText = await response.text(); // 根據(jù)服務(wù)器返回類(lèi)型，可能是.json()         console.log(resultText);          // 清空輸入字段         $Q('.invitation-data.invite-email').slice(0,20).map((i,ind)=>{             i.value= "";         });          // 郵件發(fā)送成功提示         alert('您的郵件已成功發(fā)送！');      } catch (error) {         // 捕獲網(wǎng)絡(luò)錯(cuò)誤、解析錯(cuò)誤或上述自定義拋出的錯(cuò)誤         console.error('發(fā)送郵件時(shí)發(fā)生錯(cuò)誤:', error);         alert(`郵件發(fā)送失敗：${error.message || '網(wǎng)絡(luò)或系統(tǒng)錯(cuò)誤。'}`);     } }

async function invitePeopleToMyTeam(){     // ... (數(shù)據(jù)收集和驗(yàn)證邏輯，與上面相同) ...      let sql = `./invitePeople.cfc?method=sendInvite`;     let params = {"invites" : invites};      let result = await fetch(sql, { // 這里使用await是為了保持函數(shù)簽名，但內(nèi)部是Promise鏈         method:"post",         headers: {             'Accept': 'application/json',             'Content-Type': 'application/json'         },         body: JSON.stringify(params)     })     .then(resp => {         // 檢查HTTP響應(yīng)狀態(tài)碼         if (!resp.ok) {             // 如果HTTP狀態(tài)碼表示錯(cuò)誤，拋出錯(cuò)誤以被后續(xù)的.catch()捕獲             return resp.text().then(errorText => {                 throw new Error(`服務(wù)器錯(cuò)誤: ${resp.status} ${resp.statusText} - ${errorText}`);             });         }         return resp.text(); // 繼續(xù)Promise鏈，解析響應(yīng)文本     })     .then(respText => {         console.log(respText); // 打印服務(wù)器響應(yīng)          // 清空輸入字段         $Q('.invitation-data.invite-email').slice(0,20).map((i,ind)=>{             i.value= "";         });          // 郵件發(fā)送成功提示         alert('您的郵件已成功發(fā)送！');         return respText; // 返回?cái)?shù)據(jù)，如果后續(xù)還有鏈?zhǔn)讲僮?    })     .catch(e => {         // 捕獲網(wǎng)絡(luò)錯(cuò)誤、解析錯(cuò)誤或上述自定義拋出的錯(cuò)誤         console.error('發(fā)送郵件時(shí)發(fā)生錯(cuò)誤:', e);         alert(`郵件發(fā)送失敗：${e.message || '網(wǎng)絡(luò)或系統(tǒng)錯(cuò)誤。'}`);     }); }

// ... (之前的fetch請(qǐng)求和.then/.catch鏈) ...     .catch(e => {         console.error('發(fā)送郵件時(shí)發(fā)生錯(cuò)誤:', e);         alert(`郵件發(fā)送失敗：${e.message || '網(wǎng)絡(luò)或系統(tǒng)錯(cuò)誤。'}`);     })     .finally(() => {         // 無(wú)論成功或失敗，都會(huì)執(zhí)行到這里         // 例如：隱藏一個(gè)全局的加載指示器         console.log('郵件發(fā)送操作已完成。');      });