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

ساخت وبلاگ

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

همونطور که اطلاع دارید API مخفف Application Programming Interface می باشد. مرورگرها  API های زیادی رو در اختیار کاربران قرار میدن و برنامه نویسان میتونن با استفاده از اونا کارهای مختلفی رو انجام بدهند. مثلا میتونیم از Full Screen API یا Web Audio API یا Battery API و ... به عنوان مثالهایی برای API نام ببریم. با استفاده از هر کدام از این API ها میتونین کار خاصی رو انجام بدین.

مثلا با استفاده از Battery Status API میتونین وضعیت فعلی باتری سیستم خودتون رو بررسی کنید. با استفاده از Web Audio API میتونین صداهای مورد نظرتون رو مدیریت کرده و از اونا در سایتتون استفاده کنید.

اخیرا یک مورد جدید بنام fetch API به مرورگرها اضافه شده که با استفاده از اون میتونین اطلاعات مربوط به یک آدرس رو دریافت کرده و در صفحه سایتتون نمایش بدین. همونطور که میدونین با استفاده از Ajax میتونیم اطلاعات مورد نظرمون رو بصورت ناهمزمان یا Asynchronous دریافت کرده و در جای مورد نظرمون قرار بدیم. برای اینکار از XMLHttpRequest استفاده میکنیم و با استفاده از متدهای اون به اطلاعات مورد نظرمون دسترسی پیدا میکنیم.

fetch API یک جایگزین مدرن و جدید برای XMLHttpRequest می باشد که کار کردن با Ajax رو خیلی راحتتر و شیرین تر از گذشته میکنه. شما با استفاده از window.fetch که در اکثر مرورگرها پشتیبانی می شود، میتونین درخواستتون رو فرستاده و اطلاعات مورد نظرتون رو بصورت ناهمزمان دریافت کنید.

پشتیبانی مرورگرها از این مورد در حد قابل قبول می باشد و با گذشت زمان نیز بهتر خواهد شد:

میبینید که مرورگرهای IE از این ویژگی اصلا پشتیبانی نمیکنن. شما میتونین از یک Polyfill که توسط Github توسعه داده شده استفاده کنید و مرورگرهای قدیمی تر رو نیز تحت پوشش قرار بدین.

XMLHttpRequest و دنیای قبل از fetch

شاید برای کسی که برای بار اول XMLHttpRequest رو ببینه مقداری گیج بشه و از اون بترسه!!

برای استفاده از Ajax بصورت زیر عمل میکنیم:

میبینید که در ابتدا بررسی میکنیم که مرورگر فعلی از XMLHttpRequest پشتیبانی میکند یا خیر. اگر پشتیبانی بکنه یک نمونه جدید از اون میسازیم و در متغیر request ذخیره میکنیم. اگر مرورگر ما IE باشه و از این مورد پشتیبانی نکند، باید کارهای دیگه ای رو در try-catch انجام بدیم. در نهایت اگر مرورگر مورد نظر یکی از موارد بالا رو پشتیبانی بکنه، ما اون رو در متغیر request ذخیره سازی میکنیم. حالا میتونیم با استفاده از این متغیر به آدرسهای مورد نظرمون درخواست یا Request فرستاده و Response یا جواب سرور رو دریافت کنیم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که در خط 15 با استفاده از متد open توضیحات مربوط به درخواستمون رو مشخص کردیم. با استفاده از ورودی اول میتونیم نوع درخواست رو مشخص کنیم. در بالا نوع GET رو قرار دادیم. انواع دیگری نیز وجود دارند:

  • POST
  • PUT
  • DELETE
  • و ...

با استفاده از آرگومان یا ورودی دوم متد open، آدرس url که درخواست باید به اون فرستاده بشه رو مشخص میکنیم. در نهایت با استفاده از آرگومان سوم میتونیم مشخص کنیم که این درخواست ناهمزمان باشه یا همزمان. مقدار این ویژگی دلخواه بصورت پیش فرض true می باشد و با اینکار درخواست مورد نظر Asynchronous می باشد و جلوی اجرا شدن کدهای دیگر رو نمیگیره و بصورت موازی و Parallel با کدهای دیگر اجرا شده و نتیجه بعد از مشخص شدن در اختیار ما قرار میگیره.

