如何在Mithril组件的view()中调用异步函数并使用其返回值？

Mithril的view()函数必须同步返回虚拟DOM节点，改成async view()后，函数会返回Promise而非vnode，这就是它无法正常运行的核心原因。不能直接在view里await异步函数，得换个思路：把异步逻辑放到组件的生命周期钩子中，将结果存入组件状态，再让view基于状态做同步渲染。

修改后的组件示例 #

const welcomePageComponent = {
  messages: {
    msg1: 'message if logged in',
    msg2: 'message if not logged in',
    loading: 'Loading login status...'
  },
  oninit(vnode) {
    // 初始化状态：null代表加载中，未确定登录状态
    vnode.state.isLoggedIn = null;
    // 调用异步函数并更新状态
    getIsloggedIn().then(isLoggedIn => {
      vnode.state.isLoggedIn = isLoggedIn;
      // 显式触发重渲染（Mithril多数场景会自动处理，显式调用更稳妥）
      m.redraw();
    }).catch(err => {
      console.error('Failed to check login status:', err);
      // 错误时默认设为未登录
      vnode.state.isLoggedIn = false;
      m.redraw();
    });
  },
  view({ state }) {
    // 根据状态切换显示内容
    let myMsg;
    if (state.isLoggedIn === null) {
      myMsg = this.messages.loading;
    } else {
      myMsg = state.isLoggedIn ? this.messages.msg1 : this.messages.msg2;
    }
    
    return m('#welcome', [
      m('.semi-trans-blk-panel', [
        m('.welcome-wrapper', [
          m('h4.welcomeMsg', [
            m('br'), myMsg  
          ])
        ])
      ])
    ]);
  }
}

关键逻辑说明 #

• 生命周期钩子：用oninit（或onmount）在组件初始化时执行异步登录状态检查，避免阻塞view渲染。
• 状态管理：用isLoggedIn = null标记加载状态，给用户显示加载提示，避免界面空白或异常。
• 重渲染控制：异步操作完成后调用m.redraw()确保组件更新视图，Mithril在Promise回调中通常会自动触发重绘，但显式调用可覆盖特殊场景。

简化版（Mithril 2.x+支持async钩子） #

如果你的项目使用Mithril 2.x及以上版本，可以用async/await简化oninit代码：

oninit: async (vnode) => {
  vnode.state.isLoggedIn = null;
  try {
    vnode.state.isLoggedIn = await getIsloggedIn();
  } catch (err) {
    console.error('Failed to check login status:', err);
    vnode.state.isLoggedIn = false;
  }
  // 无需手动调用m.redraw()，Mithril会自动处理async钩子后的重绘
}

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