{"id":82598,"date":"2024-11-05T01:11:23","date_gmt":"2024-11-04T21:41:23","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/running-a-function-when-an-await-block-resolves-in-sveltekit-11ec\/"},"modified":"2024-11-05T01:11:23","modified_gmt":"2024-11-04T21:41:23","slug":"running-a-function-when-an-await-block-resolves-in-sveltekit-11ec","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/running-a-function-when-an-await-block-resolves-in-sveltekit-11ec\/","title":{"rendered":"\u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0648\u0642\u062a\u06cc \u0628\u0644\u0648\u06a9 #await \u062f\u0631 Svelte (Kit) \u062d\u0644 \u0634\u0648\u062f"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u067e\u0631\u0634 \u0628\u0647 \u0645\u062d\u062a\u0648\u0627:<\/p>\n

\u062f\u0631 \u0645\u0648\u0631\u062f #await \u0628\u0644\u0648\u06a9 \u062f\u0631 \u062d\u0627\u0644\u062a \u0635\u0627\u0641<\/p>\n

\u0627\u06cc\u0646 #await \u0628\u0644\u0648\u06a9 \u062f\u0631 svelte \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a:<\/p>\n

import Loader from “$components\/forms\/Helpers\/Loader.svelte”;<\/p>\n

export let data;
\n\/\/ let’s say data.myPromise is a promise.<\/p>\n

{#await data.myPromise}<\/p>\n

\/><\/p>\n

{:then results}<\/p>\n

{#each results as result}
\n{result}
\n{\/each}<\/p>\n

{:catch error}<\/p>\n

class=”text-red”>{error?.message ?? “Something went wrong”}
\n{\/await}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u0627\u0633\u0627\u0633\u0627\u064b \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a #await \u0628\u0644\u0648\u06a9 \u0628\u0647 \u0635\u0648\u0631\u062a \u0635\u0627\u0641 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0636\u0639\u06cc\u062a \u06cc\u06a9 \u0648\u0639\u062f\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f: \u0646\u0634\u0627\u0646\u06af\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0631 \u062d\u0627\u0644\u062a \u062a\u0639\u0644\u06cc\u0642\u060c \u0646\u062a\u0627\u06cc\u062c \u067e\u0633 \u0627\u0632 \u062d\u0644 \u0634\u062f\u0646\u060c \u0648 \u067e\u06cc\u0627\u0645 \u062e\u0637\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0631\u062f \u0634\u062f\u0646.<\/p>\n

\u0627\u0645\u0627 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u0646 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062e\u0627\u0635 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0648\u0639\u062f\u0647 \u062d\u0644 \u0634\u062f\u0647 \u06cc\u0627 \u0631\u062f \u0634\u062f\u0647 \u0627\u0633\u062a (\u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0646\u0627\u0646 \u062a\u0633\u062a) \u0627\u062c\u0631\u0627 \u0634\u0648\u062f.<\/p>\n

\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f #await \u0628\u0644\u0648\u06a9 \u0628\u0631\u0637\u0631\u0641 \u06cc\u0627 \u0631\u062f \u0645\u06cc \u0634\u0648\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0627\u062c\u0631\u0627\u06cc \u062a\u0648\u0627\u0628\u0639 \u062e\u0627\u0635 \u062f\u0631 \u0635\u0648\u0631\u062a \u0631\u0641\u0639 \u06cc\u0627 \u0631\u062f \u0634\u062f\u0646 \u0648\u0639\u062f\u0647 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

import { toast } from “svelte-sonner”;<\/p>\n

\/**
\n* Displays a success toast
\n* @param {number | string} resultsLength – Number of results
\n*\/
\nfunction showSuccess (resultsLength) {
\ntoast.success(`${resultsLength} result${resultsLength > 1 ? “s” : “”} retrieved!`)
\n}<\/p>\n

\/**
\n* Displays an error toast
\n* @param {string} [errorMessage] – Error message to display
\n*\/
\nfunction showError(errorMessage) {
\ntoast.error(`An Error Occured`, {
\nmessage: errorMessage ?? “Unknown Error”
\n})
\n}<\/p>\n

{#await data.myPromise}<\/p>\n

\/><\/p>\n

{:then results}<\/p>\n

{showSuccess(results.length)}<\/p>\n

{#each results as result}
\n{result}
\n{\/each}<\/p>\n

{:catch error}<\/p>\n

{showError(error.message)}<\/p>\n

class=”text-red”>{error?.message ?? “Something went wrong”}
\n{\/await}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646\u060c \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0628\u0647 \u0628\u0644\u0648\u06a9 \u06a9\u062f \u0631\u0633\u06cc\u062f\u060c \u062a\u0627\u0628\u0639 \u0645\u0627 \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. <\/p>\n

showSuccess \u0632\u0645\u0627\u0646\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0648\u0639\u062f\u0647 \u062d\u0644 \u0634\u0648\u062f \u0648 \u062a\u0639\u062f\u0627\u062f \u0646\u062a\u0627\u06cc\u062c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0628\u0627\u0634\u062f.
\n\u062f\u0631 \u0635\u0648\u0631\u062a \u0631\u062f \u0634\u062f\u0646 \u0648\u0639\u062f\u0647\u060c showError \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f \u0648 \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u062e\u0637\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0627\u0645\u0627 \u06cc\u06a9 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631 …<\/p>\n

\u0631\u0641\u0639 \u06a9\u0646\u06cc\u062f undefined \u06cc\u0627 \u0647\u0631 \u0645\u062a\u0646 \u0628\u0631\u06af\u0634\u062a\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f<\/p>\n

\u0648\u0642\u062a\u06cc \u0627\u06cc\u0646 \u062a\u0648\u0627\u0628\u0639 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u0647\u0631 \u0645\u062a\u0646\u06cc \u06a9\u0647 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0627\u0633\u062a. \u0646\u062d\u0648\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0631\u0634\u062a\u0647\u200c\u0647\u0627\/\u0627\u0639\u062f\u0627\u062f \u0628\u0631\u06af\u0634\u062a\u06cc \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a. \u062d\u062a\u06cc \u0628\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0647\u06cc\u0686 \u0686\u06cc\u0632 \u0628\u0647 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u062f undefined. \u0648 \u0627\u06cc\u0646 \u0631\u0634\u062a\u0647 (\u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0645\u0639\u0646\u06cc \u0646\u062f\u0627\u0631\u062f)\u060c \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0646\u0647\u0627\u06cc\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0627\u06cc\u0646:<\/p>\n

\u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0646\u0647\u0627\u06cc\u06cc \u0628\u06cc \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \ud83e\udd37\u200d\u2642\ufe0f\ud83e\udd37\u200d\u2640\ufe0f<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0631\u0634\u062a\u0647 \u0647\u0627\u06cc \u062e\u0627\u0644\u06cc \u0631\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f \u06cc\u0627 \u062a\u0627\u0628\u0639 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0628\u0644\u0648\u06a9 \u0645\u062e\u0641\u06cc \u0628\u067e\u06cc\u0686\u06cc\u062f:<\/p>\n

1. \u0631\u0648\u0634 1 (\u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0631\u0634\u062a\u0647 \u0647\u0627\u06cc \u062e\u0627\u0644\u06cc):<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0648\u0634\u060c \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc \u0634\u0648\u06cc\u0645 \u06a9\u0647 \u0631\u0634\u062a\u0647 \u0647\u0627\u06cc \u062e\u0627\u0644\u06cc \u0631\u0627 \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u062e\u0648\u062f \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u06cc\u0645.<\/p>\n

import { toast } from “svelte-sonner”;<\/p>\n

\/**
\n* @param {number | string} resultsLength
\n* @returns {string} – Empty string to avoid display issues
\n*\/
\nfunction showSuccess (resultsLength) {
\ntoast.success(`${resultsLength} result${resultsLength > 1 ? “s” : “”} retrieved!`)
\nreturn “”; \/\/ Return an empty string
\n}<\/p>\n

\/**
\n* @param {string} [errorMessage]\n* @returns {string} – Empty string to avoid display issues
\n*\/
\nfunction showError(errorMessage) {
\ntoast.error(`An Error Occured`, {
\nmessage: errorMessage ?? “Unknown Error”
\n})
\nreturn “”; \/\/ Return an empty string
\n}<\/p>\n

{#await data.myPromise}<\/p>\n

\/><\/p>\n

{:then results}<\/p>\n

{showSuccess(results.length)} <\/p>\n

{#each results as result}
\n{result}
\n{\/each}<\/p>\n

{:catch error}<\/p>\n

{showError(error.message)} <\/p>\n

class=”text-red”>{error?.message ?? “Something went wrong”}
\n{\/await}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0631\u0634\u062a\u0647 \u0647\u0627\u06cc \u062e\u0627\u0644\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n

— \u06cc\u0627 —<\/p>\n

2. \u0631\u0648\u0634 2 (\u0645\u062a\u0646 \u0628\u0631\u06af\u0634\u062a\u06cc \u0631\u0627 \u0627\u0632 \u062a\u0627\u0628\u0639 \u062f\u0631 UI \u0628\u0627 CSS \u0645\u062e\u0641\u06cc \u06a9\u0646\u06cc\u062f.)<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0648\u0634\u060c \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646\u060c \u0628\u0644\u0648\u06a9 \u062a\u0627\u0628\u0639 \u0631\u0627 \u062f\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u0646\u0647\u0627\u0646 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u062a\u0646 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0634\u062f\u0647 \u0627\u0632 \u062f\u06cc\u062f \u06a9\u0627\u0631\u0628\u0631 \u067e\u0646\u0647\u0627\u0646 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

import { toast } from “svelte-sonner”;<\/p>\n

\/**
\n* @param {number | string} resultsLength
\n*\/
\nfunction showSuccess (resultsLength) {
\ntoast.success(`${resultsLength} result${resultsLength > 1 ? “s” : “”} retrieved!`)
\n\/\/ No explicit return necessary. Returns undefined by default
\n}<\/p>\n

\/**
\n* @param {string} [errorMessage]\n* @returns {string}
\n*\/
\nfunction showError(errorMessage) {
\ntoast.error(`An Error Occured`, {
\nmessage: errorMessage ?? “Unknown Error”
\n})
\n\/\/ No explicit return necessary. Returns undefined by default
\n}<\/p>\n

{#await data.myPromise}<\/p>\n

\/><\/p>\n

{:then results}
\n class=”hidden”> <\/p>\n

{showSuccess(results.length)}<\/p>\n

{#each results as result}
\n{result}
\n{\/each}<\/p>\n

{:catch error}
\n class=”hidden”>
\n{showError(error.message)}<\/p>\n

class=”text-red”>{error?.message ?? “Something went wrong”}
\n{\/await}<\/p>\n

.hidden {
\n display: none;
\n }<\/p>\n

Enter fullscreen mode<\/p>\n

Exit fullscreen mode<\/p>\n

This CSS-based method will make sure that the returned text is hidden from sight.<\/p>\n

PS: Need to employ a SvelteKit Dev? Contact me<\/p>\n

\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<\/p>\n

\u062a\u0646\u0638\u06cc\u0645\u0627\u062a Viewport \u062f\u0631 \u0645\u062a\u0627 \u062a\u06af HTML<\/p>\n

\u06a9\u062f\u0645\u06cc – 2 \u0646\u0648\u0627\u0645\u0628\u0631<\/p>\n

\u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc HTML \u0631\u0627 \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u06cc\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u0627\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n

\u0641\u0646\u0627\u0648\u0631\u06cc – 2 \u0646\u0648\u0627\u0645\u0628\u0631<\/p>\n

9 \u0645\u0631\u062d\u0644\u0647 \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a JWT \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Node.js<\/p>\n

\u0635\u0641\u062f\u0631\u0639\u0644\u06cc – 3 \u0646\u0648\u0627\u0645\u0628\u0631<\/p>\n

\u067e\u0646\u062c \u062a\u0631\u0641\u0646\u062f \u062c\u0627\u0644\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/p>\n

Fourhtyoz – 1 \u0646\u0648\u0627\u0645\u0628\u0631<\/p>\n

\n

\u067e\u0631\u0634 \u0628\u0647 \u0645\u062d\u062a\u0648\u0627<\/strong>:<\/p>\n\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n