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