javascript - Blazor JsInterop 在每个 promise 解决后调用

Question

尝试让 Blazor 服务器端应用程序正常运行。我有一个 uploader 组件，但在客户端解决每个 promise 后它不会 InvokeAsync 。它等待所有图像加载，然后调用 C# 方法。如何让它在加载每个图像后调用 C# 方法？

我知道 JavaScript 是单线程的，但我也尝试过使用 web workers 并且仍然做同样的事情。

示例 repo 可以在这里找到 https://dev.azure.com/twinnaz/BlazorUploader

正在发生的事情的 Gif。

https://imgur.com/a/aF4AQUf

如果我的想法是正确的，它应该能够从 javascript 文件并行调用 C# 方法 Async。

Answer 1

此问题与 Blazor 和 JS 有关。在 JS 上，您无需等待 GenerateImageData。

您应该改用现代的 for ... of 循环，其中 await 将按预期工作:

GetFileInputFiles = async (instance, fileInput) => {
    var files = Array.from(fileInput.files);
    for (const image of files) {
        var imagedata = await readUploadedFileAsText(image);
        console.log("sending");
        _ = await instance.invokeMethodAsync('GenerateImageData', imagedata);
        console.log("sent");
    };
};

在 Blazor 上，我建议您将 GenerateImageData 重写为:

    [JSInvokable]
    public async Task GenerateImageData(string data)
    {
        System.Console.WriteLine( "Receiving"  );
        ImageBase64.Add(data);
        await Task.Delay(1);
        StateHasChanged();
        System.Console.WriteLine( "Received"  );
    }

结果:

• 有关 JS 问题的更多详细信息:Using async/await with a forEach loop
• 有关 Blazor 问题的更多详细信息:Blazor - Display wait or spinner on API call