promise 流程三部曲 - daniel-qa/Vue GitHub Wiki

promise 流程三部曲

Promise 流程三部曲（以你這次的確認 Dialog 為例）

1. 建立一個 Promise，並讓外部來決定「完成 or 中止」

const waitForLangConfirm = () => {

  return new Promise((resolve, reject) => {

    // 顯示 Dialog
    sendLangDialogVisible.value = true;

    // 等待使用者點擊確認或取消，手動呼叫 resolve/reject
    langDialogHandlers.value = {
      onConfirm: () => {
        resolve(); // 使用者按了「確認」，讓外部流程繼續
        sendLangDialogVisible.value = false;
      },
      onCancel: () => {
        reject(); // 使用者按了「取消」，外部流程中止（進 catch）
        sendLangDialogVisible.value = false;
      }
    };
  });
};

2. 使用 await 停在 Dialog 等待結果

呼叫 Dialog 的地方

try {
  await waitForLangConfirm(); // ✅ 等使用者操作
  // 👇 使用者按「確認」，會從 resolve() 繼續往下走
  console.log("使用者確認了，開始發送");
} catch {
  // 👇 使用者按「取消」，會從 reject() 進來這裡
  console.log("使用者取消了發送");
  return;
}

3. 在 Dialog 裡觸發使用者選擇（呼叫 handlers）

Dialog 裡面的函式

<el-button type="primary" @click="langDialogHandlers.onConfirm()">我已確認</el-button>
<el-button @click="langDialogHandlers.onCancel()">取消</el-button>
⚠️ **GitHub.com Fallback** ⚠️