非同步 JavaScript：從 Callback 到 Async/Await

搞懂非同步 JavaScript：從地獄到天堂的回呼函式演進史

如果你寫過一點 JavaScript，你一定聽過「非同步 (Asynchronous)」這個詞，它既是 JS 強大的地方，也是許多新手的惡夢。簡單來說，非同步就像你去咖啡廳點餐，你點完餐後不會呆站在櫃檯等咖啡做好，而是會拿到一個取餐器，先去找位子坐（做其他事），等取餐器震動（任務完成）後，再回去取餐。JS 的非同步機制，就是為了避免程式在等待耗時任務（如 API 請求、讀取檔案）時「卡住」而設計的。

最早，JavaScript 使用「回呼函式 (Callback Function)」來處理這種情況。概念很直接：「嘿，你開始執行這個耗時任務，完成後，請『回頭呼叫』我指定的那個函式」。這個作法在單一任務時還行，但當多個非同步任務有依賴關係時（例如：需要先登入取得 token，再用 token 去要用戶資料，再用用戶資料去要文章列表），就會產生一層包一層的程式碼，形成所謂的「回呼地獄 (Callback Hell)」，程式碼難以閱讀與維護。

為了解決這個問題，ES6 引入了 Promise。Promise 像是一個「承諾」，它代表一個未來才會完成的事件的最終結果。它有三種狀態：進行中 (pending)、已實現 (fulfilled)、已拒絕 (rejected)。你可以用 .then() 指定任務成功後要做的事，用 .catch() 處理失敗的情況。這種鏈式寫法，成功地將巢狀結構「拉平」，讓程式碼的邏輯流程變得清晰許多。

最終，我們迎來了 Async/Await 這個語法糖。它並不是新東西，而是建立在 Promise 之上的、讓我們能用更優雅的方式寫非同步程式的語法。在一個 async 函式中，你可以用 await 關鍵字「等待」一個 Promise 的結果，程式碼會在那一行暫停，直到任務完成才繼續往下。這讓我們能用寫「同步」程式的邏輯，來完成「非同步」的操作，大幅提升了程式碼的可讀性，這也是目前業界處理非同步的主流作法。