Azure DevOps VSTS扩展动态上下文菜单子项首次点击不加载问题

问题根因 #

你现在的实现把主菜单项的返回逻辑完全绑定到了异步API调用的Promise结果，Azure DevOps上下文菜单的首次渲染逻辑不会等待异步getMenuItems的返回结果，第一次点击菜单时API还没返回，菜单渲染完成后就没有你的「view test result」选项；第二次点击时之前的异步结果已经返回，菜单就能正常加载。

解决方案 #

推荐采用「主菜单同步返回+子菜单异步加载」的实现方式，完全符合你要的hover展开子菜单的交互，也能解决首次不显示的问题：

1. 修改menuHandler的getMenuItems逻辑，同步返回主菜单项，不要等待测试配置接口的调用结果
2. 把子菜单的加载逻辑放到主菜单项的childItemsProvider属性中，hover主菜单时平台会自动触发这个异步方法加载子项

修改后的代码示例

menuHandler= (context: any) : IContributedMenuSource => {
    return <IContributedMenuSource> {
        getMenuItems: (actionContext: any)  => {
            // 直接同步返回主菜单项，首次点击就能渲染
            return [{
                id: "view-test-result-root",
                text: "view test result",
                group: "contributed",
                // 标记有子菜单，hover时会触发childItemsProvider
                hasChildren: true,
                // 子菜单异步加载逻辑，和你原有逻辑完全兼容
                childItemsProvider: async () => {
                    const subMenus = await this.buildConfigurationMenu(actionContext);
                    return this.buildSubMenus(subMenus);
                }
            }];
        }
    };
}

你只需要把原来的buildMainMenuWithPromise拆成两部分：主菜单固定结构直接返回，子菜单构造逻辑抽成单独的buildSubMenus方法即可。

可选规避方案 #

如果因为业务逻辑无法拆分加载，也可以用以下方法临时解决：

• 在扩展初始化阶段（VSS.init之后）就预加载通用的测试配置数据做缓存，菜单渲染时直接读缓存，不用实时调用API
• 升级VSS.SDK到最新版本，新版本对异步返回的getMenuItems的支持更完善，部分场景下可以解决首次不渲染的问题

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