آموزش نحوه فراخوانی یک API در جاوا اسکریپت – با مثال عملی

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

در این آموزش از مجله مکتب خونه شما را با مراحل برقراری ارتباط با API در جاوا اسکریپت به‌صورت گام به گام آشنا می‌کنم. پس از مطالعه این مقاله درک کاملی از نحوه تعامل با API‌ها در پروژه‌های جاوا اسکریپت خواهید داشت. پس توصیه می‌کنیم این مطلب از سری آموزش‌های سریع جاوا اسکریپت در مکتب خونه را از دست ندهید.

API چیست؟

قبل از اینکه به جزئیات فنی فراخوانی یک API در جاوا اسکریپت بپردازیم اجازه دهید با اصول اولیه شروع کنیم. API یا Application Programming Interface مانند پلی است که به دو سیستم نرم‌افزاری مختلف اجازه می‌دهد تا با یکدیگر در ارتباط باشند. این ارتباط شامل مجموعه‌ای از قوانین و پروتکل‌ها برای مدیریت درخواست‌ها و تبادل داده‌ها می‌شود.

مرجع کامل و تخصصی آموزش طراحی سایت + اعطای گواهینامه دوره

کلیک کنید

API‌ها در جاوا اسکریپت برای دریافت اطلاعات از منابع خارجی، ارسال داده به سرویس‌های خارجی یا انجام هر عملیات دیگری در راستای تبادل اطلاعات میان یک سرور و یک کلاینت مناسب ساخته شده‌اند. جالب است بدانید APIها در Javascript به طور گسترده‌ای به توسعه دهندگان جهت دسترسی به داده‌ها از منابع مختلف آنلاین مانند پلتفرم‌های رسانه‌های اجتماعی، داده‌های آب‌و‌هوا، اطلاعات ‌مالی مربوط به بانک‌ها و بازارهای مالی و هر منبع قابل دسترسی دیگری کمک می‌کنند.

در حقیقت بخش عمده‌ای از داده‌هایی که هر روز در سایت‌های مختلف در اختیار کاربران قرار می‌گیرند توسط همین سرویس‌ها تأمین می‌شوند. مسئله که در مورد APIها وجود دارد امنیت و اجازه دسترسی است. این امکان باید از طرف سرور برقرار شده باشد تا شما بتوانید داده‌های مورد نیاز خود را دریافت کنید.

پیشنهاد مطالعه: Const در جاوا اسکریپت: نگهبان مقادیر شما در دنیای متغیر

نحوه انتخاب یک API

اولین قدم برای کار با api در جاوا اسکریپت انتخاب یک سرویس از این نوع طبق نیازهای برنامه‌نویسی شما است؛ زیرا API‌های بی‌شماری در دسترس هستند که داده‌های متنوعی با موضوعات مختلف ارائه می دهند. شاید برخی از قابلیت‌های مورد انتخابی شما بیش از نیاز پروژه باشد. حتی برخی امکانات محدودی دارند و مناسب هر کاری نیستند.

در برخی موارد هم امکان دسترسی در کشورهای خاص محدود می‌شود. مخصوصاً ایران که بر اثر تحریم‌ها با محدودیت‌های زیادی دست و پنجه نرم می‌کند. البته در مورد جاوا اسکریپت زیاد جای نگرانی نیست. اما در این بخش قرار است با دسته‌بندی انواع API در جاوا اسکریپت آشنا شویم.

• API‌های RESTful: این سرویس‌ها بیشتر در بازیابی و دست‌کاری داده‌های ساده کاربرد دارند. آنها از روش‌های استاندارد درخواست در پروتکل HTTP مانند GET، POST، PUT و DELETE استفاده می‌کنند.
• APIهای شخص ثالث «Third-Party»: بسیاری از سرویس دهنده‌های آنلاین APIهایی را در اختیار کاربران خود قرار می‌دهند که کاربر بتواند بر اساس نیاز خود به داده‌های عمومی آن‌ها دسترسی داشته باشد. مانند Twitter API برای دسترسی به توییت‌ها یا Google Maps API برای دریافت داده‌های مربوط به مکان جهت مشخص کردن لوکیشن محل شرکت یا هر چیز دیگری.
• API‌های آب‌و‌هوا: اگر به داده‌های آب و هوا نیاز دارید، APIهایی مانند OpenWeatherMap یا WeatherAPI گزینه‌های خوبی هستند. این سرویس‌ها توسط سازمان‌های هواشناسی در سراسر جهان ارائه می‌شوند.
• APIهای مالی: برای واکشی داده‌های مالی مانند قیمت سهام، می‌توانید از این نوع APIها استفاده کنید. Alpha Vantage یا Yahoo Finance موارد شناخته شده در این زمینه هستند.

