یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دورهها
استفاده از تخفیفهاسلام دوستان خسته نباشید .
سوال بنده در رابطه با قطعه کد زیر هست که کاملش رو هم قرار میدم خدمتتون.
const wikiData: Promise<SearchResult> = getWikiResults(searchTerm)
const data = await wikiData
توی این کد از تایپ اسکریپت استفاده شده و یک فانکشنی فراخوانی شده که به صورت async هست
چیزی که برام سواله اینه که چرا اول اون تابع در یک متغییر قرار داده شده و بعد از اون به صورت await فراخوانی شده
چرا همون ابتدا به صورت await خود تابع رو فراخوانی نکرده ؟
در چند جای مختلف این نوع فراخوانی رو دیدم
در عمل تست کردم و کد کار میکنه به صورت یک خط و به شکل زیر
const data = await getWikiResults(searchTerm)
اما فکر میکنم فقط به خاطر درک نوع داده ای و استفاده از typescript به این شکل استفاده کرده از کد.
ممنون میشم اگر توضیح بدید راجبش
در promise ها هم یکم نا اشنا هستم البته اگر نیاز به درک اون هست ممنون میشم اشاره ای داشته باشید
لینک ویدیو مرتبط با این کد
همچنین لینک گیتهاب کل پروژه این قطعه کد
export default async function SearchResults({ params: { searchTerm } }: Props) {
const wikiData: Promise<SearchResult> = getWikiResults(searchTerm)
const data = await wikiData
const results: Result[] | undefined = data?.query?.pages
const content = (
<main className="bg-slate-200 mx-auto max-w-lg py-1 min-h-screen">
{results
? Object.values(results).map(result => {
return <Item key={result.pageid} result={result} />
})
: <h2 className="p-2 text-xl">{`${searchTerm} Not Found`}</h2>
}
</main>
)
return content
}
export default async function getWikiResults(searchTerm: string) {
const searchParams = new URLSearchParams({
action: 'query',
generator: 'search',
gsrsearch: searchTerm,
gsrlimit: '20',
prop: 'pageimages|extracts',
exchars: '100',
exintro: 'true',
explaintext: 'true',
exlimit: 'max',
format: 'json',
origin: '*',
})
const response = await fetch('https://en.wikipedia.org/w/api.php?' + searchParams)
return response.json()
}
type Result = {
pageid: string,
title: string,
extract: string,
thumbnail?: {
source: string,
width: number,
height: number,
}
}
type SearchResult = {
query?: {
pages?: Result[],
},
}
سلام.
در خط اول نوع فانکشن رو مشخص میکنه که باید یک async باشه تا در خط دوم ازش استفاده کنه. چون اگر فانکشن یک فانکشن معمولی باشه و مثل یک async باهاش رفتار کنید ارور میگیرید.
اصلی ترین دلیل استفاده از TS در react کنترل تایپ هست. البته این مورد رو با کد زیر در JS هم میتونید کنترل کنید اگر به دلایلی با TS کار نمیکنید.
fnName.constructor.name === 'AsyncFunction'
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