Svelte(Kit)에서 #await 블록이 해결될 때 함수 실행-JS 튜토리얼-php.cn

Svelte(Kit)에서 #await 블록이 해결될 때 함수 실행

Patricia Arquette

풀어 주다： 2024-11-05 18:49:02

원래의

185명이 탐색했습니다.

콘텐츠로 건너뛰기:

svelte의 #await 블록 정보
#await 블록이 해결되거나 거부되면 함수 실행(트리거)
브라우저에 표시되는 정의되지 않은 텍스트 또는 반환된 텍스트 수정
- 1. 방법 1(빈 문자열 반환):
- 2. 방법 2(CSS를 사용하여 UI의 함수에서 반환된 텍스트를 숨깁니다.)
  - PS: SvelteKit Dev를 고용해야 합니까? 연락주세요

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}

로그인 후 복사

이것은 기본적으로 svelte에서 #await 블록이 작동하는 방식입니다. 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가 발생하여 사용자 지정 오류 메시지가 표시됩니다.

한 가지 더...

브라우저에 표시되는 정의되지 않은 텍스트 또는 반환된 텍스트 수정

이러한 기능이 실행되면 반환된 텍스트가 무엇이든 브라우저에 표시됩니다. 일종의 해결 방법이기 때문입니다. 우리가 사용한 구문은 일반적으로 브라우저에 반환된 문자열/숫자를 표시하기 위한 것입니다. 아무것도 반환하지 않더라도 기본값은 정의되지 않은 상태로 반환됩니다. 그리고 이 문자열(일반적으로 의미가 없음)이 최종 사용자에게 표시됩니다. 다음과 같습니다:
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 기반 방법을 사용하면 반환된 텍스트가 보이지 않게 숨겨집니다.