سلام رفقا
امیدوارم حالتون عالی باشه.
یه مفهوم خیلی مهم در جاوا اسکریپت وجود داره که امروز میخوایم دربارش بحث کنیم.
میخوایم ببینیم fetchAPI چیه؟ و چجوری میشه ازش استفاده کرد.
برای درخواست‌های Ajax می‌تونیم خیلی راحت از تابع درونی جاوا اسکریپت به اسم fetch استفاده کنیم
تابع fetch :
این تابع بعد از اجرا شدن، یک promise به ما برمی‌گردونه. این promise شامل یک سری اطلاعات از نتیجه درخواست هست. برای اینکه به این اطلاعات دسترسی داشته باشیم باید promise رو باز کنیم.
مثال پایینو ببین:
حالا نتیجه رو در کنسول ببین:
همونطور که می‌بینیم خروجی یک نمونه از کلاس داخلی Response که شامل اطلاعاتی مثل status و headers و body هست. چیزی که در body قرار گرفته، شامل پاسخ اصلی هست که از سمت سرور اومده. توی این مرحله باید مشخص کنیم پاسخی که از سرور اومده رو به چه فرمتی میخوایم؛ متن؟ Json ؟ و...
توی شرایط مختلف می‌تونیم از فرمت‌های زیر استفاده کنیم:
خروجی همه‌ی فرمت‌های بالا یک promise هست. پس برای دسترسی به خروجی اصلی باید یه بار دیگه promise رو پردازش کنیم.
توی مثالمون میخوایم خروجی json باشه. پس از خط ۲ کد بالا استفاده می‌کنیم. کد رو بصورت زیر تکمیل کنیم:
به همین سادگی. خط 10 کد بالا شامل پاسخی هست که از سرور اومده و به صورت json خواهد بود.
نتیجه در کنسول:
نکته مهم: در حالت پیشفرض درخواست‌ها با متد GET فرستاده میشن. برای مشخص کردن متد و یا تنظیم کردن هدر باید درخواستمون رو شخصی‌سازی کنیم.
شخصی‌سازی درخواست
توی پارامتر دوم تابع fetch می‌تونیم نوع متد رو مشخص کنیم، data پاس بدیم و هدر ست کنیم:
توی مثال بالا متد رو method مشخص کردیم. برای ارسال هدر درخواست از headers استفاده کردیم و برای ارسال اطلاعات به سرور از body . نوع body می‌تونه رشته‌‌ای یا Blob باشه. و یا FormData مثل کد زیر:
مدیریت خطاها
خب می‌دونیم که همیشه درخواست‌ها موفقیت آمیز نیستن و ممکنه خطاهایی مثل ۴۰۴، ۴۰۱ پیش بیاد و یا کلا سرور یا اینترنت در دسترس نباشن. اگه درخواستی موفقیت آمیز نباشه، خروجی تابع fetch بصورت زیر هست:
همونطور که می‌بینیم status داره کد ۴۰۴ رو نشون میده و مقدار ok برابر با false هست. برای اینکه بتونیم این خطا رو مدیریت کنیم، کد رو به صورت زیر می‌نویسیم:
توی این مثال و توی خط ۵ از response.ok استفاده کردیم که مقدار اون اگه نتیجه درخواست موفقیت آمیز باشه true هست. همچنین از try/catch استفاده کردیم که اگه با خروجی غیرمنتظره‌ای (مثلCORS ) مواجه شدیم بتونیم اون رو مدیریت کنیم.
تو این پست، سعی کردم خیلی ساده و راحت متد fetch رو بهتون یاد بدم. امیدوارم که بهتون کمک کرده باشه.
اگه سوالی باشه، درخدمتم.
دوستون دارم.
