当 #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中文网其他相关文章！