await 是 Promise 的語法糖

結論: 簡單情境，用 await 就好。

你可以只選一種用：await 或 Promise.then()，但不能混用不當。

解釋一下：

1. await 是 Promise 的語法糖

其實它們本質上是一樣的東西，只是語法不同、可讀性不同：

• 使用 await（建議在 async 函式內使用）

async function sendMessage() {
    const result = await doSomethingAsync();
    console.log(result);
}

• 使用 .then()（回調方式）

function sendMessage() {
    doSomethingAsync().then(result => {
        console.log(result);
    });
}

可以混用，但要小心這些狀況： ❌ 不建議這樣寫（混得亂會讓程式難讀）

await doSomethingAsync().then(result => {
    console.log(result); // ⚠️ 這樣多此一舉
});

你已經用 await 了，就不需要再 .then()。

正確原則

你想要達成的目標	使用方式	建議與說明
結構清晰、易讀的非同步邏輯	async/await	✅ 最推薦，現代開發主流寫法
快速撰寫簡單的鏈式非同步處理	.then()	可接受，屬於較舊的 JS 風格
等待某個 Promise 完成後再執行動作	await	✅ 最直覺的等待方式，搭配 async 使用

• promise 的一般用法

function askUser() {
  return new Promise((resolve, reject) => {
    // 模擬使用者按了「取消」
    reject("使用者取消了操作");
  });
}

async function run() {
  try {
    await askUser();  // 👈 這裡會被 reject 中斷
    console.log("使用者確認了");
  } catch (err) {
    console.log("進入 catch：", err); // ✅ 被 reject 觸發
  }
}

run();

• 物件包含函式的用法

langDialogHandlers.value = {
    onConfirm: () => {
        resolve(); // ✅ 成功
        sendLangDialogVisible.value = false;
    },
    onCancel: () => {
        reject();  // ✅ 中止（會進 catch）
        sendLangDialogVisible.value = false;
    }
};

它的型態就是一個「物件包含函式」的結構，用來：

把 Dialog 的按鈕點擊事件跟外部的 resolve() / reject() 綁起來。

讓 Dialog 裡面的 < el-button @click="langDialogHandlers.onConfirm()" /> 可以控制 Promise 的完成或中止。

---

什麼情況才考慮用 .then()？

你不在 async function 裡（不能用 await）

想快速鏈式處理（例如 fetch().then(...).catch(...)）

或是為了兼容舊寫法