如何在 Blazor 中正确创建异步方法？

Question

我正在尝试在 Blazor 中创建一个异步方法，该方法允许我异步运行计算量大的代码，然后在完成后更新组件，同时保持页面响应。这个问题与其他关于 Blazor 中异步的问题之间的区别在于，我正在创建一个需要很长时间的方法，而不是使用诸如 HttpClient 的下载方法之类的方法。

组件：

page.blazor

@inject ClassA classA

<button class="btn btn-primary" @onclick="@doWork">Do Work</button>
<Text>@log</Text>

@code {
   async Task doWork()
   {
      log = await classA.doWork();
   }
}

C# 类

public class ClassA
{ 
   public async Task<string> doWork()
   {
      ClassB classB = new ClassB();
      var result = await classB.Execute();
      return result;
   }
}

public class ClassB
{ 
   // This method is meant to take a long time and execute asynchronously
   public async Task<string> Execute()
   {
      string k = "";
      for (int i = 0; i < 10000000; i ++) 
      {
         k = i.ToString();
      }
      return k;
   }
}

注意：如果我将 page.blazor 中的代码更改为

@code {
   async Task doWork()
   {
        await Task.Delay(10000);
        log = "Done";
   }
}

它工作正常。

Answer 1

更新的答案 - 请参阅@HenkHolterman 的评论。

此代码块不正确。在 Visual Studio 中，您将收到如下所示的警告。

   public async Task<string> Execute()
   {
      string k = "";
      for (int i = 0; i < 10000000; i ++) 
      {
         k = i.ToString();
      }
      return k;
   }

应该是这样的：

   public Task<string> Execute()
   {
      string k = "";
      for (int i = 0; i < 10000000; i ++) 
      {
         k = i.ToString();
      }
      return Task.FromResult(k);
   }

您不会通过将其包装在 Task 中并告诉它运行 async 来制作异步内容。 Execute 是包装在 Task 中的同步代码块。没有让步，它只是阻塞线程直到完成 - 就像 Thread.Sleep(1000)。

目前在 Blazor Web Assembly 中有 ONE 线程。你可以在你的代码上做你喜欢的所有等待。除非有真正的收益，否则 UI 没有线程时间，也没有更新：这一切都发生在最后！

另一方面，Task.Delay(xxx) 产生。简单来说，任务被线程调度器向下移动到队列中，让队列中的其他代码执行。

这是你的迭代器的一个版本。

        public async Task<string> Execute()
        {
            string k = "";
            var x = 0;
            for (int i = 0; i < 10000000; i++)
            {
                k = i.ToString();
                if (x > 100)
                {
                    await Task.Delay(1);
                    x = 0;
                }
                x++;
            }
            return k;
        }

这是一个测试页面：

@page "/"

<PageTitle>Index</PageTitle>

<h1>Async Test</h1>

<div class="p-2">
    Time: @message
</div>
<div class="p-2">
    <button class="btn btn-primary" disabled=@go @onclick=ButtonClick>@buttonMessage</button>
</div>
<div class="p-2">
    <button class="btn btn-secondary" @onclick=UpdateTime>Get Time</button>
</div>


@code {
    private bool go = false;

    private string disabled = "";

    private string buttonMessage => go ? "Running" : "Go";


    private string message = DateTime.Now.ToLongTimeString();

    private void UpdateTime()
    {
        message = DateTime.Now.ToLongTimeString();
    }

    private async Task ButtonClick()
    {
        go = true;
        await this.Execute();
        go = false;
    }

    public async Task<string> Execute()
    {
        string k = "";
        var x = 0;
        for (int i = 0; i < 100000000; i++)
        {
            k = i.ToString();
            if (x > 100)
            {
                await Task.Delay(1);
                x = 0;
            }
            x++;
        }
        return k;
    }
}