آموزش ویژگی های ECMAScript 6 (جلسه 41) : آموزش fetch API - قسمت 3



visibility  
mode_comment   ۲

همونطور که اطلاع دارید در جلسه قبل کار با fetch API رو شروع کردیم و توضیحات مقدماتی در مورد استفاده از اون دادیم. در این جلسه میخوایم کار با fetch API رو ادامه بدیم و مباحث مربوط به اون رو به پایان برسونیم.

در جلسه قبل کد زیر رو قرار داده و توضیح دادیم:

با استفاده از این کد یک درخواست GET به آدرس مورد نظر فرستاده شده و پاسخ اون برگشت داده میشه. شما میتونین با استفاده از ویژگی header، هدرهای مربوط به درخواست رو بصورت یک نمونه ساخته شده از کلاس Headers ارسال کنید. بصورت زیر:

میبینید که با استفاده از عملگر new یک نمونه جدید از سازنده Headers ساختیم و دو هدر نمونه رو برای اون قرار دادیم. با اینکار این هدرها به همراه درخواست به سرور ارسال خواهند شد. شما میتونین این کار رو به روش دیگری نیز انجام بدین و اون هم استفاده از Request می باشد.

ساخت درخواست با Request

شما با استفاده از Request میتونین درخواستتون رو بصورت سفارشی ساخته و اون رو به fetch پاس بدین تا به سمت سرور ارسال و نتیجه آن گرفته شود. کد بالا رو بصورت زیر بازنویسی میکنیم:

میبینید که در ابتدا با استفاده از عملگر new یک نمونه جدید از سازنده Request ساختیم و تنظیمات مربوط به درخواست رو مشخص کردیم و در نهایت درخواست رو در متغیر request ذخیره کردیم. در خط 10 این درخواست رو به متد fetch پاس دادیم و همانند گذشته با استفاده از متدهای then و catch قول یا Promise برگشتی رو کنترل کردیم. اگر Console رو باز کنید، میبینید که Response مربوط به درخواست بالا چاپ شده است. بصورت زیر:

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 49)

در جلسه قبل توضیحاتی در مورد خصوصیات این شئ داده شد. همونطور که در تصویر بالا مشخص شده است، زمانی که بر روی __proto__ کلیک میکنید، لیستی از تمامی متدها و ویژگی هایی که از پیش ساخته شده هستند، نمایش داده میشه. میتونین با استفاده از این متدها و ویژگی ها، خروجی های خاصی از Response یا پاسخ دریافت شده از سرور بدست بیارید. اگر بر روی __proto__ کلیک کنیم، بصورت زیر خواهد بود:

میبینید که متدهای زیادی وجود داره که هر کدام کار خاصی رو انجام می دهند. ما در این آموزش در مورد سه متد blob و text و json توضیح خواهیم داد.

مدیریت و دریافت JSON

همونطور که در کدهای بالا دیدید، بعد از موفقیت آمیز بودن Promise، پاسخ یا Response رو درون Console چاپ میکردیم. اما اگر URL مورد نظر رو مشاهده کنید، خواهید دید که با داده های JSON سر و کار دادیم. بصورت زیر:

اگر یکبار دیگه به Response چاپ شده در Console نگاه بندازیم، ویژگی body رو خواهیم دید:

همونطور که میبینید در Response دریافتی از سرور مورد نظر، یک ویژگی بنام body وجود دارد و یک ReadableStream در اون قرار داده شده است. Stream شامل اطلاعات دریافتی از سرور می باشد که بصورت داده در اومدن و در بدنه پاسخ برای ما ارسال شده اند. حالا شما میتونین با استفاده از متدهای مختلف، به داده های درون این درخواست دسترسی داشته باشید. ار اونجایی که ما میدونیم اطلاعات این Response بصورت JSON هستند، پس از متد json استفاده میکنیم. بصورت زیر:

میبینید که دیگه response رو مستقیما در Console چاپ نکردیم و در عوض متد json رو برای اون فراخوانی کرده و نتیجه اون رو برگشت دادیم. متد json و دیگر متدهای مربوط به response از اونجایی که بصورت غیرهمزمان یا Asynchronous هستند، یک Promise یا قول رو برمی گردونند. پس ما باید با استفاده از متدهای then زنجیری اونا رو کنترل کنیم. خروجی هر then، ورودی then بعدی خواهد بود. پس خروجی متد json رو در then بعدی در Console چاپ میکنیم. نتیجه در Console بصورت زیر خواهد بود:

میبینید که به راحتی به اطلاعات JSON پاسخ مورد نظر دسترسی پیدا کردیم.

مدیریت پاسخ های Text/HTML

پاسخ هایی که از سرور دریافت میکنیم، همیشه بصورت JSON نیستند و بعضی از اوقات بصورت متنی یا کدهای HTML خواهند بود. در این مواقع میتونین از متد text استفاده کنید. مثلا کد زیر رو در نظر بگیرید:

میبینید که به یکی از آدرسهای سایت mozilla متصل شدیم. بعد از اون از متد text استفاده کردیم و متن رو در Console چاپ کردیم. با اینکار خروجی بصورت زیر خواهد شد:

میبینید که متن مربوط به سایت مورد نظر در Console قرار گرفته است.

مدیریت پاسخهای Blob

اگر شما بخواید یک تصویر رو با استفاده از fetch لود کنید باید از متد blob برای پاسخ دریافتی از سرور استفاده کنید. با اینکار اطلاعات مربوط به تصویر مورد نظر خوانده شده و در دسترسی قرار میگیره و میتونین از اون برای قرار دادن تصویر در صفحه استفاده کنید:

همونطور که میبینید میخوایم یک تصویر فرضی رو دریافت کنیم. در ابتدا متد blob رو برای پاسخ دریافتی استفاده میکنیم و بعد از اون تگ img در کدهای html رو انتخاب کرده و ویژگی src اون رو برابر با خروجی متد createObjectURL اطلاعات blob قرار میدهیم. با اینکار تصویر مورد نظر در src قرار داده میشه و در صفحه نمایش داده میشه.

دیدید که استفاده از fetch خیلی راحت و شیرینه. برای مطالعه بیشتر میتونین لینکهای زیر رو مطالعه کنید:

موفق و پیروز باشید.

یا علی

comment دیدگاه کاربران
مهرداد نادری

عالیه 👏👏

محمد اسفندیاری

موفق باشید

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.