آدرس مورد نظر https://randomuser.me/api/?results=5 یک API می باشد که بصورت تصادفی و به تعداد دلخواه، اطلاعات کاربران رو در اختیارتون قرار میده. اگر این آدرس رو در مرورگر باز کنید بصورت زیر خواهد بود:میبینید که یک کد JSON محتوی اطلاعات 5 کاربر تصادفی در اختیارمون قرار میگیره و میتونیم از اون استفاده کنیم.

در نهایت در خط 16 با استفاده از متد send این درخواست رو به سمت url مورد نظر ارسال میکنیم. حالا اگر این کد رو در مرورگر باز کنیم و وارد Inspector بشیم و تب Network رو باز کنیم، بصورت زیر خواهد بود:

میبینید که یک درخواست به آدرس مورد نظر فرستاده شده و Response اون نیز بصورت زیر می باشد:

خب میبینید که میتونیم اطلاعات دریافتی از سرور مورد نظر رو در Inspector مشاهده کنیم. حالا باید کاری کنیم که به این اطلاعات در کدهای خودمون نیز دسترسی داشته باشیم و از اونا استفاده کنیم. برای اینکار از Event یا رویداد ها استفاده میکنیم و یک Callback برای اونا درنظر میگیرم. ما در اینجا از رویداد load استفاده میکنیم و این رویداد زمانی باعث اجرا شدن Callback میشه که درخواست مورد نظر کامل شده باشد. برای اینکار بصورت زیر عمل میکنیم:

میبینید که در خط 15 رویداد load رو با استفاده از متد addEventListener به متغیر request اضافه کردیم و callback مورد نظر transferComplete رو برای اون تعریف کردیم. با اینکار زمانی که درخواست مورد نظر کامل بشه و اطلاعات از سرور دریافت بشن، تابع transferComplete فراخوانی شده و کدهای درون اون اجرا میشن.

درون تابع transferComplete میتونین از this.responseText استفاده کنید و به Response دسترسی داشته باشید. با استفاده از JSON.parse این متن رو به JSON تبدیل کردیم و ویژگی results اون رو در Console چاپ کردیم. با اینکار خروجی در Console بصورت زیر خواهد بود:

به همین راحتی.

همچنین شما با استفاده از متد setRequestHeader میتونین برای درخواستتون یک Header قرار بدین. بصورت زیر:

میبینید که در خط یکی مانده به آخر، یک header مربوط به Cache-Control رو قرار دادیم و مقدار اون رو برابر با no-cache قرار دادیم. شما میتونین از Header های دیگری که وجود داره نیز استفاده کنید. اگر یکبار دیگر کدها رو اجرا کنیم و درخواست مورد نظر رو در تب Network بررسی کنیم، بصورت زیر خواهد بود:

میبینید که Header مورد نظر به همراه درخواست به سمت سرور ارسال شده است.

استفاده از jQuery برای ارسال درخواست Ajax

دیدید که اگر خودمون بخوایم از XMLHttpRequest استفاده کنیم، یک مقدار گیج کننده خواهد بود. کتابخانه ها و ابزارهای زیادی وجود دارند که این کار رو برای ما راحتتر کردند و به راحتی میتونیم از اونا برای ارسال درخواست های Ajax استفاده کنیم.

مثلا اگر بخوایم کار مشابهی رو در jQuery همانند کدهای بالا انجام بدیم، بصورت زیر خواهد بود:

خروجی همانند قبل خواهد بود. میبینید که کدنویسی خیلی راحتتر و خواناتر شده است. کد بالا مربوط به jQuery نسخه 3 می باشد و در نسخه های قبلی کمی تفاوت دارد.

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

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

یا علی

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 330 تاريخ : پنجشنبه 11 آبان 1396 ساعت: 13:49

خبرنامه