Blazor에서 장기 실행 API 호출 중에 사용자 피드백을 동적으로 표시하려면 어떻게 해야 합니까?

Blazor에서 API 호출 중 동적으로 사용자 피드백 표시

Blazor에서 장기 실행 API 호출을 처리하려면 다음과 같은 피드백을 사용자에게 제공해야 합니다. 대기 커서 또는 "회전자" 이미지를 표시합니다. 이 문서에서는 이를 달성하기 위한 두 가지 접근 방식을 제시합니다.

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

• 비동기 메서드 만들기
• wait Task.Delay(1) 사용; 또는 Task.Yield()를 기다립니다. 변경 사항을 플러시합니다.

private async Task AsyncLongFunc()    // this is an async task
{
    spinning=true;
    await Task.Delay(1);      // flushing changes. The trick!!
    LongFunc();               // non-async code
    currentCount++;
    spinning=false;
    await Task.Delay(1);      // changes are flushed again    
}

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

긴 작업을 포함하는 작업 생성 :

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

효과 사전 렌더링

Blazor Server 앱에서는 사전 렌더링으로 인해 스피너가 표시되지 않을 수 있습니다. 이 문제를 해결하려면 OnInitializedAsync 대신 OnAfterRender에서 긴 작업을 수행하십시오.

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

효과적인 스피너 구현에 대한 추가적인 통찰력을 얻으려면 오픈 소스 프로젝트 BlazorPro.Spinkit을 살펴보세요.

위 내용은 Blazor에서 장기 실행 API 호출 중에 사용자 피드백을 동적으로 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!