در هر دسته‌بندی تعداد زیادی API وجود دارد. از این رو بهتر است هر کدام را امتحان کنید تا بهترین گزینه متناسب برای پروژه خود را پیدا کنید. پیشنهاد ما استفاده از مواردی است که بیشتر شناخته شده هستند؛ زیرا امتحان خود را پس داده و قابلیت اطمینان بالاتری دارند.

در ادامه با آموزش rest api در جاوا اسکریپت در خدمت شما خواهیم بود. پس از یادگیری این مراحل به سادگی می‌توانید هر API دیگری را از هر نوعی استفاده کنید. فقط کافیست مراحلی که یاد می‌گیرید را برای سرویس مورد نظر خود به کار بگیرید.

نحوه استفاده از Fetch API برای درخواست‌های GET

برای ارسال درخواست‌های API در جاوا اسکریپت، می‌توانید از fetch API استفاده کنید. این دستور در آخرین نسخه‌های مرورگرها فعال شده است. fetch یک API مبتنی بر promise است که ارسال درخواست‌های HTTP و رسیدگی به پاسخ‌ها را به صورت ناهم‌زمان امکان‌پذیر می‌سازد.

کد زیر نحوه ایجاد یک درخواست GET با استفاده از fetch است:

// Define the API URL
const apiUrl = 'https://api.example.com/data';

// Make a GET request
fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

توضیحات زیر می‌تواند در درک این کد به شما کمک کند:

• در متغیر apiUrl آدرسی را تعریف کردیم که می‌خواهیم API را از آن فراخوانی کنیم.
• از تابع fetch برای ارسال درخواست GET به URL مورد نظر استفاده کردیم.
• با متد then()‎ پاسخ ناهم‌زمان از سرور مدیریت می‌شود.
• ویژگی answer.ok برای اطمینان از معتبر بودن پاسخ دریافتی کاربرد دارد.
• داده‌های JSON را با استفاده از متد ()reseption.json تجزیه کردیم.
• در نهایت ارورهای احتمالی را در کنسول نمایش می‌دهیم. این مرحله برای اطمینان از صحت عملکرد کد ضروری است.

نحوه رسیدگی به پاسخ‌های «Responses» دریافتی از APIها

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

دوره آموزش کامل نود جی اس از مبتدی تا پیشرفته

کلیک کنید

شما می‌توانید داده‌ها را به روش‌های مختلفی پردازش کنید. بخش مهمی از این پردازش‌های می‌توانند شامل داده‌ها در یک صفحه وب یا ذخیره آن‌ها در یک پایگاه داده باشند. در مثال بعدی داده‌ها را در یک عنصر HTML نمایش می‌دهیم.

const apiUrl = 'https://api.example.com/data';
const outputElement = document.getElementById('output');

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Display data in an HTML element
    outputElement.textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('Error:', error);
  });

در این مثال از متغیر outputElement برای انتخاب یک عنصر HTML استفاده شده است که قصد داریم داده‌ها را در آن نمایش دهیم. ویژگی textContent نیز برای به‌روزرسانی محتوای آن عنصر با داده‌های JSON استفاده می‌شود.

پیشنهاد مطالعه: مقایسه دو آرایه در جاوا اسکریپت: یک راهنمای جامع

نحوه مدیریت خطاها در فراخوانی API

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

اگر توجه کرده باشید در مثال‌ اول با یک دستور شرطی و استفاده از ویژگی response.ok سعی کردیم این نوع خطا‌ها را به نوعی مدیریت کنیم. در کد زیر بررسی و کنترل خطاهای احتمالی کمی دقیق‌تر و با جزئیات بیشتری پیاده‌سازی شده است.

const apiUrl = 'https://api.example.com/data';

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error('Data not found');
      } else if (response.status === 500) {
        throw new Error('Server error');
      } else {
        throw new Error('Network response was not ok');
      }
    }
    return response.json();
  })
  .then(data => {
    outputElement.textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('Error:', error);
  });

در این مثال کدهای وضعیت خاصی از پروتکل HTTP «مانند ۴۰۴ و ۵۰۰» را مورد بررسی قرار دادیم. سپس با پیام‌های خطای توصیفی اطلاعات قابل‌درک‌تری را در اختیار کاربر گذاشتیم. با پیروی از این الگوی ساده می‌توانید مدیریت خطاها را مطابق با نیازهای پروژه در حال اجرای خود انجام دهید.

نحوه ایجاد درخواست‌های POST

