如何在JS/TS初始化阶段优雅实现异步函数转同步执行？

背景说明 #

仅在启动/初始化阶段有此需求，并非试图打破异步编程模型。已研究过JS的Promise及async/await，也了解过相关讨论。

Kotlin 示例代码 #

Kotlin中可以通过runBlocking轻松实现初始化阶段的异步代码同步调用：

suspend fun readFile(path: Path) = withContext(Dispatchers.IO) {
  Files.readString(path)
}!!

fun main() {
  val runtimeInfo = runBlocking {
    val config = readFile(Paths.get("config.properties")) // 挂起异步代码
    return@runBlocking MyFramework.RuntimeInfo.of(config) // 另一处异步代码
  }
  MyFramework.service(runtimeInfo) {
    withContext(Dispatchers.IO) {
      Files.readString(Paths.get("foo-bar"))
    }
  }
}

JS/TS（Tauri + React）当前实现的痛点 #

目前的实现嵌套Promise，容易出错（比如拼写错误、遗漏处理），体验很差：

new Promise((resolve, reject) => {

  // Tauri invoke 返回一个 promise
  invoke('read_file', {path: 'config.json', defaultConfig: '{"version":1}'})
    .then(it => resolve(it))
    .catch(it => reject(it));
  // ↑ 这里很容易写错（拼写/遗漏），而且Promise套Promise的写法体验极差

}).then(it => {

  const runtime = something(it as string);

  ReactDOM.createRoot(document.getElementById("root")!!).render(
    <React.StrictMode>
      <App runtime={runtime}/>
    </React.StrictMode>
  );

}).catch((reject) => {
  alert(reject);
});

问题 #

在JS/TS中是否存在优雅的方式实现这种异步/同步转换？

首先明确：JS/TS本身没有像Kotlin runBlocking那样直接将异步代码同步阻塞的原生API，但在初始化场景下，有几种更优雅的写法可以替代嵌套Promise的糟糕体验：

1. 使用async/await扁平化代码 #

直接用async函数包裹初始化逻辑，避免Promise嵌套，代码更清晰：

async function initApp() {
  try {
    // 直接await Tauri的异步调用，无需手动套Promise
    const config = await invoke('read_file', {path: 'config.json', defaultConfig: '{"version":1}'});
    const runtime = something(config as string);
    
    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <App runtime={runtime}/>
      </React.StrictMode>
    );
  } catch (err) {
    alert(err);
  }
}

// 启动时调用初始化函数
initApp();

这种写法完全消除了Promise嵌套，逻辑线性清晰，也不容易遗漏错误处理。

2. 利用IIFE（立即执行异步函数） #

如果不想单独定义函数，可以用立即执行的异步函数，写法更紧凑：

(async () => {
  try {
    const config = await invoke('read_file', {path: 'config.json', defaultConfig: '{"version":1}'});
    const runtime = something(config as string);
    
    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <App runtime={runtime}/>
      </React.StrictMode>
    );
  } catch (err) {
    alert(err);
  }
})();

3. 关于"同步阻塞"的补充 #

如果确实需要完全同步阻塞（比如某些极端初始化场景），JS/TS原生没有支持——前端环境下同步阻塞异步操作会卡死主线程，Tauri即便有Node.js环境，初始化阶段用await的写法也已经足够优雅，完全没必要强行同步阻塞。

总结：初始化阶段用async/await扁平化异步逻辑，就是JS/TS里最优雅的替代方案，既符合异步编程模型，又避免了嵌套Promise的混乱。

内容的提问来源于stack exchange，提问作者Alceatraz