JAVASCRIPT V2 · ASYNC BRIDGE · 13

Async Bridge：真正困難的不是 await，而是「現在還沒有答案」

到目前為止，多數程式都是「呼叫 function，立刻拿到 return value」。Network、timer、檔案與使用者互動打破這個直覺：工作現在開始，結果之後才完成。這一課先建立時間模型，再進 Promise。

Learning outcomes

function double(n) {
  return n * 2;
}

const result = double(21);
console.log(result); // 42

呼叫結束時，答案已經存在。但下面這些工作沒有這個保證：

如果你仍用「下一行一定已經拿到答案」的心智模型，async code 很快會變成猜測。

現在：
start work
  ↓
沒有最終結果
  ↓
目前 JavaScript 結束這一輪工作

之後：
external work completes
  ↓
continuation becomes runnable
  ↓
JavaScript 繼續處理結果

非同步不等於平行執行所有 JavaScript。 它首先代表「目前不能完成的工作，不必用 blocking 等到它完成」。

console.log("A");

setTimeout(() => {
  console.log("B");
}, 0);

console.log("C");

預測後再執行。結果是：

A
C
B

setTimeout(..., 0) 的意思不是「現在立刻插隊」，而是「最早在目前同步工作結束後，才有機會執行 callback」。

let user;

setTimeout(() => {
  user = { name: "Amy" };
}, 100);

console.log(user.name);

問題不是 timer 太慢，而是 console.log 執行時 user 尚未被指定。把 timeout 從 100 改成 0 也沒有修正資料依賴。

setTimeout(() => {
  const user = { name: "Amy" };
  console.log(user.name);
}, 100);

真正的修正是把「需要結果的 continuation」放到結果可用之後。

function loadUser(done) {
  setTimeout(() => {
    done({ name: "Amy" });
  }, 100);
}

loadUser(user => {
  console.log(user.name);
});

callback 能表達「完成後做什麼」，但多層 success/error/cancellation 很快會難以組合。Promise 就是下一課要用的標準化結果容器。

const state = {
  status: "idle",
  data: null,
  error: null
};

這個 state machine 會一路出現在 fetch、React Query、Android coroutine 與後端 job。

setTimeout(..., 1000) 不是 dependency management。網路可能 50ms，也可能 5s。

Browser 可以在外部處理 timer/network，但 JS callback 何時進 main thread 仍受 event loop 排程。

沒有 loading/error 時，使用者會把「正在等」誤認成「壞掉」。

callback 仍必須等目前 stack 結束。

console.log("before request");
startAsyncWork(result => {
  console.log("result arrived", result);
});
console.log("after start");

如果 bug 是「讀到 undefined」，最有價值的 evidence 往往不是多印一次 value，而是記錄：

let total;

setTimeout(() => {
  total = 120;
}, 10);

console.log("Total:", total);

要求：不靠增加 delay，讓輸出一定發生在 total 可用之後。先用 callback 修，再在 42 課改成 Promise。

設計一個 state object，模擬 request 開始、成功與失敗，並寫出 renderStatus(state)。每個 transition 都要能從 Console 看見。

console.log("1");

setTimeout(() => console.log("2"), 0);

console.log("3");

setTimeout(() => console.log("4"), 0);

先寫 prediction，再執行，再用一句話解釋為什麼不是 1-2-3-4。Event Loop 課會加入 Promise microtask，讓順序更有挑戰。

idle
  ↓ click Load
loading
  ↓ result
success

或

loading
  ↓ failure
error

這一課只建立 state machine，不急著接真 API。下一課 42 才把 Promise / async / await 接進來。