تا اینجا روی ایجاد درخواست‌های GET تمرکز داشتیم که برای واکشی داده‌ها از یک API استفاده می‌شود. اما ممکن است لازم باشد داده‌ها را به یک API ارسال کنید. این کار با استفاده از درخواست‌های HTTP از نوع POST امکان‌پذیر است. نحوه ایجاد یک درخواست POST ساده با استفاده از fetch را در ادامه می‌بینید:

const apiUrl = 'https://api.example.com/data';
const data = {
  name: 'John Doe',
  email: 'johndoe@example.com',
};

const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
};

fetch(apiUrl, requestOptions)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    outputElement.textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error

('Error:', error);
  });

در این مثال:

• در ابتدا آدرس API مورد نظر خود را به عنوان یک شی در نظر گرفتیم.
• سپس یک شی با نام requestOptions ساختیم تا ویژگی‌های زیر را برای درخواست Fetch مشخص کنیم:
  • نوع متد: POST
  • نوع محتوا: application/json
  • ساختار داده: JSON
• در نهایت requestOptions را به تابع fetch پاس دادیم.
• بقیه کد مانند نمونه‌های قبلی با مدیریت خطا و پردازش داده‌ها دست نخورده باقی ماندند.

پیشنهاد مطالعه: Map در جاوا اسکریپت – آموزش مپ به صورت ساده و کامل

نحوه کار با API Key

بسیاری از APIها نیاز به احراز هویت از طریق API Key دارند تا اطمینان حاصل شود که فقط کاربران مجاز می‌توانند به داده‌ها دسترسی داشته باشند. در نتیجه برای کار با این نوع APIها باید کلید مربوطه را در کد خود تعبیه کنیم. این کار را به شکل زیر انجام می‌دهیم.

const apiKey = 'your_api_key_here';
const apiUrl = 'https://api.example.com/data';

const requestOptions = {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
  },
};

fetch(apiUrl, requestOptions)
  .then(response => {
    if !response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    outputElement.textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('Error:', error);
  });

در این مثال یک شی با نام apiKey ساختیم که نگهدارنده کلید سرویس مورد نظر شماست. کلید را باید به جای your_api_key_here قرار دهید. سپس این شی را به عنوان مقدار به بخش Authorization در requestOptions دادیم. با این کار اطلاعات احراز هویت همراه درخواست ارسال خواهد شد.

ناهم‌زمانی در جاوا اسکریپت

اجرای درخواست‌ها و فراخوانی APIها معمولاً ناهم‌زمان «asynchronous» است. به این معنی که در زمان انتظار برای پاسخ اجرای ادامه کد‌ها متوقف نمی‌شود. این قابلیت از این نظر اهمیت دارد که هنگامی که منتظر دریافت پاسخ از سرور هستیم پویایی و پاسخگوی برنامه وب ما مختل نمی‌شود. در واقع کاربر احساس انتظار کشیدن را حس نمی‌کند.

آموزش Asynchronous در جاوا اسکریپت

کلیک کنید

برای مدیریت و پیاده‌سازی عملیات ناهم‌زمان در متد Fetch از ‌promiseها و متد then()‎ استفاده می‌کنیم تا مشخص کنیم که پس از اتمام عملیات چه اتفاقی می‌افتد. با این قابلیت به برنامه جاوا اسکریپت خود اجازه می‌دهید که در زمان انتظار برای پاسخ API به اجرای سایر وظایف برنامه‌نویسی شده ادامه دهد. در ادامه نحوه عملکرد جاوا اسکریپت در اجرای ناهم‌زمان کد‌ها را به صورت خلاصه توضیح می‌دهیم.

• وقتی با fetch اقدام به ارسال درخواست می‌کند یک عملیات ناهم‌زمان را آغاز کرده است. پس بلافاصله یک ‌ promise را به شما برمی‌گرداند.
• از متد then()‎ برای پیوست کردن توابعی استفاده می‌شود که وقتی ‌ promise موفق بود پاسخ دریافتی و اگر ناموفق بود پیغام خطا را اجرا ‌می‌کنند.
• هر کدی خارج از بلوک‌های then()‎ می‌تواند در حالی که فراخوانی API در حال انجام است به عملیات اجرا ادامه دهد.
• این رفتار ناهم‌زمان کمک می‌کند تا اطمینان حاصل شود که برنامه شما پاسخگو باقی می‌ماند و در حین انتظار برای دریافت داده از API متوقف نمی‌شود.

مثال‌های عملی برای فراخوانی API

