محمد رضا
1 سال پیش توسط محمد رضا مطرح شد
1 پاسخ

توضیح نحوه فراخوانی و اجرای promise

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

    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[],
    },
}

ثبت پرسش جدید
پویا باقری
تخصص : برنامه نویس وب
@Pouyab 1 سال پیش مطرح شد
0

سلام.
در خط اول نوع فانکشن رو مشخص میکنه که باید یک async باشه تا در خط دوم ازش استفاده کنه. چون اگر فانکشن یک فانکشن معمولی باشه و مثل یک async باهاش رفتار کنید ارور میگیرید.
اصلی ترین دلیل استفاده از TS در react کنترل تایپ هست. البته این مورد رو با کد زیر در JS هم میتونید کنترل کنید اگر به دلایلی با TS کار نمیکنید.

fnName.constructor.name === 'AsyncFunction'

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام