當 #await 區塊在 Svelte(Kit) 中解析時執行函數

跳到內容:

• 關於 svelte 中的 #await 塊
• 當 #await 區塊解析或拒絕時執行（觸發）函數
• 修復瀏覽器中顯示的未定義或任何返回的文本
  • 1. 方法一（傳回空字串）：
  • 2. 方法2（用CSS隱藏UI中函數傳回的文字。）
    • PS：需要雇用 SvelteKit 開發人員嗎？聯絡我

---

關於 svelte 中的 #await 區塊

svelte 中的 #await 區塊對於處理非同步資料非常方便：

<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}

這基本上就是 #await 塊在 svelte 中的工作原理。它會根據承諾的狀態顯示不同的內容：待處理時的載入指示器、解決時的結果以及拒絕時的錯誤訊息。

但假設我希望在 Promise 得到解決或拒絕時運行某個函數（例如祝酒）。

---

當 #await 區塊解析或拒絕時執行（觸發）函數

以下是在 Promise 解決或拒絕時運行特定函數的方法：

<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}

現在，只要到達程式碼區塊，我們的函數就會運行。

• showSuccess 在 Promise 解決時調用，並以結果數作為參數。
• 如果 Promise 被拒絕，則會觸發 showError，並顯示自訂錯誤訊息。

---

還有一件事......

修復瀏覽器中顯示的未定義或任何返回的文本

當這些函數運行時，傳回的任何文字都會顯示在瀏覽器中，因為這是一種解決方法。我們使用的語法通常是為了在瀏覽器中顯示傳回的字串/數字。即使不回傳任何內容也會傳回預設的未定義。這個字串（通常沒有意義）將顯示給最終用戶。像這樣的東西：

對最終使用者來說毫無意義？ ‍♂️？ ‍♀️

因此，請確保返回空字串，或將函數包裝在隱藏區塊中：

1. 方法一（傳回空字串）：

在此方法中，我們將確保從函數中傳回空字串。

<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}

這將確保傳回空字串。

--- 或 ---

2. 方法2（用CSS隱藏UI中函數傳回的文字。）

在此方法中，我們將在 UI 中隱藏功能區塊，這樣傳回的文字就隱藏在使用者的視線之外。

<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>

這種基於 CSS 的方法將確保傳回的文字隱藏在視線之外。

快樂駭客

PS：需要雇用 SvelteKit 開發人員嗎？聯絡我

以上是當 #await 區塊在 Svelte(Kit) 中解析時執行函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！