اجرای یک تابع وقتی بلوک #await در Svelte (Kit) حل شود

Summarize this content to 400 words in Persian Lang
پرش به محتوا:

در مورد #await بلوک در حالت صاف

این #await بلوک در svelte برای مدیریت داده های ناهمزمان بسیار مفید است:

import Loader from “$components/forms/Helpers/Loader.svelte”;

export let data;
// let’s say data.myPromise is a promise.

{#await data.myPromise}

/>

{:then results}

{#each results as result}
{result}
{/each}

{:catch error}

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اساساً چگونه است #await بلوک به صورت صاف کار می کند. محتوای متفاوتی را بر اساس وضعیت یک وعده نمایش می‌دهد: نشانگر بارگیری در حالت تعلیق، نتایج پس از حل شدن، و پیام خطا در صورت رد شدن.

اما فرض کنید من می خواهم یک تابع خاص زمانی که وعده حل شده یا رد شده است (مانند یک نان تست) اجرا شود.

زمانی که یک تابع را اجرا کنید #await بلوک برطرف یا رد می شود

در اینجا نحوه اجرای توابع خاص در صورت رفع یا رد شدن وعده آمده است:

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”
})
}

{#await data.myPromise}

/>

{:then results}

{showSuccess(results.length)}

{#each results as result}
{result}
{/each}

{:catch error}

{showError(error.message)}

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، هر زمان که به بلوک کد رسید، تابع ما اجرا خواهد شد.

showSuccess زمانی فراخوانی می شود که وعده حل شود و تعداد نتایج به عنوان آرگومان باشد.
در صورت رد شدن وعده، showError فعال می شود و یک پیام خطای سفارشی نمایش داده می شود.

اما یک چیز دیگر …

رفع کنید undefined یا هر متن برگشتی که در مرورگر نمایش داده می شود

وقتی این توابع اجرا می شوند، هر متنی که برگردانده می شود در مرورگر نشان داده می شود، زیرا این یک راه حل است. نحوی که ما استفاده می‌کنیم معمولاً برای نمایش رشته‌ها/اعداد برگشتی در مرورگر است. حتی با برگرداندن هیچ چیز به حالت پیش فرض برمی گردد undefined. و این رشته (که معمولاً معنی ندارد)، به کاربر نهایی نمایش داده می شود. چیزی شبیه این:

برای کاربر نهایی بی معنی است 🤷‍♂️🤷‍♀️

بنابراین، مطمئن شوید که رشته های خالی را برگردانید یا تابع را در یک بلوک مخفی بپیچید:

1. روش 1 (بازگرداندن رشته های خالی):

در این روش، مطمئن می شویم که رشته های خالی را از توابع خود برمی گردیم.

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
}

{#await data.myPromise}

/>

{:then results}

{showSuccess(results.length)}

{#each results as result}
{result}
{/each}

{:catch error}

{showError(error.message)}

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با این کار مطمئن می شوید که رشته های خالی برگردانده می شوند.

— یا —

2. روش 2 (متن برگشتی را از تابع در UI با CSS مخفی کنید.)

در این روش، به جای آن، بلوک تابع را در رابط کاربری پنهان می کنیم، بنابراین متن بازگردانده شده از دید کاربر پنهان می شود.

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
}

{#await data.myPromise}

/>

{:then results}
class=”hidden”>

{showSuccess(results.length)}

{#each results as result}
{result}
{/each}

{:catch error}
class=”hidden”>
{showError(error.message)}

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

.hidden {
display: none;
}

Enter fullscreen mode

Exit fullscreen mode

This CSS-based method will make sure that the returned text is hidden from sight.

PS: Need to employ a SvelteKit Dev? Contact me

در ادامه بخوانید

تنظیمات Viewport در متا تگ HTML

کدمی – 2 نوامبر

فایل های HTML را بدون استفاده از اسکریپت سمت سرور یا جاوا اسکریپت جاسازی کنید

فناوری – 2 نوامبر

9 مرحله برای احراز هویت JWT در برنامه Node.js

صفدرعلی – 3 نوامبر

پنج ترفند جالب جاوا اسکریپت

Fourhtyoz – 1 نوامبر

		

			

										

							
							 هم‌رسانی
						
						
				
					 فیس بوک
				
				
					 توییتر (X)
				
				
					 لینکدین
				
				
					 ‫تامبلر
				
				
					 ‫پین‌ترست
				
				
					 ‫رددیت
				
				
					 ‫VKontakte
				
				
					 ‫Odnoklassniki
				
				
					 پاکت
				
				
					 رایانامه
				
				
					 چاپ