17370845950

Blazor JS Interop 支持异步调用与回调：.NET→JS 通过 InvokeAsync 等待 JS Promise；JS→NET 通过 DotNetObjectReference 暴露标记 [JSInvokable] 的 async Task 方法，需注意资源释放、线程安全与序列化限制。

Blazor 中的 JS Interop 支持异步调用和回调，但需注意执行上下文、生命周期和线程模型——JS 函数本身是同步的，但可通过 Promise 包装实现异步语义；.NET 端则用 Task 或 ValueTask 接收结果，框架自动处理跨线程调度。

异步 JS 函数调用（.NET → JS）

在 JS 端返回 Promise，.NET 端用 InvokeAsync 调用即可自动等待：

• JS 文件中导出函数需显式返回 Promise，例如：
  

  window.myApi = {
    fetchData: () => fetch('/api/data').then(r => r.json())
  };

• C# 中调用：
  

  var data = await JSRuntime.InvokeAsync("myApi.fetchData");

• 若 JS 函数可能抛错，建议用 try/catch 包裹，或在 JS 层统一 reject 错误，Blazor 会转为 .NET 异常

JS 主动回调 .NET 方法（JS → .NET）

通过 DotNetObjectReference 将 .NET 实例暴露给 JS，支持异步方法引用：

• 在组件中创建引用并传入 JS：
  

  private DotNetObjectReference objRef;
  protected override void OnInitialized() {
    objRef = DotNetObjectReference.Create(this);
    JSRuntime.InvokeVoidAsync("registerCallback", objRef);
  }

• JS 中保存引用，后续调用：
  

  window.registerCallback = (dotNetRef) => {
    window.handleEvent = () => dotNetRef.invokeMethodAsync('OnJsEvent', 'data');
  };

• .NET 方法需标记为 [JSInvokable]，返回 Task 即可被 JS 异步调用：
  

  [JSInvokable]
  public async Task OnJsEvent(string payload)
  {
    await DoSomethingAsync(payload);
    StateHasChanged(); // 如需更新 UI
  }

清理与生命周期注意事项

未正确释放 DotNetObjectReference 会导致内存泄漏，尤其在组件销毁时：

• 务必在 Dispose 或 IAsyncDisposable 中调用 objRef?.Dispose()
• JS 端不应长期持有 .NET 引用；如需解绑，可在 JS 中设为 null，并在 .NET 端检查 this.IsDisposed
• 避免在 JS 回调中重复调用已释放的引用；推荐在 JS 调用前加存在性判断，或使用弱引用模式封装

常见陷阱与建议

实际开发中容易忽略的细节：

• UI 更新必须在渲染器线程：JS 回调触发的 StateHasChanged() 是安全的，但手动启新线程后调用需用 InvokeAsync 包裹
• 序列化限制：JS 传入 .NET 的参数必须可 JSON 序列化；复杂对象建议先 stringify 再解析，或用 IJSInProcessRuntime（仅限 Server-side）绕过序列化
• 调试技巧：启用浏览器 DevTools 的 “Async stack traces”，并在 JS 中加 console.trace() 定位 Promise 链断点

基本上就这些。异步 JS Interop 不复杂但容易忽略上下文切换和资源释放，按规范走，问题很少。