حال که اصول برقراری ارتباط با API در جاوا اسکریپت را یاد گرفتیم، اجازه دهید چند نمونه واقعی برای استفاده از این سرویس را بررسی کنیم تا ببینیم چگونه می‌توان این دانش را در عمل به کار برد.

مثال اول: واکشی داده‌های آب‌و‌هوا

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

const apiKey = 'your_openweathermap_api_key';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${apiKey}`;

const outputElement = document.getElementById('weather-output');

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    const temperature = data.main.temp;
    const description = data.weather[0].description;
    const location = data.name;
    outputElement.innerHTML = `<p>Temperature in ${location}: ${temperature}°C</p>
                               <p>Weather: ${description}</p>`;
  })
  .catch(error => {
    console.error('Error:', error);
  });

در این مثال ما یک درخواست GET به OpenWeatherMap API دادیم. کلید API را به عنوان پارامتر به URL پیوست کردیم. در نهایت دما و توضیحات آب‌وهوا را در یک صفحه وب نمایش می‌دهیم.

پیشنهاد مطالعه: ۱۷ پروژه جاوا اسکریپت جذاب و کاربردی در سه سطح مختلف

مثال دوم: ارسال یک فرم به سرور

فرض کنید یک فرم تماس ساده در وب سایت خود دارید و می‌خواهید داده‌های آن را برای پردازش به سرور ارسال کنید. در ادامه نحوه درخواست POST برای ارسال داده‌های فرم به سرور نمایش داده شده است. کد اچ تی ام ال این مثال به صورت زیر است:

<form id="contact-form">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Submit</button>
</form>
<div id="response-message"></div>

همچنین بخش جاوا اسکریپت این مثال به صورت زیر است:

const apiUrl = 'https://api.example.com/submit';

const contactForm = document.getElementById('contact-form');
const responseMessage = document.getElementById('response-message');

contactForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const formData = new FormData(contactForm);

  const requestOptions = {
    method: 'POST',
    body: formData,
  };

  fetch(apiUrl, requestOptions)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.text();
    })
    .then(data => {
      responseMessage.textContent = data;
    })
    .catch(error => {
      console.error('Error:', error);
    });
});

در مثال بالا به رویداد ارسال فرم گوش می‌دهیم. از ارسال پیش‌فرض فرم جلوگیری شده و از FormData برای سریال‌سازی داده‌های فرم استفاده شده است. سپس یک درخواست POST به سرور ارسال می‌شود. پس از ارسال داده‌های فرم، پاسخ سرور را اعم از موفقیت و عدم موفقیت در کنسول چاپ می‌کنیم.

حرف آخر

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

مرجع کامل آموزش وردپرس + اعطای گواهینامه

کلیک کنید

در این راهنمای جامع به مفاهیم و تکنیک‌های ضروری از جمله ایجاد درخواست‌های GET و POST، مدیریت پاسخ‌ها و خطاها و کار با کلیدهای API پرداختیم. شما همچنین دو مثال عملی و واقعی را مشاهده کردید که نحوه واکشی داده‌های آب‌وهوا و ارسال داده‌های فرم را به سرور نشان دادند.

لازم به ذکر است که با ادامه کار با API‌ها در پروژه‌های خود ممکن است با چالش‌هایی روبرو شوید. به‌عنوان مثال بعضی از APIها می‌توانند محدودیت‌های نرخ درخواست، خط‌مشی‌های استفاده و دیگر محدودیت‌های مشکل‌ساز داشته باشند،؛ بنابراین همیشه سعی کنید مستندات API انتخابی خود را با دقت مطالعه کنید.

تبریک می‌گوییم. با دانشی که از این آموزش کسب کردید تمام آنچه برای ارتباط با API با جاوا اسکریپت نیاز داشتید را دارید. کافی است به خود جرئت دهید و شروع به تمرین با این ابزار قدرتمند کنید. به شما قول می‌دهیم فاصله زیادی با برنامه‌نویسی حرفه‌ای در جاوا اسکریپت ندارید.

آموزش جاوا اسکریپت در مکتب خونه

Web API ابزاری است که بیشترین کاربرد را برای سایت‌ها دارد. یادگیری آن در جاوا اسکریپت یک مهارت ضروری و غیر قابل چشم پوشی به شمار می‌رود. در این مطلب در مورد چگونگی عملکرد و نحوه استفاده آن صحبت کردیم. باید یادگیری مطالب بیشتر در این زمینه و برنامه‌نویسی به زبان جاوا اسکریپت بهترین دوره‌های آموزش جاوا اسکریپت و آموزش طراحی سایت و آموزش برنامه نویسی را در مکتب خونه برای شما آماده کردیم.

رفرنس: freecodecamp