درود دوستان عزیزم امروز اومدم با یه موضوع جدید و جالب ✌️?
موضوع : Api چی هست و چگونه می توان آن را با جاوا اسکریپ دریافت کرد ؟
خب موضوع چیه ؟؟ ??
چند وقتی هست که برای یکسری پروژه ها مجبور به گرفتن api و نمایش اطلاعات شدم ، دربارش تحقیق کردم و شروع به کد نویسی کردم ?
سوال اولی که شاید براتون پیش بیاد اینه که اصلا api چی هست ؟ ???
این رو باید بگم که من درباره نوشتن api نمی خواهم صحبتی انجام دهم چون بنده صرفا یک برنامه نویس فرانت اند هستم .✌
در لغت : Application Programming Interface یا همان رابط برنامه نویسی کاربردی است .
یکی از محبوب ترین انواع REST API , API هست که دیتا را در قالب json ارسال و دریافت می کند. چندی پیش در این مورد پستی از یک مقاله برای شما گذاشته بودم.
این هم لینک مراجعه به پست قبلی ???
حالا Api در عمل چه کاری انجام می دهد ؟
در واقع توسط کلاینت یک سری درخواست (Request) را به سرور ارسال می‌کنیم و توسط API، پاسخ(Response) آن سرور را دریافت می‌کنیم.
این یک تعریف ساده برای api است ارسال یک در خواست و دریافت آن با api
در دنیای فرانت اند Api چه می کند ؟
در دنیای فرانت اند برای نمایش و ثبت اطلاعات استفاده می شد . بهتر است با مثالی، مسئله را شفاف کنم :
✅ می توان تعدادی از اطلاعات مورد نظر « اعم از : عکس ، عنوان ، توضیحات ، قیمت و ... » یک محصول را داخل باکس هایی نمایش داد .
✅ یا اینکه برای ورود کاربر ها استفاده کرد (که این مورد پیشنهاد نمی شود)
✅ ثبت اطلاعات پروفایل
حال که تقریبا با این مفهوم آشنا شده ایم به قسمت دوم موضوع یعنی چگونه در جاوا اسکریپت آن را دریافت کرده و استفاده کنیم می رسیم : ????
ابتدا باید یک url داشته باشیم تا اطلاعات را از آن دریافت کنیم .
من برای آموزش و یادگیری از Api آماده یا جعلی استفاده می کنم که از سایت زیر گرفته شده ?
یک متغیر ایجاد می کنیم و مقدارش رو برابر با شی XMLHttpRequest قرار میدهیم .
در انتها از متد های ()open() , send استفاده می کنیم . متد open نیاز به سه پارامتر دارد :
پارامتر اول ، نحوه درخواست .
پارامتر دوم ، url هست که آدرس یک فایل در سرور است .
و پارامتر سوم که می توان آن را در نظر نگرفت true or false ( Asynchronous ) یا همان نامتقارن بودن هست. درخواست های سرور باید به صورت ناهمزمان ارسال شوند.
و در آخر با متد ()send درخواست ارسال می شود .???
بعد از نوشتن کد های بالا پراپرتی onreadystatechange را صدا میزنیم و یک فانکشن به آن پاس می دهیم تا به محض تغییر فانکشن اجرا شود .
داخل آن یک شرط تعریف می کنیم تا وضعیت شی XMLHttpRequest مشخص شود .
بخش اول شرط ?
بخش اول readyState : این خاصیت وضعیت شی XMLHttpRequest را در هر لحظه مشخص می کند . این شی می توان 4 حالت را داشته باشد که بنابر آن یکی از اعداد 0 تا 4 را برمی گرداند :
0_ جوابی برای درخواست دریافت نشده است .
1_ ارتباط با سرور برقرار شده است .
2_ درخواست به سرور رسیده است .
3_ سرور ، در حال پردازش درخواست است .
4_ درخواست بطور کامل انجام شده و پاسخ آماده است .
بخش دوم شرط ?
بخش دوم Status : این پارامتر وضعیت کلی درخواست و شی را مشخص می کند . که می تواند 2 حالت داشته باشد .
1_ 200 : وضعیت بدون مشکل و ایراد است . OK
2_ 400 : پیدا نشدن صفحه . page not found
کم کم به دریافت محتوا و نمایش آن نزدیک می شویم .
اول باید با مفهوم responseText آشنا شوید : که پاسخ را به صورت رشته ای دریافت می کند.
و برای تبدیل پاسخ به یک شی باید از JSON.parse استفاده کنیم چون هنگام دریافت داده از یک وب سرور، داده ها همیشه یک رشته هستند .
و بعد از آن نیاز به یک حلقه داریم تا بتوانیم تمام اطلاعات را همانطور که می خواهیم نمایش دهیم .
در آخر اگر محتوا و اطلاعات خیلی زیاد باشد می توان آن را به صورت pagination یا صفحه بندی شده نماش داد ، که اگر دوست داشته باشید می تونم براتون یک مقاله در موردش بنویسم .
فایل کامل کدها را از اینجا بردارید ?
?https://github.com/alireza-moghilan/api_fake
حمایت یادتون نره . ❤️
خوشحال می شم که مقاله های قبلی من را مطالعه کنید .
