{ "version": "https://jsonfeed.org/version/1", "title": "Boundarylesstacks", "home_page_url": "https://boundarylesstacks.com", "feed_url": "https://boundarylesstacks.com/api/feed.json", "description": "I am RZ, web frontend developer", "icon": "https://boundarylesstacks.com/images/favicons/favicon-32x32.png", "author": { "name": "RZ Huang", "url": "https://boundarylesstacks.com/about/" }, "items": [ { "id": "https://boundarylesstacks.com/post/2025-the-finally-behavior-in-try-catch-of-javascript/", "content_html": "

來源

\n

\"source-from-x\"

\n\n

原文是希望藉由這樣的寫法，不 block 到 response（return data）的情況下，在 finally block 做最後的 cleanup，但是適得其反，為什麼呢？

\n

\"example-w-o-await\"\n他自己也注意到了，finally block 會先執行，才回 return try block 的值，怎麼會這樣？

\n

來看看文件怎麼寫

\n

根據 MDN 的 The finally block 段落，寫道 finally block 執行的時機點有 3 個：

\n
\n\n
\n

前面兩點相信很好懂，重點在第三點：「finally 會在執行任何 control-flow statement 之前就會馬上執行，包括在 try block 和 catch block 當中，可能會導致離開 block 的 control-flow statement」

\n

What is control-flow statement?

\n

根據上面原文來舉例，就會是 try block 裡面的 return ，因此 finally block 的 await cleanup() 會先執行，才執行 try block 的 return

\n

舉個例子：

\n
const fn = () => {\n  try {\n    console.log(\"try\");\n    return \"true\";\n  } finally {\n    console.log(\"finally\");\n  }\n};\n\nconst data = fn();\nconsole.log(\"data: \", data);
\n

print log 的順序會是：

\n
try\nfinally\ntrue
\n

可以看到 try block 的return 最後才被執行

\n

如果把上面例子的 return “true” 改成 throw “123”：

\n
const fn = () => {\n  try {\n    console.log(\"try\");\n    throw \"123\";\n  } finally {\n    console.log(\"finally\");\n  }\n};\n\nconst data = fn();\nconsole.log(\"data: \", data);
\n

print log 的順序會是：

\n
try\nfinally\nError: 123
\n

結果差不多，可以看到 throw 錯誤之前，finally block 會先被執行

\n

回到原文中的例子：

\n
const cleanup = () =>\n  new Promise((resolve) => {\n    console.log(\"resolve\");\n    resolve();\n  });\n\nconst fn = async () => {\n  try {\n    console.log(\"try\");\n    return \"true\";\n  } finally {\n    console.log(\"finally\");\n    await cleanup();\n  }\n};\n\nfn().then((data) => {\n  console.log(\"data: \", data);\n});
\n

print 出 log 的順序則是：

\n
try\nfinally\nresolve\ndata:  true
\n

很明顯可以看到 finally block 的 promise 執行完之後，才執行 return “true”

\n

可以用什麼替代原文作者的寫法？

\n

只在 finally block 寫 control-flow statement（not perfect）

\n
const fn = async () => {\n  try {\n    console.log(\"try\");\n  } finally {\n    cleanup();\n    return \"true\"\n  }\n};
\n

有網友提供這樣的寫法，可以在 cleanup 後接著 return value，一石二鳥。不過如果今天 try block 裡面需要 await data 或做其它事，必須還得在外面 assign 一個變數，才能讓 finally block return data 出去，像這樣：

\n
const fn = async () => {\n  let data;\n  try {\n    console.log(\"try\");\n    data = await doSomething();\n  } finally {\n    cleanup();\n    return data;\n  }\n};
\n

另外就是，假如希望 catch block 能 throw error 或 return error 到外面去，讓外部知道有 error，這種寫法可能就不適合了。

\n

老老實實地在 try…catch 執行完的下一行做 cleanup

\n
const cleanup = () =>\n  new Promise((resolve) => {\n    console.log(\"resolve\");\n    resolve();\n  });\n\nconst fn = () => {\n  try {\n    console.log(\"try\");\n    return \"true\";\n  } catch (error) {\n    console.log(\"error: \", error);\n  }\n};\n\nfn();\ncleaup();
\n

夠粗暴，且簡單與直覺。

\n

用 .finally()

\n
const cleanup = () =>\n  new Promise((resolve) => {\n    console.log(\"resolve\");\n    resolve();\n  });\n\nconst fn = async () => {\n  try {\n    console.log(\"try\");\n    return \"true\";\n  } catch (error) {\n    console.log(\"error: \", error);\n  }\n};\n\nfn()\n  .then((data) => {\n    console.log(\"data: \", data);\n  })\n  .finally(() => {\n    console.log(\"finally\");\n    cleanup();\n  });
\n

可以用 .finally() 的方式來做取代，這種方式基本上可以確保 return 值之後，才會進到 .finally()，缺點就是寫起來會變得又臭又長?

\n

要寫得比較完整的話，可以再加上 .catch()

\n
const cleanup = () =>\n  new Promise((resolve) => {\n    console.log(\"resolve\");\n    resolve();\n  });\n\nconst fn = async () => {\n  try {\n    console.log(\"try\");\n    return \"true\";\n  } catch (error) {\n    throw error;\n  }\n};\n\nfn()\n  .then((data) => {\n    console.log(\"data: \", data);\n  })\n  .catch((error) => {\n    console.log(\"error: \", error);\n  })\n  .finally(() => {\n    console.log(\"finally\");\n    cleanup();\n  });
\n

另一個比較常見的寫法：用 Promise 包著

\n
const cleanup = () =>\n  new Promise((resolve) => {\n    console.log(\"resolve\");\n    resolve();\n  });\n\nconst fn = () => {\n  return new Promise((resolve, reject) => {\n    try {\n      console.log(\"try\");\n      resolve(\"true\");\n    } catch (error) {\n      reject(error);\n    }\n  });\n};\n\nfn()\n  .then((data) => {\n    console.log(\"data: \", data);\n  })\n  .catch((error) => {\n    console.log(\"error: \", error);\n  })\n  .finally(() => {\n    console.log(\"finally\");\n    cleanup();\n  });
\n

千萬別這麼做

\n

看到原文串有人舉一個例子表示千萬別這麼做，否則會討厭你自己

\n
function tryMe() {\n  console.log(\"1. start!\");\n  try {\n    return \"2. return from try\";\n  } catch (error) {\n    return \"3. return from catch\";\n  } finally {\n    return \"4. return from finally\";\n  }\n}\n\nconsole.log(tryMe());
\n

log 的順序將會是：

\n
1. start!\n2. return from finally
\n

沒錯，直接略過 try 跟 catch block

\n

即使你今天在 try block 丟出一個錯誤，也不會 return catch block 的字串

\n

總結

\n

finally block 目前看起來存在著些違反直覺的機制，可能會在無意中寫出令你驚喜的情況，看起來能不用就不用，似乎也沒有非得使用的必要。若仍要使用，請絕對要小心服用，並有意識地在知道 finally block 的機制下去做使用。

\n

網友分享另一個變形題

\n
const xit = async () => {\n  const zit = () => {\n    console.log(\"second\");\n    return \"fourth\";\n  };\n\n  try {\n    await new Promise((resolve) => setTimeout(resolve), 100);\n    console.log(\"first\");\n    return zit();\n  } finally {\n    console.log(\"third\");\n  }\n};\n\n(async () => {\n  const data = await xit();\n  console.log(\"data: \", data);\n})();
\n

猜猜答案會是什麼？

\n
\n Answer\n
first\nsecond\nthird\ndata:  fourth
\n

(ref)

\n
", "url": "https://boundarylesstacks.com/post/2025-the-finally-behavior-in-try-catch-of-javascript/", "title": "The `finally` behavior in `try…catch` of JavaScript", "summary": "finally behavior in JavaScript", "date_modified": "2025-04-19T00:00:00.000Z", "date_published": "2025-04-19T00:00:00.000Z", "author": { "name": "RZ Huang", "url": "https://boundarylesstacks.com/about/" } }, { "id": "https://boundarylesstacks.com/post/2025-test-first-post/", "content_html": "

Hello everyone, this is the first post of the blog

", "url": "https://boundarylesstacks.com/post/2025-test-first-post/", "title": "First post", "summary": "Test", "date_modified": "2025-01-01T00:00:00.000Z", "date_published": "2025-01-01T00:00:00.000Z", "author": { "name": "RZ Huang", "url": "https://boundarylesstacks.com/about/" } } ] }