#await ブロックが Svelte(Kit) で解決されるときに関数を実行する-jsチュートリアル-php.cn

#await ブロックが Svelte(Kit) で解決されるときに関数を実行する

Patricia Arquette

リリース： 2024-11-05 18:49:02

オリジナル

185 人が閲覧しました

コンテンツにスキップ:

svelte の #await ブロックについて
#await ブロックが解決または拒否されたときに関数を実行 (トリガー) します
ブラウザに表示される未定義のテキストまたは返されたテキストを修正する
- 1. 方法 1 (空の文字列を返す):
- 2. 方法 2 (CSS を使用して UI 内の関数から返されたテキストを非表示にします。)
  - 追記: 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 の状態に基づいてさまざまなコンテンツが表示されます。保留中は読み込みインジケーター、解決された場合は結果、拒否された場合はエラーメッセージが表示されます。

しかし、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 が解決されるときに、引数として結果の数を使用して呼び出されます。
showError は、Promise が拒否された場合にトリガーされ、カスタムエラーメッセージを表示します。

もう一つ...

ブラウザに表示される未定義のテキストまたは返されたテキストを修正する

これらの関数が実行されると、返されたテキストはすべてブラウザに表示されます。これは一種の回避策だからです。私たちが使用した構文は、通常、返された文字列/数値をブラウザーに表示することを目的としています。何も返さなかった場合でも、デフォルトの未定義が返されます。そして、この文字列 (通常は意味をなさない) がエンドユーザーに表示されます。このようなもの:
Running a Function When an #await Block resolves in Svelte(Kit)

エンドユーザーにとっては意味がありません ?‍♂️?‍♀️

したがって、必ず空の文字列を返すか、関数を非表示のブロックでラップするようにしてください。

1. 方法 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 ベースのメソッドは、返されたテキストを確実に非表示にします。