مقدمه‌ای بر API و Fetch 📡

یاد می‌گیریم چطوری از سرورهای دیگه اطلاعات بگیریم و اپ‌های پویا بسازیم.

API دیگه چه صیغه‌ایه؟

API مخفف Application Programming Interface هست. فکر کن رفتی رستوران و می‌خوای غذا سفارش بدی. تو که خودت بلند نمی‌شی بری تو آشپزخونه! از طریق گارسون (API) سفارشت رو به آشپزخونه (سرور) می‌دی و گارسون هم غذات (اطلاعات) رو برات میاره. API یه رابط بین برنامه ما و یه سرور دیگه‌ست که بهمون اجازه می‌ده از اطلاعات و خدمات اون سرور استفاده کنیم.

`fetch()`: گارسون مخصوص جاوااسکریپت!

`fetch` یه ابزار مدرن تو جاوااسکریپته که کارش دقیقاً مثل همون گارسونه. باهاش می‌تونیم به یه آدرس (URL) درخواست بفرستیم و اطلاعات رو بگیریم. `fetch` یه Promise برمی‌گردونه، پس باید با `then` یا `async/await` باهاش کار کنیم.

// آدرس یه API رایگان برای گرفتن اطلاعات کاربران
const apiUrl = 'https://jsonplaceholder.typicode.com/users/1';

async function getUser() {
  try {
    const response = await fetch(apiUrl); // ارسال درخواست
    const userData = await response.json(); // تبدیل جواب به فرمت JSON
    
    console.log('اطلاعات کاربر:', userData.name);
    console.log('ایمیل:', userData.email);
  } catch (error) {
    console.error('خطا!', error);
  }
}

getUser();

تمرین! 🧠

یه دکمه تو HTML بساز. کاری کن که با هر بار کلیک روی دکمه، یه جوک رندوم از API رایگان `https://api.chucknorris.io/jokes/random` گرفته بشه و متنش داخل یه تگ `p` نمایش داده بشه.

جواب تمرین

<!-- HTML -->
<button id="joke-btn">یه جوک بگو!</button>
<p id="joke-text"></p>

<!-- JavaScript -->
<script>
  const jokeBtn = document.getElementById('joke-btn');
  const jokeText = document.getElementById('joke-text');
  const jokeApiUrl = 'https://api.chucknorris.io/jokes/random';

  async function getJoke() {
    jokeText.innerText = 'صبر کن ببینم...';
    try {
      const response = await fetch(jokeApiUrl);
      const data = await response.json();
      jokeText.innerText = data.value;
    } catch (error) {
      jokeText.innerText = 'ای بابا، اینترنت قطع شد انگار!';
    }
  }

  jokeBtn.addEventListener('click', getJoke);
</script>

درس قبلی

درس ۱۲ از ۱۶

درس بعدی: مدیریت خطا