跳到內容:
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 得到解決或拒絕時運行某個函數（例如祝酒）。
以下是在 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}
現在，只要到達程式碼區塊，我們的函數就會運行。
還有一件事......
當這些函數運行時，傳回的任何文字都會顯示在瀏覽器中，因為這是一種解決方法。我們使用的語法通常是為了在瀏覽器中顯示傳回的字串/數字。即使不回傳任何內容也會傳回預設的未定義。這個字串（通常沒有意義）將顯示給最終用戶。像這樣的東西：
對最終使用者來說毫無意義？ ♂️？ ♀️
因此，請確保返回空字串，或將函數包裝在隱藏區塊中：
在此方法中，我們將確保從函數中傳回空字串。
<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}
這將確保傳回空字串。
--- 或 ---
在此方法中，我們將在 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 的方法將確保傳回的文字隱藏在視線之外。
快樂駭客
以上是當 #await 區塊在 Svelte(Kit) 中解析時執行函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
