آشنایی با XHR و Fetch در JavaScript

منظور از XHR چیست؟ چه تفاوتی بین XHR و Fetch وجود دارد؟ منظور از Promise در JavaScript چیست؟ چه تفاوتی بین Promise و callback وجود دارد؟ در این مقاله به تحلیل و بررسی API های XHR و Fetch در صفحات وب می‌پردازیم.

امروزه یکی از کارهای رایجی که در مرورگر انجام می‌شود ایجاد درخواست های HTTP با JavaScript هست. این کار توسط یک API به نام XMLHttpRequest یا XHR انجام می‌شود. در کد JavaScript زمان ارسال HTTP message نیاز هست که متد، هدر و بدنه‌ی request مشخص شود. یا در زمان دریافت HTTP response نیاز هست که Satus Code ها ، Header ها و ... تشخیص داده شوند. از این رو در زبان JavaScript ضرورت نیاز به سازوکاری که بتواند instance object هایی برای پیش‌بردن درخواست ها، (تحت flow پروتکل HTTP ) ایجاد کند، احساس شد.که این instace object ها با عنوان XHR شناخته می‌شوند.

معرفی XHR در JavaScript

نسخه‌های اولیه XHR ابتدا در سال 1999 توسط Developer های مایکروسافت و به شکل غیر رسمی در Internet Explorer 5.0 معرفی شد و به مرور توسعه یافت. درواقع XHR یک نوع API هست که توسط زبان‌های اسکریپتی مثل JavaScript ، JScript ، VBScript و ... برای تبادل اطلاعات XML با وب‌سرور تحت HTTP استفاده می‌شود، که منجربه ایجاد یک کانال اشتراکی بین Client-side و Server-side تحت وب می‌شود. به عبارت بهتر HttpRequest ها در JavaScript با XHR ارسال می‌شوند. در واقع XHR بنیان و اساس پشت مفهوم AJAX هست و مهمترین تکنیکی هست که در AJAX استفاده می‌شود. پیش از XHR صفخات وب برای هر partial update ای باید کامل refresh می‌شدند چرا که AJAX وجود نداشت که به کمک XHR تنها بخش‌های مورد نیاز را آپدیت کند.

همچنین XHR کمک می‌کند که کلاینت بتواند در مرورگر با JavaScript برای وب‌سرور script data ارسال کند. XHR کمک کرد که عملیات‌ها به شکل Async و تحت کنترل کامل کد‌های JavaScript انجام شود. در حقیقت با آمدن XHR جهش بزرگی در رشد وب‌اپلیکیشن‌های interactive صورت گرفت.

تفاوت XHR با Fetch

اما XHR تنها API ای که توسط AJAX استفاده می‌شود، نیست. بلکه بجز XHR جدیدن یک API مدرن دیگری به نام Fetch نیز وجود دارد که جایگزینی برای XHR محسوب می‌شود. در واقع Fetch برای عملیات واکشی از سرور مناسب‌تر هست. همچنین در کد این دو API نیز تفاوت‌هایی وجود دارد، مثلن در XHR از ()request.open و send() استفاده می‌کنیم ولی در Fetch تنها با متد fetch() همان کار انجام می‌شود. تفاوت اصلی Fetch با XHR در این است که Fetch از Promise استفاده می‌کند. Promise یک آبجکت در JavaScript است که باعث تعیین وضعیت و انجام عملیات‌های Async می‌شود. JavaScript به کمک Promise می‌فهمد که آیا عملیات‌های Async موفقیت آمیز شده‌اند یا خیر. یا در چه وضعیتی هستند؟ Pending یا Reject شده اند. از این رو Promise ها روی عملیات‌های وب‌اپلیکیشن‌های مدرن خصوصن در مواقعی که بیش از یک درخواست Async در تبادل هست بسیار مفید و موثر هست.

در JavaScript دو متد اصلی برای انجام عملیات‌های Async وجود دارد:

الف) Callback :

به عملیات یا function ای که خود در دل function دیگر انجام می‌شود، Callback گفته می‌شود. این مورد باعث انجام کارها به شکل Async می‌شود. در واقع callback به عنوان یک آرگومان getData در کد JavaScript استفاده می‌شود.

ب) Promise :

استفاده از Promise به معنی حذف کردن callback ها نیست. بلکه زنجیره‌ای از function ها را در بر می‌گیرد که عملیات Async را راحت‌تر می‌کند. همچنین Promise از syntax راحت‌تر و user-friendly تری برای خواندن استفاده می‌کند و مدیریت error handling نیز در Promise راحت‌تر است.

به عنوان نتیجه‌گیری؛ XHR در تمام مرورگرها پشتیبانی می‌شود ولی Fetch در Internet Explorer و دیگر نسخه‌های قدیمی پشتیبانی نمی‌شود. بنابراین اگر در حال توسعه وب‌اپلیکیشن‌ای هستید که قرار است روی مرورگرهای قدیمی کار کند بهتر است از XHR استفاده کنید. ولی اگر وب‌اپلیکیشنی که تولید می‌کنید نیاز به پشتیبانی از نسخه‌های قدیمی ندارد بهتر است از Fetch برای AJAX و درخواست‌های Async استفاده کنید.