跳至内容:

• 关于 svelte 中的 #await 块
• 当 #await 块解析或拒绝时运行（触发）函数
• 修复浏览器中显示的未定义或任何返回的文本
  • 1. 方法一（返回空字符串）：
  • 2. 方法二（用CSS隐藏UI中函数返回的文本。）
    • PS：需要雇用 SvelteKit 开发人员吗？联系我

关于 svelte 中的 #await 块

svelte中的#await块对于处理异步数据非常方便：

{#await data.myPromise}



{:then results}

{#each results as result}

{error?.message ?? "Something went wrong"}

这基本上就是 #await 块在 svelte 中的工作原理。它根据承诺的状态显示不同的内容：待处理时的加载指示器、解决时的结果以及拒绝时的错误消息。

但是假设我希望在承诺已解决或拒绝时运行某个函数（如祝酒）。

当 #await 块解析或拒绝时运行（触发）函数

以下是在 Promise 解决或拒绝时运行特定函数的方法：

{#await data.myPromise}



{:then results}

{showSuccess(results.length)}

  
{#each results as result}

{error?.message ?? "Something went wrong"}

现在，只要到达代码块，我们的函数就会运行。

• showSuccess 在承诺解决时调用，并以结果数作为参数。
• 如果 Promise 被拒绝，则会触发 showError，显示自定义错误消息。

还有一件事...

修复浏览器中显示的未定义或任何返回的文本

当这些函数运行时，返回的任何文本都会显示在浏览器中，因为这是一种解决方法。我们使用的语法通常是为了在浏览器中显示返回的字符串/数字。即使不返回任何内容也会返回默认的未定义。这个字符串（通常没有意义）将显示给最终用户。像这样的东西：

对最终用户来说毫无意义？‍♂️？‍♀️

因此，请确保返回空字符串，或将函数包装在隐藏块中：

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

在此方法中，我们将确保从函数中返回空字符串。

{#await data.myPromise}
  


{:then results}

{showSuccess(results.length)} 


{#each results as result}

{error?.message ?? "Something went wrong"}

这将确保返回空字符串。

- - 或者 - -

2. 方法二（用CSS隐藏UI中函数返回的文本。）

在此方法中，我们将在 UI 中隐藏功能块，因此返回的文本在用户的视线中隐藏。

{#await data.myPromise}
  


{:then results}
 
  

{showSuccess(results.length)}



{#each results as result}