مصرف API با جاوااسکریپت (سمت کاربر)

یادگیری Fetch API برای دریافت اطلاعات در مرورگر.

دریافت اطلاعات با `fetch` (درخواست GET)

ساده‌ترین کار با یه API، گرفتن اطلاعات ازشه. با `fetch` این کار مثل آب خوردنه. فقط کافیه آدرس API رو بهش بدیم. چون `fetch` یه Promise برمی‌گردونه، از `async/await` برای مدیریت تمیزش استفاده می‌کنیم.

async function fetchUsers() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`خطای HTTP! وضعیت: ${response.status}`);
    }
    const users = await response.json();
    
    // حالا با لیست کاربران هر کاری می‌خوایم می‌کنیم
    users.forEach(user => {
      console.log(user.name);
    });
  } catch (error) {
    console.error("نمیشه اطلاعات رو گرفت:", error);
  }
}

fetchUsers();

ارسال اطلاعات با `fetch` (درخواست POST)

برای ارسال اطلاعات (مثلاً ساختن یه پست جدید در وبلاگ)، باید به `fetch` بگیم که متد ما `POST` هست و اطلاعاتی که می‌خوایم بفرستیم رو هم بهش بدیم. این اطلاعات رو تو قسمت `body` و تنظیمات رو تو یه آبجکت به عنوان آرگومان دوم به `fetch` پاس می‌دیم.

async function createPost() {
  const newPost = {
    title: 'پست جدید من',
    body: 'این یه پست آزمایشی باحاله!',
    userId: 1
  };

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json' // به سرور می‌گیم داریم JSON می‌فرستیم
      },
      body: JSON.stringify(newPost) // آبجکت رو به متن JSON تبدیل می‌کنیم
    });

    const createdPost = await response.json();
    console.log("پست ساخته شده:", createdPost);
  } catch (error) {
    console.error("خطا در ساخت پست:", error);
  }
}

createPost();

تمرین! 🧠

یه صفحه HTML با یه دکمه و یه لیست خالی (`ul`) بساز. با کلیک روی دکمه، ۱۰ تا "کار" (todo) رو از API رایگان `https://jsonplaceholder.typicode.com/todos` بگیر و عنوان (`title`) هر کدوم رو به عنوان یه آیتم (`li`) به لیستت اضافه کن.

جواب تمرین

<!-- HTML -->
<button id="fetch-btn">لیست کارها رو بگیر</button>
<ul id="todo-list"></ul>

<!-- JavaScript -->
<script>
  const fetchBtn = document.getElementById('fetch-btn');
  const todoList = document.getElementById('todo-list');

  async function getTodos() {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=10');
      const todos = await response.json();
      
      todoList.innerHTML = ''; // لیست قبلی رو پاک کن
      todos.forEach(todo => {
        const li = document.createElement('li');
        li.textContent = todo.title;
        todoList.appendChild(li);
      });
    } catch (error) {
      todoList.innerHTML = '<li>خطا در دریافت اطلاعات!</li>';
    }
  }

  fetchBtn.addEventListener('click', getTodos);
</script>

درس قبلی

درس ۳ از ۱۲

درس بعدی: ساخت API با Node.js