Blazor UI 更新异步无效与异步任务

Question

Blazor 新手，

我正在通过 API 使用登录，但是我注意到 UI 不会自动更新。

例如：当我第一次登录无效用户时，错误消息不会显示，但在第二次尝试时它会正确显示。不知何故有 1 次点击延迟。

  private async void DoLogin()
  {
        var result = await API.LoginAsync(username, password);

        if (result.ResultID == 0)
        {

        }
        else
            ErrorMessage = result.ErrorMessage;
  }

剃刀组件：

当我把它改成

  private async Task DoLogin()
  {
        var result = await API.LoginAsync(username, password);

        if (result.ResultID == 0)
        {

        }
        else
            ErrorMessage = result.ErrorMessage;
  }

它按预期工作。

谁能帮我点灯

在方法签名中使用 async void 和 async Task 有什么区别？
为什么 async void 不立即更新 UI？

Answer 1

What's the difference using async void and async Task in Method signature?

async Task（也只是 Task）return 是可等待的，Blazor 将使用它。
async void 方法是即发即弃。应尽可能避免。

Why does the async void doesn't update the UI immediately?

因为它在未被观察到的情况下执行。在这种情况下，它与按钮之后完成的代码并行运行（但慢于）。因此 UI 在之前 LoginAsync() returns.

更新

Answer 2

[礼貌]您只需要了解异步编程即可。发生的事情是 UI 渲染在您的异步任务之前完成。 void 例程 DoLogin 等待 API 调用完成，但调用堆栈上方的方法没有等待，await 没有任务。当 API 调用放弃控制时，它会返回调用堆栈。 DoLogin 在完成方法中的其余代码之前等待任务完成，但让步给调用方法，然后调用方法继续调用 DoLogin- 在您的情况下呈现您的控件。

async Void Method 模式是即发即忘，您没有任务参考等待。 async Task Method 表示您可以在调用例程中 await Method。您可以在我的一篇代码项目文章中阅读更多内容 here。

Blazor UI 更新异步无效与异步任务

Blazor UI Update Async void vs Async Task

blazor

blazor-client-side

blazor-webassembly