درخواست HTTP در جاوا اسکریپت

در مورد توسعه برنامه‌های مدرن، اعم از وب، موبایل یا سایر موارد، تقریباً همیشه نیاز به تعامل با سرویس‌های وب از راه دور، معمولاً از طریق HTTP وجود دارد. هنگام کار با چارچوب‌هایی مانند Angular ، Vue و React ، عملکردهای مختلفی برای درخواست HTTP وجود دارد، اما اگر از JavaScript استفاده می‌کنید یا ترجیح می‌دهید از موارد ساخته شده و آمده استفاده نکنید، چه می‌کنید؟ در این آموزش می‌خواهیم چند گزینه برای ایجاد درخواست‌ HTTP در JavaScript را بررسی کنیم. به طور خاص ما با استفاده از واکشی جاوا اسکریپت (javascript) مدرن و همچنین استفاده از یک بسته شخص ثالث به نام Axios، به درخواست کلاسیک XHR و درخواست HTTP در جاوا اسکریپت خواهیم پرداخت.

 

درخواست HTTP در جاوااسکریپت
درخواست HTTP در جاوا اسکریپت

نحوه انتخاب روش ایجاد درخواست HTTP در جاوا اسکریپت

هنگام تصمیم‌گیری در مورد چگونگی ایجاد درخواست‌های HTTP در JavaScript، به عملکرد آن باید دقت کنیم و بر اساس عملکرد موردنظر تصمیم به انتخاب یکی از راه‌حل‌های موجود بپردازیم. هرکدام از مواردی که ذکر می‌شود نقاط قوت خود را دارند و از طرفی دارای ضعف‌هایی هم هستند.

 

ویدیو پییشنهادی: آموزش پیشرفته جاوا
آموزش پیشرفته جاوا

 

در آغاز، برخی روش‌ها برای برداشتن داده‌ها از سرور بدون بازخوانی صفحه وجود داشته است، اما آنها اغلب به تکنیک‌های پیچیده متکی بودند. مایکروسافت XMLHttpRequest را برای یک مرورگر جایگزین سرویس‌گیرنده ایمیل Outlook خود کرد. XMLHttpRequest در سال ۲۰۰۶ به یک استاندارد وب تبدیل شد.

 

انواع درخواست HTTP در جاوااسکریپت
انواع درخواست HTTP در جاوا اسکریپت

Fetch API در سال ۲۰۱۵ با ES6 معرفی شد. رابط‌های عمومی درخواست و پاسخ سازگاری را ارائه می‌دهند درحالی‌که وعده‌ها (promises) زنجیره زنی آسان‌تری را ایجاد می‌کنند و بدون بازگشت تماس را در حالت همگام‌سازی قرار می‌دهند. واکشی تمیز، زیبا و ساده است، اما گزینه‌های خوب دیگری نیز وجود دارد که به طور خلاصه در این مقاله بررسی خواهیم کرد و در ادامه به طور مفصل در خصوص چند مورد خدمت شما توضیحاتی را ارائه خواهیم داد. روش‌های ایجاد درخواست در جاوا اسکریپ شامل موارد زیر است:

  • XMLHttpRequest
  • ajax
  • Qwest
  • SuperAgent
  • مشتری Http
  • Axios
  • Fetch

کد زیر یک مثال اساسی HTTP GET و POST را با استفاده از گزینه‌های مختلف نشان می‌دهد.

 

XMLHttpRequest

از XMLHttpRequest می‌توان برای درخواست داده از سرور وب استفاده کرد. این قدیمی‌ترین روش این مقایسه است و اگرچه گزینه‌های دیگر از آن پیشی می‌گیرند، اما همچنان سازگار و کارا است.

GET

POST

JQuery.ajax

این کتابخانه تا چندی پیش برای ایجاد درخواست‌های ناهم‌زمان HTTP به طور گسترده مورداستفاده قرار گرفت.

همه روش‌های Ajax jQuery یک مجموعه بزرگ از شی XMLHTTPRequest را برمی‌گرداند

GET

POST

Qwest

Qwest یک کتابخانه آژاکس ساده است که بر اساس وعده‌ها یا (Promises) ارائه شده است و از داده‌های منحصربه‌فرد XmlHttpRequest2 مانند ArrayBuffer ، Blob و FormData پشتیبانی می‌کند.

