JsRuntime中InvokeVoidAsync与InvokeAsync的区别及选型建议

核心区别 #

返回值语义 #

• InvokeVoidAsync：专门用于调用无返回值的JavaScript方法，返回Task，不需要处理任何返回结果，语义上明确表示「我只执行操作，不拿结果」。
• InvokeAsync<T>：用于调用有返回值的JavaScript方法，返回Task<T>，必须指定泛型类型T来接收JS方法返回的数据，语义上是「执行后要获取结果」。

实际开发选型 #

• 选InvokeVoidAsync的场景：
  • 调用JS做纯操作类的事情，比如弹出提示框、修改DOM内容、触发前端事件、执行日志打印等，不需要获取执行后的任何数据。
• 选InvokeAsync<T>的场景：
  • 需要从JS那边拿数据回来，比如获取DOM元素的属性值、调用JS的计算函数拿结果、获取前端存储的数据等，必须通过泛型参数指定返回值的类型（要和JS返回值类型匹配，避免类型转换异常）。

代码示例 #

InvokeVoidAsync 示例（无返回值） #

// 调用JS的alert弹窗，无返回值
await JsRuntime.InvokeVoidAsync("alert", "Hello from .NET!");

// 调用自定义JS函数更新页面标题
await JsRuntime.InvokeVoidAsync("updatePageTitle", "My New Page Title");

InvokeAsync 示例（有返回值） #

// 获取当前页面的标题字符串
string currentTitle = await JsRuntime.InvokeAsync<string>("document.title");

// 调用JS的加法函数，获取整数结果
int sumResult = await JsRuntime.InvokeAsync<int>("addNumbers", 5, 3);

注意事项 #

• 如果用InvokeVoidAsync调用有返回值的JS函数，返回值会直接被丢弃，不会报错，但你拿不到想要的结果。
• 如果用InvokeAsync<T>调用无返回值的JS函数，会返回T类型的默认值（比如引用类型返回null，值类型返回0、false等），虽然不会报错，但不符合语义，没必要这么做。

内容的提问来源于stack exchange，提问作者Quy Bui Minh