نحوه فراخوانی API در جاوااسکریپت به همراه مثال
فراخوانی API در جاوااسکریپت یک عمل کلیدی است که توسعه‌دهنده‌های وب باید نحوه انجام آن را بدانند. فراخوانی به شما اجازه می‌دهد تا داده را از منابع خارجی دریافت کرده و در اپلیکیشن خود یکپارچه کنید. در این آموزش ما فرایند فراخوانی API را به صورت گام‌به‌گام توضیح می‌دهیم. در پایان این پست شما درک کاملی از نحوه تعامل با APIها در جاوااسکریپت خواهید داشت. اگر در دنیای APIها تازه‌وارد‌‌اید، پیشنهاد می‌کنیم ابتدا پست‌های زیر را مطالعه کنید:
چطور از Fetch API در درخواست‌های GET استفاده کنیم:
برای ایجاد درخواست‌های API در جاوااسکریپت باید از دستور fetch که در مرورگرهای امروزی به صورت پیش‌فرض قرار دارد، استفاده کنید. این دستور ارسال درخواست‌های 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); }); |
در این کد ما کارهای زیر را انجام دادهایم:
- تعریف URL برای API که می‌خواهیم فراخوانی کنیم
- استفاده از تابع fetch برای ایجاد درخواست GET به URL
- متد ()then. پاسخ غیرهمزمان از سوی سرور را پردازش می‌کند
- پارامتر response.ok برای اطمینان از معتبر بودن پاسخ قرار داده شده است
- تبدیل داده JSON با استفاده از متد ()response.json
- لاگ کردن داده در کنسول و پردازش خطاها در صورت وجود
نحوه رسیدگی به پاسخ‌ها
وقتی یک فراخوانی 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, ۲); }) .catch(error => { console.error('Error:', error); }); |
در این مثال، ما از متغیر outputElement برای انتخاب یک المان HTML برای نمایش داده استفاده می‌کنیم. از ویژگی textContent برای به‌روزرسانی محتوای المان به کمک داده JSON نیز بهره برده‌ایم.
رسیدگی به خطاها در فراخوانی API
رسیدگی به خطاها یکی از گام‌های ضروری فراخوانی API در جاوااسکریپت است. درخواست‌های API به دلایل مختلف نظیر اشکالات شبکه، مشکلات سرور و URLهای نادرست رد می‌شوند. در مثال قبلی ما از قابلیت‌های رسیدگی به خطای fetch برای دریافت و رسیدگی به خطاها استفاده کردیم. علاوه بر این می‌توانید برای تعیین ماهیت خطا کد وضعیت HTTP را با استفاده از response.status دریافت کنید:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ |
const apiUrl = 'https://api.example.com/data'; fetch(apiUrl) .then(response => { if (!response.ok) { if (response.status === ۴۰۴) { throw new Error('Data not found'); } else if (response.status === ۵۰۰) { 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, ۲); }) .catch(error => { console.error('Error:', error); }); |
در این مثال، ما کدهای وضعیت HTTP خاص (نظیر ۴۰۴ یا ۵۰۰) را مشخص کرده و یک پیام با جزییات بیشتر قرار دادهایم.
نحوه ایجاد درخواست‌های POST
تا به اینجا تمرکز ما بر ایجاد درخواست‌های GET بود. اما ممکن است شما به ارسال اطلاعات از طریق API هم نیاز داشته باشید که در این صورت به درخواست‌های 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, ۲); }) .catch(error => { console.error ('Error:', error); }); |
در این مثال ما کارهای زیر را انجام دادهایم:
- تعریف URL و داده‌ای که می‌خواهیم ارسال کنیم.
- ایجاد شیء requestOptions که متد، نوع محتوا و داده را مشخص کرده است.
- ارسال شیء requestOptions به تابع fetch.
بقیه کد مانند مثال قبلی است.
چطور با کلیدهای API کار کنیم؟
بسیاری از APIها به احراز هویت از طریق کلیدهای API نیاز دارند تا تنها کاربران مجاز به داده‌های API دسترسی داشته باشند.
هنگام کار با این APIها شما باید کلید 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, ۲); }) .catch(error => { console.error('Error:', error); }); |
در این مثال ما متغیر apiKey را تعریف کرده و با پیشوند «Bearer» درهدر شیء requestOptions قرار دادهایم.
جاوااسکریپت نامتقارن
درخواست‌های API به طور معمول نامتقارن‌اند که یعنی اجرای کد در زمان انتظار برای پاسخ متوقف نمی‌شود. این موضوع باعث می‌شود تا اپلیکیشن شما بتواند حتی زمانی که بار ترافیکی شبکه زیاد بوده و اینترنت کند است، به مشتریان خدمات دهد.
ما برای رسیدگی به عملیات‌های نامتقارن در کد از promises و متد ()then. برای تعیین اتفاقات لازم پس از تکمیل عملیات استفاده می‌کنیم. به این ترتیب بدنه اصلی اپلیکیشن جاوااسکریپت شما در حالی که منتظر پاسخ API است تسک‌های خود را انجام می‌دهد.
نمونه‌های واقعی از فراخوانی API
حالا که اصول فراخوانی API را فرا گرفتیم، وقت آن رسیده تا چند نمونه واقعی را بررسی کنیم.
Fetch کردن داده‌های هواشناسی
در این مثال ما از API سرویس OpenWeatherMap برای دریافت داده‌های هواشناسی یک مکان مشخص استفاده می‌کنیم. شما می‌توانید از طریق ثبت‌نام کلید API این سایت را به طور رایگان دریافت کنید.
کد زیر نحوه ایجاد یک درخواست GET برای fetch کردن داده‌های هواشناسی و نمایش آن در صفحه وب را نشان می‌دهد:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ |
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&#۰۹۱;۰].description; const location = data.name; outputElement.innerHTML = `<p>Temperature in ${location}: ${temperature}°C</p> <p>Weather: ${description}</p>`; }) .catch(error => { console.error('Error:', error); }); |
ارسال فرم به سرور
فرض کنید شما یک فرم تماس ساده در سایت خود دارید و می‌خواهید داده‌های آن را برای پردازش به سرور بفرستید. کد زیر نحوه انجام این کار را نشان می‌دهد:
کد HTML فرم:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
<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); }); }); |
یادگیری فراخوانی API در جاوااسکریپت برای توسعه‌دهنده‌های وب ضروری است
فراخوانی API برای توسعه‌دهنده‌های وب یک مهارت ضروری است که به شما اجازه می‌دهد به دریایی از داده‌ها و خدمات دسترسی داشته باشید. در این پست آموزشی ما مفاهیم و روش‌های ضروری را پوشش داده و دو مثال واقعی از نحوه فراخوانی API در جاوااسکریپت را نشان دادیم. همان‌طور در پروژه‌های خود با API کار می‌کنید، با APIهای مختلفی که هر کدام نیازمندی‌ها و مستندات خود را دارند سروکار خواهید داشت. با چیزهایی که از این پست یاد گرفته‌اید، می‌توانید با اطمینان بیشتری از APIها در پروژه‌های جاوااسکریپت خود استفاده کنید.
در شبکههای اجتماعی به اشتراک بگذارید
