Blazor webassembly 中的 Http 客户端成功发布，就像在 jQuery 中一样

Question

我正在从 asp.net mvc 切换到 blazor webassembly。
在 mvc 中，当我需要向控制器发布内容时，我使用的是 jQuery ajax 发布，例如

$.ajax({
        method: "post",
        type: "post",
        contentType: "application/json; charset=utf-8",
        url: "../../Tabele/Clone",
        traditional: true,
        data: data,
        success: function (data, status, xhr) {
                logujError (data.msg)  
        },
        error: function (xhr) {
            console.log("puko si kod postajExtraDetalje", xhr.responseText); //,xhr.statusText, 
        }
    });

现在在 blazor 中我需要发布我正在使用 HttpClient 的数据，例如

    var response = await Http.PostAsJsonAsync<ConfigView>($"/api/Vage/Cofnig", configView);
    if (response.IsSuccessStatusCode)
    {
       var data= await response.Content.ReadFromJsonAsync<PocoMsgId>();
       logujError (data.msg)  
    }
else {
// handel error
}

我是否正确理解 C# 和异步方法，因为我在等待两次，所以我的 gui 被冻结直到帖子结束？ 如何在 blazor webassembly 中使用 Http 客户端在 gui 中发布数据和显示结果，而不会在发布数据和等待结果期间冻结 guid？

Answer 1

如果您使用的是异步，则应该没有任何问题。 JS和WebAssembly确实是单线程的，但这与使用能力无关
异步。当您运行代码并使用 await 关键字时，代码的执行将交给调用代码，该代码继续执行诸如重新渲染 UI 之类的操作。当你的异步方法，比如 PostAsJsonAsync 返回时，当前方法的执行继续......

当调用第二个方法 response.Content.ReadFromJsonAsync 时，再次将执行交给调用代码，该代码继续执行诸如重新渲染 UI 等操作。

这是否意味着关于 gui，ajax onsuccess 事件回调和等待在 WebAssembly 上的 Httpclient 中获取结果之间没有区别？

在某种意义上是的...事实上，HttpClient 服务的方法，如 PostAsJsonAsync、GetAsJsonAsync 是 ajax 调用，因为这些方法正在实现 JavaScript Fetch Api（在 Blazor webassembly 中，对吗？）。

但这是 C# + .Net，而不是 JavaScript。您的重点应该放在 .Net 中异步的使用、如何使用它以及为什么使用它。我将使用默认模板的 FetchData 页面中的代码进行演示：

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    // This method runs asynchronously. It is executed on the 
    // creation of a component.
    protected override async Task OnInitializedAsync()
    {
        // When code execution reaches this line, the await 
        // instruction calls the GetFromJsonAsync method, and  
        // then yield execution to the calling code. While awaiting 
        // for the method to return, Blazor starts rendering the 
        // component, which is why you must ensure that the variable
        // forecasts is not null (`@if (forecasts == null)`). At this 
        // time the variable forecasts is null, so no rendering 
        //occurs here...
        // When GetFromJsonAsync returns, the variable forecasts
        // is assigned the returned value (WeatherForecast[]),
        // and a second attempt is made to re-render the component,
        // this time successfully.
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>
    }
}

但在执行 ajax 调用时，此处启用并需要异步。异步是必不可少的，尤其是在您进行长时间运行的调用时

您可以概括 JavaScript 中的回调、promise 和 async/await 类似于 C# 中的 Task 和 async await