Blazor Timer 调用异步 API 任务来更新 UI

Question

我正在 Blazor 服务器端页面中设置一个计时器。目标是每 x 秒调用一次 API，并根据返回值更新 UI。
我得到了这个代码:

private string Time { get; set; }

protected override void OnInitialized()
{
    var timer = new System.Threading.Timer((_) =>
    {
        Time = DateTime.Now.ToString();
        InvokeAsync(() =>
        {
            StateHasChanged();
        });
    }, null, 0, 1000);
    base.OnInitialized();
}

这很好用。 UI 每秒更新一次新的时间值。但是，我不知道如何调用异步任务来获取值。我想替换该行:

Time = DateTime.Now.ToString();

用一行调用以下函数:

private async Task<string> GetValue()
{
    var result = await _api.GetAsync<StringDto>("/api/GetValue");
    return result.Text;
}

我试过这条线:

Time = GetValue().Result;

但我收到以下错误:

The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.

我需要做什么来调用异步方法？
谢谢一堆!

Answer 1

您可能不想 Invoke() 和 GetValue()，这毫无意义。您可以像这样实现计时器:

System.Threading.Timer timer;
protected override void OnInitialized()
{
    timer = new System.Threading.Timer(async _ =>
    {
        Time = await GetValue();
        await InvokeAsync(StateHasChanged);
    }, null, 0, 1000);
}

我使用了一个字段来存储 Timer 因为你应该处理它，将它添加到 Razor 部分:

@implements IDisposable

这对代码:

public void Dispose()
{
    timer?.Dispose();
}