GET

POST

SuperAgent

SuperAgent ajax API است که برای انعطاف‌پذیری، خوانایی و با منحنی یادگیری کم ایجاد شده است. همچنین با Node.js کار می‌کند.

GET

متد . query ()  اشیا را می‌پذیرد که اگر با روش GET استفاده شود، یک‌رشته query ایجاد می‌کند. موارد زیر مسیر / dataserver / search؟ name = Manny & lastName = Peck & order = desc را تولید می‌کند.

POST

GET

POST

Axios

کتابخانه HTTP مبتنی بر وعده (promise) برای انجام درخواست‌های HTTP در مرورگر و Nodejs

GET

POST

FETCH

Fetch یک API مرورگر بومی است تا درخواستی را جایگزین XMLHttpRequest کند. Fetch اجازه می‌دهد تا درخواست‌های شبکه را آسان‌تر از XMLHttpRequest اعمال کنید. Fetch API از promises برای جلوگیری از اختلال پاسخگویی XMLHttpRequest استفاده می‌کند.

GET

POST

اما بپردازیم به مهم‌ترین بخش این مقاله که به طور مفصل روش درخواست جا و اسکریپت را برای چندین روش که در بالا اشاره شد توضیح می‌دهیم:

 

درخواست جاوا اسکریپت XHR

اگر مدت زیادی است که با JavaScript کار می‌کنید، احتمالاً شنیده‌اید که XMLHttpRequest (XHR) یکی از روش‌های درخواست در جاوا اسکریپت است. روش XHR کاملاً قدرتمند است زیرا شما می‌توانید از یک منبع از راه دور داده درخواست کنید، از یک منبع از راه دور داده دریافت کنید یا به یک منبع از راه دور داده ارسال کنید. تمام آنچه که ذکر شد ممکن است شبیه به هم باشند، اما آنها بخش‌های مختلف فرایند HTTP هستند.

بنابراین بیایید نگاهی به یکی از این درخواست‌ها بیندازیم:

در مثال بالا ما در حال ایجاد یک شی جدید XMLHttpRequest هستیم. اگر بخواهیم کاری را با نتیجه درخواست انجام دهیم، باید با مبحث تغییر listener آشنا شویم. در مثال مذکور، ابتدا باید بررسی می‌کنیم که درخواست کامل باشد، ازاین‌رو اگر مقدار readyState برابر ۴ باشد کد ما با موفقیت کارکرده و کد درست است.

 

 

چهار مقدار مختلف حالت readyState را می‌توان در مستندات MDN برای درخواست‌های XHR یافت پس زحمت بکشید قبل از هر چیز با این چهار مقدار آشنا شوید. اگر این مستندات را بررسی کنید تعداد کمی از کدهای وضعیتی وجود دارد که می‌توانند از سرور برگردانده شوند. در یک سناریو واقع‌بینانه، شما احتمالاً می‌خواهید همه امکانات برای بهترین تجربه کاربر را در خود جای دهید.

برای این مثال، پاسخ درخواست فقط در قسمت لاگ قابل‌مشاهده خواهد بود. هنگام بازکردن درخواست، URL مشخص می‌شود.

حالا بیایید درخواست XHR را کمی پیچیده کنیم. بیایید موارد زیر را انجام دهیم:

در کد بالا، ما اکنون یک درخواست POST با پارامترهای کوئری (query parameters) و یک بدنه درخواست (body request) ایجاد کرده‌ایم. توجه داشته باشید که ما باید پارامترهای درخواست را از طریق url رمزگذاری کنیم و همچنین متن درخواست را به‌صورت سریالایز شده تنظیم کنیم.

XMLHttpRequest قدرتمند است، اما به نظر من مشکل بیش از ارزش آن است. این امر ما را به رویکردهای مدرن‌تری نسبت به درخواست‌های HTTP با JavaScript هدایت می‌کند.

 

ایجاد درخواست از طریق JavaScript Fetch Request

عملکرد واکشی اطلاعات درخواست شما را می‌گیرد و نتیجه معروف به promise را پس می‌دهد.

بیایید نگاهی بیندازیم به درخواست XHR با این تفاوت که در این قسمت از واکشی اطلاعات استفاده می‌کنیم.

