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

Question

我正在从 asp.net mvc 切换到 blazor webassembly。
在 mvc 中，当我需要 post 控制器时，我正在使用 jQuery ajax post 例如

$.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 中我需要 post 数据我正在使用 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# 和异步方法？我的图形用户界面被冻结，直到 post 结束，因为我等待了两次？我如何在 blazor webassembly 中使用 Http 客户端在 gui 中执行 post 数据和显示结果，而不会在 posting 数据和等待结果期间冻结 guid？

Answer 1

如果您使用异步，应该没有任何问题。确实JS和WebAssembly是单线程的，但这跟能不能用没关系
异步。当您运行您的代码并使用 await 关键字时，您的代码的执行将交给继续执行诸如重新呈现 UI 等操作的调用代码。当您使用异步方法时，例如 PostAsJsonAsync returns，当前方法的执行将继续...

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

Does this mean that regarding gui there is no difference between ajax onsuccess event call back and awaiting to get results in Httpclient on WebAssembly?

从某种意义上说是的...事实上，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 中的回调、承诺和 async/await 类似于 C# 中的任务和异步等待

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

Http client in Blazor webassembly on success post as it was in jQuery

http-post

async-await

blazor

blazor-webassembly