Bagaimana untuk Memaparkan Spinner Semasa Panggilan API Berlangsung Lama di Blazor?

Memaparkan Tunggu atau Spinner Semasa Panggilan API dalam Blazor

Blazor membolehkan anda memaparkan maklum balas kepada pengguna semasa panggilan API berjalan lama menggunakan isyarat visual seperti kursor tunggu atau imej pemutar.

Isu:

Dalam aplikasi Blazor anda, anda cuba untuk gunakan CSS untuk memaparkan kursor berputar semasa panggilan API. Walau bagaimanapun, kandungan halaman tidak dimuat semula sehingga panggilan selesai.

Penyelesaian:

Pilihan 1: Menggunakan Tugasan. Kelewatan(1)

• Buat kaedah tak segerak.
• Gunakan await Task.Tunda(1) atau tunggu Task.Yield(); untuk memaksa UI mengemas kini sebelum panggilan API selesai.

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    
}

Pilihan 2: Menggunakan Task.Run() (Bukan untuk WebAssembly)

• Jika kaedah LongOperation() anda tidak segerak, sertakan dalam Tugasan dan tunggu menggunakan Task.Run().

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

Kesan

Nota untuk Prapaparan Sebelah Pelayan:

Dalam apl Pelayan Blazor, pemutar tidak akan muncul kerana prapemarahan. Untuk menjadikannya kelihatan, lakukan operasi panjang dalam OnAfterRender.

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

Untuk lebih banyak contoh dan maklumat, rujuk projek sumber terbuka seperti BlazorPro.Spinkit.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Spinner Semasa Panggilan API Berlangsung Lama di Blazor?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!