55- آموزش جاوااسکریپت | آموزش جامع Fetch API : جایگزین مدرن AJAX

کار با Fetch API در جاوااسکریپت

در جاوااسکریپت مدرن، Fetch API استانداردی قدرتمند برای ارسال درخواست‌های HTTP و دریافت اطلاعات از منابع محلی یا سرورهای اینترنتی است. این ابزار به عنوان جایگزین مستقیم و استاندارد برای XMLHttpRequest (رویکرد قدیمی AJAX) معرفی شده است.

متد fetch به صورت پیش‌فرض در شیء window مرورگرها در دسترس است و مستقیماً یک Promise برمی‌گرداند؛ بنابراین مدیریت پاسخ‌ها و خطاها در آن از طریق .then() و .catch() انجام می‌شود.

در این آموزش، نحوه دریافت سه نوع منبع داده با استفاده از Fetch API پیاده‌سازی می‌شود:

1. دریافت محتوای یک فایل متنی ساده (.txt)
2. دریافت داده‌های ساختاریافته از یک فایل محلی (.json)
3. دریافت داده‌های زنده از یک سرویس خارجی (GitHub API)

---

ساختار اولیه سند HTML

برای اجرای سناریوها، به سه دکمه جهت ایجاد رویداد و یک تگ div برای نمایش خروجی نیاز است:

<button id="button1">Get Text</button>
<button id="button2">Get JSON</button>
<button id="button3">Get External API Data</button>

<div id="output"></div>

---

۱. دریافت محتوای فایل متنی ساده (Text File)

ابتدا یک فایل متنی محلی به نام test.txt با محتوای دلخواه ایجاد می‌کنیم:

This is a sample text file.

سپس در فایل جاوااسکریپت، رویداد کلیک برای دکمه اول تعریف می‌شود:

document.getElementById('button1').addEventListener('click', getText);

function getText() {
  fetch('test.txt')
    .then(function(res) {
      return res.text();
    })
    .then(function(data) {
      document.getElementById('output').innerHTML = data;
    })
    .catch(function(err) {
      console.log(err);
    });
}

نحوه عملکرد:

1. متد fetch('test.txt') اجرا شده و یک Promise حاوی شیء Response برمی‌گرداند.
2. شیء Response متدهای متعددی در پروتوتایپ خود دارد. برای خواندن متن ساده از متد res.text() استفاده می‌شود.
3. چون res.text() خود یک Promise دیگر برمی‌گرداند، آن را return کرده و در زنجیره بعدی با یک .then() دیگر، متن نهایی (data) را دریافت و درون عنصر #output درج می‌کنیم.
4. متد .catch() خطاهای مربوط به عدم دسترسی به منبع یا شبکه را مدیریت می‌کند.

---

۲. دریافت داده از فایل محلی JSON

یک فایل به نام posts.json ایجاد کرده و ساختار آرایه‌ای زیر را درون آن قرار می‌دهیم:

[
  {
    "title": "Post One",
    "body": "This is post one"
  },
  {
    "title": "Post Two",
    "body": "This is post two"
  },
  {
    "title": "Post Three",
    "body": "This is post three"
  }
]

سپس تابع مربوط به دکمه دوم پیاده‌سازی می‌شود:

document.getElementById('button2').addEventListener('click', getJson);

function getJson() {
  fetch('posts.json')
    .then(function(res) {
      return res.json();
    })
    .then(function(data) {
      let output = '';

      data.forEach(function(post) {
        output += `<li>${post.title}</li>`;
      });

      document.getElementById('output').innerHTML = output;
    })
    .catch(function(err) {
      console.log(err);
    });
}

نحوه عملکرد:

• به‌جای متد text()، از res.json() استفاده می‌شود. این متد به صورت خودکار داده‌های متنی با ساختار JSON را به یک شیء یا آرایه قابل پیمایش در جاوااسکریپت تبدیل می‌کند.
• چون خروجی یک آرایه است، با متد forEach روی اعضای آن حلقه زده و مقادیر موردنظر (در اینجا post.title) درون یک رشته HTML تجمیع و در صفحه رندر می‌شوند.

---

۳. دریافت داده از API خارجی (GitHub API)

مراحل کار برای دریافت اطلاعات از یک سرور خارجی دقیقاً مشابه فایل محلی است؛ کافی است آدرس URL وب‌سرویس به fetch پاس داده شود:

document.getElementById('button3').addEventListener('click', getExternal);

function getExternal() {
  fetch('https://api.github.com/users')
    .then(function(res) {
      return res.json();
    })
    .then(function(data) {
      let output = '';

      data.forEach(function(user) {
        output += `<li>${user.login}</li>`;
      });

      document.getElementById('output').innerHTML = output;
    })
    .catch(function(err) {
      console.log(err);
    });
}

نحوه عملکرد:

• آدرس https://api.github.com/users لیستی از کاربران گیت‌هاب را در قالب فرمت JSON بازمی‌گرداند.
• داده با res.json() پارس شده و برای هر کاربر، مقدار ویژگی user.login به عنوان نام کاربری در لیست HTML چاپ می‌شود.

---

کد کامل و یکپارچه جاوااسکریپت

// رویدادهای دکمه‌ها
document.getElementById('button1').addEventListener('click', getText);
document.getElementById('button2').addEventListener('click', getJson);
document.getElementById('button3').addEventListener('click', getExternal);

// ۱. دریافت فایل متنی
function getText() {
  fetch('test.txt')
    .then(function(res) {
      return res.text();
    })
    .then(function(data) {
      document.getElementById('output').innerHTML = data;
    })
    .catch(function(err) {
      console.log(err);
    });
}

// ۲. دریافت فایل جیسون محلی
function getJson() {
  fetch('posts.json')
    .then(function(res) {
      return res.json();
    })
    .then(function(data) {
      let output = '';
      data.forEach(function(post) {
        output += `<li>${post.title}</li>`;
      });
      document.getElementById('output').innerHTML = output;
    })
    .catch(function(err) {
      console.log(err);
    });
}

// ۳. دریافت از API خارجی
function getExternal() {
  fetch('https://api.github.com/users')
    .then(function(res) {
      return res.json();
    })
    .then(function(data) {
      let output = '';
      data.forEach(function(user) {
        output += `<li>${user.login}</li>`;
      });
      document.getElementById('output').innerHTML = output;
    })
    .catch(function(err) {
      console.log(err);
    });
}

---

نکات کلیدی

• دو مرحله‌ای بودن پردازش: متد fetch در گام اول یک شیء Response بازمی‌گرداند؛ برای استخراج محتوای واقعی بسته به جنس داده باید متدهای res.text() یا res.json() فراخوانی و در .then() بعدی مدیریت شوند.
• پردازش خطای شبکه: متد .catch() در انتهای زنجیره خطاهای مرتبط با ارسال درخواست را ثبت می‌کند.