Blazor에서 API 호출 중 UI 차단을 방지하려면 어떻게 해야 합니까?

Blazor에서 API 호출 중 비차단 UI 업데이트

Blazor 애플리케이션에서 API를 호출할 때 작업이 다음과 같다는 것을 사용자에게 피드백을 제공하는 것이 중요합니다. 진행중. 이는 스피너 또는 대기 커서를 표시하여 수행할 수 있습니다.

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

이 방법에는 비동기 작업을 실행하고 Wait Task.Delay(1)를 포함하는 방법이 포함됩니다. 그 안에. 이를 통해 장기 실행 작업이 시작되기 전에 변경 사항을 플러시하고 UI를 업데이트할 수 있습니다.

private async Task AsyncLongFunc()
{
    spinning = true;
    await Task.Delay(1); // Flushing changes
    LongFunc(); // Non-async code
    currentCount++;
    spinning = false;
    await Task.Delay(1); // Flushing changes again
}

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

이것은 접근 방식에는 장기 실행 작업을 작업 내에 포함시켜 기본 작업을 차단하지 않도록 하는 것이 포함됩니다. thread.

async Task AsyncLongOperation()
{
    spinning = true;
    await Task.Run(() => LongOperation()); // Enclose in a task
    currentCount++;
    spinning = false;
}

효과 및 제한

두 방법 모두 API 호출 중에 스피너를 효과적으로 표시합니다. 그러나 Blazor Server 앱에서 서버 측 사전 렌더링이 활성화된 경우 스피너가 표시되지 않을 수 있습니다. 이 문제를 해결하려면 OnAfterRender 이벤트에서 긴 작업을 처리해야 합니다.

샘플 프로젝트

Blazor 애플리케이션에서 스피너를 구현하기 위한 더 많은 예제와 기술을 보려면 오픈 소스 프로젝트 BlazorPro.Spinkit을 살펴보세요.

위 내용은 Blazor에서 API 호출 중 UI 차단을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!