Blazor JS Interop 异步调用和回调处理

畫卷琴夢 2025-12-26 00:00:00 次阅读

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 不复杂但容易忽略上下文切换和资源释放，按规范走，问题很少。