همونطور که اطلاع دارید API مخفف Application Programming Interface می باشد. مرورگرها API های زیادی رو در اختیار کاربران قرار میدن و برنامه نویسان میتونن با استفاده از اونا کارهای مختلفی رو انجام بدهند. مثلا میتونیم از Full Screen API یا Web Audio API یا Battery API و ... به عنوان مثالهایی برای API نام ببریم. با استفاده از هر کدام از این API ها میتونین کار خاصی رو انجام بدین.
مثلا با استفاده از Battery Status API میتونین وضعیت فعلی باتری سیستم خودتون رو بررسی کنید. با استفاده از Web Audio API میتونین صداهای مورد نظرتون رو مدیریت کرده و از اونا در سایتتون استفاده کنید.
اخیرا یک مورد جدید بنام fetch API به مرورگرها اضافه شده که با استفاده از اون میتونین اطلاعات مربوط به یک آدرس رو دریافت کرده و در صفحه سایتتون نمایش بدین. همونطور که میدونین با استفاده از Ajax میتونیم اطلاعات مورد نظرمون رو بصورت ناهمزمان یا Asynchronous دریافت کرده و در جای مورد نظرمون قرار بدیم. برای اینکار از XMLHttpRequest استفاده میکنیم و با استفاده از متدهای اون به اطلاعات مورد نظرمون دسترسی پیدا میکنیم.
ویژگی fetch API یک جایگزین مدرن و جدید برای XMLHttpRequest می باشد که کار کردن با Ajax رو خیلی راحتتر و شیرین تر از گذشته میکنه. شما با استفاده از window.fetch که در اکثر مرورگرها پشتیبانی می شود، میتونین درخواستتون رو فرستاده و اطلاعات مورد نظرتون رو بصورت ناهمزمان دریافت کنید.
میبینید که مرورگرهای IE از این ویژگی اصلا پشتیبانی نمیکنن. شما میتونین از یک Polyfill که توسط Github توسعه داده شده استفاده کنید و مرورگرهای قدیمی تر رو نیز تحت پوشش قرار بدین.
در ابتدا بررسی میکنیم که مرورگر فعلی از XMLHttpRequest پشتیبانی میکند یا خیر. اگر پشتیبانی بکنه یک نمونه جدید از اون میسازیم و در متغیر request ذخیره میکنیم. اگر مرورگر ما IE باشه و از این مورد پشتیبانی نکند، باید کارهای دیگه ای رو در try-catch انجام بدیم. در نهایت اگر مرورگر مورد نظر یکی از موارد بالا رو پشتیبانی بکنه، ما اون رو در متغیر request ذخیره سازی میکنیم. حالا میتونیم با استفاده از این متغیر به آدرسهای مورد نظرمون درخواست یا Request فرستاده و Response یا جواب سرور رو دریافت کنیم.
با استفاده از آرگومان یا ورودی دوم متد open، آدرس url که درخواست باید به اون فرستاده بشه رو مشخص میکنیم. در نهایت با استفاده از آرگومان سوم میتونیم مشخص کنیم که این درخواست ناهمزمان باشه یا همزمان. مقدار این ویژگی دلخواه بصورت پیش فرض true می باشد و با اینکار درخواست مورد نظر Asynchronous می باشد و جلوی اجرا شدن کدهای دیگر رو نمیگیره و بصورت موازی و Parallel با کدهای دیگر اجرا شده و نتیجه بعد از مشخص شدن در اختیار ما قرار میگیره.
