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

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

شما به راحتی میتونین با استفاده از fetch که درون شئ سراسری window قرار دارد، درخواست های مورد نظرتون رو به آدرس های مختلف بفرستید و پاسخ اونا رو دریافت کنید. با استفاده از fetch که جایگزینی برای استفاده از XMLHttpRequest می باشد، به راحتی میتونین کارهای مورد نظرتون با Ajax رو انجام بدین. این متد کماکان در پشت صحنه با XMLHttpRequest کار میکنه.

همونطور که دیدید در XMLHttpRequest با استفاده از Event و رویدادها، پاسخ دریافت شده از سرور رو گرفته و نمایش میدادیم. در jQuery و ... نیز از Callback برای اینکار استفاده کردیم. اما در fetch API یک Promise یا قول در اختیار ما قرار میگیره که میتونیم با اون کار کنیم.

همونطور که اطلاع دارید در جلسات قبل مبحث Promise یا قول ها رو بصورت کامل آموزش دادیم. زمانی که یک درخواست رو به URL مورد نظرتون میفرستید، یک Promise ساخته میشه و شما میتونین با استفاده از متدهای then و catch پاسخ اون رو بررسی کرده و نتایج مورد نظرتون رو نمایش بدین.

شروع کار با fetch API

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

همونطور که میبینید آدرس مورد نظر که در جلسه قبل نیز از اون استفاده کردیم رو به عنوان آرگومان اول fetch قرار دادیم. آرگومان اول این API اجباری و Required هست و باید حتما اون رو قرار بدین و اگر قرار ندید یک ارور نمایش داده میشه. همونطور که میبینید بصورت زنجیری متدهای then و catch رو بعد از fetch قرار دادیم. مطابق با چیزی که در بالا بیان شد، fetch یک قول رو برمی گرداند که میتونیم با استفاده از اون نتیجه درخواست رو بررسی و مشاهده کنیم. اگر درخواست موفقیت آمیز باشه، متد then و در غیر اینصورت متد catch فراخوانی می شود.

اگر کد بالا رو در مرورگر اجرا کنیم، چون هیچ مشکلی وجود ندارد، متد then اجرا میشه و response دریافتی در Console چاپ می شود. بصورت زیر:

همونطور که میبینید اطلاعات زیادی در مورد Response در اختیار ما قرار میگیره. مثلا مشخص میکنه که status برابر با 200 هست و این عدد نشان دهنده موفقیت آمیز بودن درخواست می باشد. اگر مشکلی در درخواست به وجود بیاد متد Catch فراخوانی میشه و ارور در Console چاپ میشه. مثلا اگر آدرس مورد نظر رو وارد نکنیم، از اونجایی که این آرگومان اجباری است، یک ارور در Console نمایش داده میشه:

بصورت زیر:

میبینید که ارور مورد نظر در Console چاپ شده است.

ارسال درخواست با تنظیمات سفارشی

شما میتونین به عنوان آرگومان دوم تنظیمات مورد نظرتون رو به fetch معرفی کنید و این تنظیمات با درخواست شما به سرور مورد نظر فرستاده خواهد شد. مثلا کد زیر رو ببینید:

میبینید که یک شئ به عنوان آرگومان دوم به fetch ارسال کردیم و تنظیمات مورد نظرمون رو قرار دادیم. مثلا گفتیم میخوایم از متد GET استفاده کنیم و cache نیز برابر با no-cache قرار بگیره. میتونین تنظیمات دیگه ای از قبیل موارد زیر رو مشخص کنید:

• headers
• referrer
• mode : مقادیر cors یا no-cors یا same-origin رو دریافت میکنه
• credentials : مشخص میکنه که Cookie ها به همراه درخواست فرستاده بشوند یا خیر. مقادیر omit و same-origin رو دریافت میکنه.
• redirect
• integrity
• cache : حالت cache رو مشخص میکنه که میتونین مقادیر default و reload و no-cache رو براش قرار بدین.

در جلسه بعد موارد دیگه رو در اختیارتون قرار میدیم.

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

یا علی