Blazor에서 API 호출 중에 로딩 표시기를 표시하는 방법은 무엇입니까?

Blazor에서 API 호출 중 로딩 표시기 표시

Blazor에서 시간이 걸릴 수 있는 API 호출을 수행할 때 피드백을 제공하는 것이 중요합니다. 사용자. 일반적으로 사용되는 표시기는 대기 커서 또는 스피너 이미지입니다. Blazor에서 이를 달성하기 위해 몇 가지 옵션을 사용할 수 있습니다.

옵션 1: Task.Delay(1) 사용

이 방법에는 비동기 작업을 사용하고 작업 대기를 호출하는 작업이 포함됩니다. .지연(1); 또는 Task.Yield()를 기다립니다. 각 UI 업데이트 후. 이렇게 하면 변경 사항이 플러시되고 스피너가 표시될 수 있습니다.

옵션 2: Task.Run() 사용(WebAssembly용 아님)

이 옵션에는 긴 Task.Run(()=> LongOperation());을 사용하여 작업에서 작업을 실행합니다. 이렇게 하면 작업이 실행되는 동안 기본 스레드가 차단되는 것을 방지할 수 있습니다.

서버 측 사전 렌더링에 대한 Spinner의 효과

페이지가 사전 렌더링되는 Blazor Server 앱에서 , OnAfterRenderAsync에서 긴 작업이 수행되지 않으면 스피너가 표시되지 않습니다. OnInitializedAsync 대신 이 수명 주기 방법을 사용하면 서버 측 렌더링이 지연되지 않습니다.

샘플 코드

// Don't do this
//protected override async Task OnInitializedAsync()
//{
//    await LongOperation();
//}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {            
        await Task.Run(()=> LongOperation());//<--or Task.Delay(0) without Task.Run
        StateHasChanged();
    }
}

추가 리소스

• [BlazorPro.Spinkit](https://github.com/EdCharbeneau/BlazorPro.Spinkit)는 스피너 생성을 위한 샘플 코드가 포함된 라이브러리를 제공합니다.

위 내용은 Blazor에서 API 호출 중에 로딩 표시기를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!