在Blazor（.NET7）中通过互操作加载多JavaScript脚本的问题

你的核心问题在于直接并行调用多个import会导致依赖脚本未加载完成就执行后续逻辑，进而引发错误。完全可以通过扩展现有的moduleTask来实现多脚本的可靠加载，核心思路是确保所有依赖脚本加载完成后，再执行图表相关的互操作逻辑，以下是具体实现方案：

方案一：链式加载有依赖关系的脚本 #

如果你的脚本存在依赖层级（比如必须先加载Chart.js核心，再加载自定义封装脚本），可以通过链式await保证加载顺序，将所有脚本加载逻辑封装到同一个异步方法中：

public class ChartJsInterop : IAsyncDisposable
{
    private readonly Lazy<Task<IJSObjectReference>> _moduleTask;
    private IJSObjectReference? _chartJsCoreModule;

    public ChartJsInterop(IJSRuntime jsRuntime)
    {
        _moduleTask = new Lazy<Task<IJSObjectReference>>(() => LoadAllModulesAsync(jsRuntime));
    }

    private async Task<IJSObjectReference> LoadAllModulesAsync(IJSRuntime jsRuntime)
    {
        // 先加载Chart.js核心脚本，确保后续脚本能找到Chart对象
        _chartJsCoreModule = await jsRuntime.InvokeAsync<IJSObjectReference>(
            "import", "./_content/YourComponentLib/chart.js");
        
        // 核心加载完成后，再加载自定义的Chart.js封装脚本
        return await jsRuntime.InvokeAsync<IJSObjectReference>(
            "import", "./_content/YourComponentLib/chartjs-interop.js");
    }

    // 示例：创建图表的互操作方法
    public async ValueTask<object> CreateChartAsync(ElementReference canvas, object config)
    {
        var module = await _moduleTask.Value;
        return await module.InvokeAsync<object>("createChart", canvas, config);
    }

    public async ValueTask DisposeAsync()
    {
        if (_moduleTask.IsValueCreated)
        {
            var module = await _moduleTask.Value;
            await module.DisposeAsync();
        }

        if (_chartJsCoreModule != null)
        {
            await _chartJsCoreModule.DisposeAsync();
        }
    }
}

方案二：并行加载无依赖脚本 #

如果多个脚本之间没有依赖关系（比如Chart.js核心和第三方插件），可以用Task.WhenAll并行加载以提升效率，再加载最终的自定义封装脚本：

private async Task<IJSObjectReference> LoadAllModulesAsync(IJSRuntime jsRuntime)
{
    // 并行加载无依赖的核心脚本和插件
    var coreTask = jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/YourComponentLib/chart.js");
    var pluginTask = jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/YourComponentLib/chartjs-plugin-datalabels.js");
    
    // 等待所有并行加载任务完成
    await Task.WhenAll(coreTask, pluginTask);
    
    _chartJsCoreModule = await coreTask;
    _chartJsPluginModule = await pluginTask;

    // 最后加载自定义封装脚本
    return await jsRuntime.InvokeAsync<IJSObjectReference>(
        "import", "./_content/YourComponentLib/chartjs-interop.js");
}

关键注意事项 #

• 不要在组件初始化时单独调用多个互操作加载脚本，所有脚本加载逻辑必须封装到Interop类的同一个Task中，确保只有当所有依赖就绪后，才执行图表创建等操作。
• 必须正确实现IAsyncDisposable接口，释放所有加载的JS模块引用，避免内存泄漏。
• 自定义脚本中无需额外处理加载逻辑，因为C#层已经保证了依赖脚本的加载顺序。

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