به‌جای نگرانی در مورد ایجاد listener یا نگرانی در مورد کد وضعیت پاسخ، می‌توانیم بررسی کنیم که آیا promise موفقیت‌آمیز بوده یا رد شده است. عملکرد واکشی یک promise با داده‌های خام را می‌دهد که باید به JSON، متن یا موارد دیگر تبدیل شود. به همین دلیل است که از زنجیره promise استفاده می‌شود. نتیجه نهایی این کد خاص به‌صورت JSON برگردانده می‌شود، بنابراین آن را به همین صورتی که هست تبدیل می‌کنیم قبل از اینکه آن را در زنجیر کردن به یک حلقه جدید در زنجیره promise درگیر کنیم.

اگرچه واکشی برای بسیاری از موقعیت‌ها بسیار قدرتمند است، اما گاهی اوقات می‌تواند نیاز به، به‌کارگیری ظرافت خاصی نداشته باشد. اجازه دهید برخی موارد را در درخواست خود تغییر دهیم:

در درخواست فوق، ما در حال تغییر از GET به POST هستیم و در حال تزریق request body و همچنین query parameters هستیم. توجه داشته باشید که query parameters مستقیماً با URL در یک خط قرار دارند و equest body یک serialized JSON object است.

برای بهبود کارها، می‌توانیم به سمت کتابخانه شخص ثالثی برویم که در برنامه‌های JavaScript ما مورداستفاده قرار می‌گیرد.

درخواست‌های HTTP با Axios JavaScript Library

یکی از کتابخانه‌های مهم برای ایجاد درخواست HTTP، کتابخانه axios است.

اگر از NPM استفاده می‌کنید، می‌توانید دستور زیر را اجرا کنید:

اگر از Node.js یا یک چارچوب مدرن حاوی Webpack یا موارد مشابه دیگر استفاده می‌کنید، دستور فوق عالی کار خواهد کرد، اما هنگام ساخت یک برنامه کاربردی مبتنی بر مرورگر با جاوا اسکریپت کمک چندانی نمی‌کند. در عوض، می‌توانید کتابخانه را با تگ زیر وارد کنید:

ازآنجاکه این یک مثال یک مبحث پایه‌ای و بنیادی در JavaScript است، استفاده از تگscript  خوب است، توجه داشته باشید که اگر از رویکرد NPM استفاده می‌کنید، فراموش نکنید که کتابخانه را در فایل JavaScript وارد کنید.

با استفاده از کد زیر، می‌توانید از axios استفاده کنید:

کد فوق نسخه اصلی استفاده از تابع واکشی یا XMLHttpRequest است. مانند عملکرد واکشی، خروجی رویکرد axios یک promise است.

موارد زیر را به عنوان مثال در نظر بگیرید:

توجه داشته باشید که ما این بار روش درخواست را به درخواست POST تغییر داده‌ایم. در این قسمت تصمیم گرفتیم که پارامترهای جستجو را در URL بخواهیم که از طریق شی params و یک بدنه درخواست که به شی داده اضافه شده است، اضافه شوند. البته نیازی نبود که این پارامترها را با استفاده از url رمزگذاری کنیم یا متن درخواست را سریال‌سازی کنیم به‌ویژه هنگامی‌که تعداد درخواست‌های زیادی دارید یا پارامترهای جستجوی زیادی دارید. حتی می‌توانید اطلاعات هدر را نیز در این بخش اضافه کنید.

نتیجه گیری

چند گزینه برای ایجاد درخواست‌های HTTP در برنامه‌های JavaScript را مشاهده کردید. رویکردهای ذکر شده، در برخی شرایط، باید فراتر از برنامه‌های وب باشد. این بدان معنی است که شما باید بتوانید از رویکردهای ذکر شده در برنامه‌های مبتنی بر مرورگر، برنامه‌های backend، برنامه‌های تلفن همراه کراس پلتفرم و موارد دیگر استفاده کنید.

درخواست ها و پاسخ ها در HTTPRequest
درخواست ها و پاسخ ها در HTTPRequest

به‌طورکلی بهتر است در مواقعی که درخواست پیچیده‌تری موردنیاز باشد، از axios به کتابخانه شخص ثالث استفاده کنیم.