Fetch API یکی از پرکاربردترین Web APIهاست که برای ارسال درخواست‌های HTTP (مثل GET یا POST) به سرور استفاده می‌شود.
این API جایگزین مدرن‌تر و ساده‌تر XMLHttpRequest (XHR) است.

🔹 1. نحو پایه‌ای (Syntax)

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

• fetch(url) → درخواست به یک آدرس مشخص ارسال می‌کند.

• response → پاسخ سرور را برمی‌گرداند.

• متدهای پرکاربرد:

  • ()response.text → خروجی به صورت متن

  • ()response.json → خروجی به صورت JSON

🔹 2. درخواست GET

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(res => res.json())
  .then(data => console.log(data));

📌 داده‌ی یک پست از API دریافت می‌شود.

🔹 3. درخواست POST

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    title: "Hello",
    body: "This is a test",
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => console.log(data));

📌 این کد یک داده‌ی جدید به سرور ارسال می‌کند.

🔹 4. استفاده از async/await

async function getData() {
  try {
    let res = await fetch("https://jsonplaceholder.typicode.com/users");
    let users = await res.json();
    console.log(users);
  } catch (err) {
    console.error("Error:", err);
  }
}

getData();

🔹 5. بررسی وضعیت پاسخ

fetch("https://jsonplaceholder.typicode.com/posts/1000")
  .then(res => {
    if (!res.ok) {
      throw new Error("HTTP error: " + res.status);
    }
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

📌 همیشه بررسی کنید که res.ok درست باشد تا از خطاهای HTTP جلوگیری کنید.

🔹 6. ارسال همراه با تنظیمات (Options)

fetch("https://example.com/data", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer token123"
  },
  body: JSON.stringify({ name: "Ali", age: 25 })
});

✅ خلاصه

• Fetch API → برای ارسال درخواست HTTP

• متدهای رایج: GET, POST, PUT, DELETE

• خروجی قابل تبدیل به:

  • ()text → متن

  • ()json → آبجکت جاوااسکریپت

• از async/await برای ساده‌تر شدن کد استفاده می‌کنیم

• همیشه res.ok و status code را بررسی کنید