Menjalankan Fungsi Apabila Blok #await diselesaikan dalam Svelte(Kit)

Langkau Ke Kandungan:

• Mengenai blok #menunggu secara ringkas
• Jalankan (cetuskan) fungsi apabila blok #await menyelesaikan atau menolak
• Betulkan teks yang tidak ditentukan atau sebarang teks yang dikembalikan muncul dalam penyemak imbas
  • 1. Kaedah 1 (Kembalikan rentetan kosong):
  • 2. Kaedah 2 (Sembunyikan teks yang dikembalikan daripada fungsi dalam UI dengan CSS.)
    • PS: Perlu menggunakan SvelteKit Dev? Hubungi saya

---

Mengenai blok #menunggu dalam svelte

Blok #await dalam bentuk langsing sangat berguna untuk mengendalikan data tak segerak:

<script>
import Loader from "$components/forms/Helpers/Loader.svelte";

export let data;
// let's say data.myPromise is a promise.
</script>

{#await data.myPromise}
<!-- This is what shows while the promise is pending -->
<Loader />

{:then results}
<!-- Shows this if/when the promise resolves successfully -->
{#each results as result}
<li>{result}</li>
{/each}

{:catch error}
<!-- Shows this if/when the promise rejects -->
<p class="text-red">{error?.message ?? "Something went wrong"}</p>
{/await}

Ini pada asasnya bagaimana blok #await berfungsi dengan langsing. Ia memaparkan kandungan yang berbeza berdasarkan keadaan janji: penunjuk pemuatan semasa belum selesai, keputusan apabila diselesaikan dan mesej ralat jika ditolak.

Tetapi katakan saya mahu fungsi tertentu berjalan apabila janji telah diselesaikan atau ditolak (seperti roti bakar).

---

Jalankan (cetuskan) fungsi apabila blok #await menyelesaikan atau menolak

Berikut ialah cara anda boleh menjalankan fungsi tertentu apabila janji diselesaikan atau ditolak:

<script>
import { toast } from "svelte-sonner";

/**
* Displays a success toast
* @param {number | string} resultsLength - Number of results
*/
function showSuccess (resultsLength) {
toast.success(`${resultsLength} result${resultsLength > 1 ? "s" : ""} retrieved!`)
}

/**
* Displays an error toast
* @param {string} [errorMessage] - Error message to display
*/
function showError(errorMessage) {
toast.error(`An Error Occured`, {
message: errorMessage ?? "Unknown Error"
})
}

</script>

{#await data.myPromise}
<!-- Displays while the promise is pending -->
<Loader />

{:then results}
<!-- Run showSuccess when the promise resolves -->
{showSuccess(results.length)}

  <!-- Display results -->
{#each results as result}
<li>{result}</li>
{/each}

{:catch error}
<!-- Run (trigger) showError when the promise rejects -->
{showError(error.message)}

  <!-- Display error message -->
<p class="text-red">{error?.message ?? "Something went wrong"}</p>
{/await}

Kini, fungsi kami akan berjalan apabila blok kod dicapai.

• showSuccess dipanggil apabila janji diselesaikan, dengan bilangan keputusan sebagai hujah.
• showError dicetuskan jika janji ditolak, memaparkan mesej ralat tersuai.

---

Satu perkara lagi...

Betulkan teks yang tidak ditentukan atau sebarang teks yang dikembalikan muncul dalam penyemak imbas

Apabila fungsi ini dijalankan, apa sahaja teks yang dikembalikan akan dipaparkan dalam penyemak imbas, kerana ia adalah penyelesaian. Sintaks yang kami gunakan biasanya bertujuan untuk menunjukkan rentetan/nombor yang dikembalikan dalam penyemak imbas. Walaupun tidak mengembalikan apa-apa akan mengembalikan lalai yang tidak ditentukan. Dan rentetan ini (yang biasanya tidak masuk akal), akan dipaparkan kepada pengguna akhir. Sesuatu seperti ini:

Tidak masuk akal kepada pengguna akhir ?‍♂️?‍♀️

Jadi, pastikan anda mengembalikan rentetan kosong atau bungkus fungsi dalam blok tersembunyi:

1. Kaedah 1 (Kembalikan rentetan kosong):

Dalam kaedah ini, kami akan memastikan untuk mengembalikan rentetan kosong daripada fungsi kami.

<script>
import { toast } from "svelte-sonner";

/**
* @param {number | string} resultsLength
* @returns {string} - Empty string to avoid display issues
*/
function showSuccess (resultsLength) {
toast.success(`${resultsLength} result${resultsLength > 1 ? "s" : ""} retrieved!`)
return ""; // Return an empty string
}

/**
* @param {string} [errorMessage]
* @returns {string} - Empty string to avoid display issues
*/
function showError(errorMessage) {
toast.error(`An Error Occured`, {
message: errorMessage ?? "Unknown Error"
})
return ""; // Return an empty string
}

</script>

{#await data.myPromise}
  <!-- Display this while the promise is pending -->
<Loader />

{:then results}
<!-- Run showSuccess -->
{showSuccess(results.length)} <!-- Won't render any text in the UI -->

<!-- This shows if/when the promise is resolved -->
{#each results as result}
<li>{result}</li>
{/each}

{:catch error}
<!-- Run showError -->
{showError(error.message)} <!-- Won't render any text in the UI -->

<!-- This shows if/when the promise is rejected -->
<p class="text-red">{error?.message ?? "Something went wrong"}</p>
{/await}

Ini akan memastikan rentetan kosong dikembalikan.

--- Atau ---

2. Kaedah 2 (Sembunyikan teks yang dikembalikan daripada fungsi dalam UI dengan CSS.)

Dalam kaedah ini, kami akan menyembunyikan blok fungsi dalam UI sebaliknya, jadi teks yang dikembalikan disembunyikan daripada pandangan pengguna.

<script>
import { toast } from "svelte-sonner";

/**
* @param {number | string} resultsLength
*/
function showSuccess (resultsLength) {
toast.success(`${resultsLength} result${resultsLength > 1 ? "s" : ""} retrieved!`)
// No explicit return necessary. Returns undefined by default
}

/**
* @param {string} [errorMessage]
* @returns {string}
*/
function showError(errorMessage) {
toast.error(`An Error Occured`, {
message: errorMessage ?? "Unknown Error"
})
// No explicit return necessary. Returns undefined by default
}

</script>

{#await data.myPromise}
  <!-- Display this while the promise is pending -->
<Loader />

{:then results}
<div class="hidden"> <!-- Hide the function block -->
  <!-- Display results -->

{showSuccess(results.length)}
</div>

<!-- This shows if/when the promise is resolved -->
{#each results as result}
<li>{result}</li>
{/each}

{:catch error}
<div class="hidden"><!-- Hide the function call -->
{showError(error.message)}
<div>

<!-- This shows if/when the promise is rejected -->
<p class="text-red">{error?.message ?? "Something went wrong"}</p>
{/await}

<style>
  .hidden {
    display: none;
  }
</style>

Kaedah berasaskan CSS ini akan memastikan teks yang dikembalikan disembunyikan daripada penglihatan.

HappyHacking

PS: Perlu menggunakan SvelteKit Dev? Hubungi saya

Atas ialah kandungan terperinci Menjalankan Fungsi Apabila Blok #await diselesaikan dalam Svelte(Kit). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!