⚡️بیاین بریم امروز دوتا ابزاری که میشه باهاش با api های سمت بک اند ارتباط گرفت رو بررسی کنیم

‏💎‏ Fetch API چیه؟
‏fetch یه ابزار تو خود جاوااسکریپته که باهاش می‌تونی بری از سرور درخواست بدی و داده‌ها رو بگیری. این ابزار تو مرورگرهای جدید به‌طور پیش‌فرض هست، یعنی لازم نیست چیزی نصب کنی. خیلی ساده‌ست ولی یه جاهایی ممکنه اذیت کنه؛ مثلاً اگه سرور جواب بدی بهت، خودت باید بفهمی مشکل چیه، چون fetch فقط خطاهای خیلی بزرگ رو می‌گیره.

‏🔥 Axios چیه؟
حالا axios یه کتابخونه بیرونیه که باید نصبش کنی، ولی کلی امکانات باحال داره. مثلاً اگه سرور یه جواب بد بهت بده، خودش می‌فهمه و بهت میگه. این باعث می‌شه کار راحت‌تر بشه، مخصوصاً اگه پروژه پیچیده‌تر باشه. یه خوبی دیگه‌اش اینه که حتی اگه مرورگر قدیمی داشته باشی، بازم کار می‌کنه. از همه مهم‌تر، کلی قابلیت اضافه داره، مثل اینکه می‌تونی درخواست‌ها رو کنسل کنی، یا براشون تایم‌اوت بذاری، یا قبل از اینکه درخواست بره به سرور، توکن احراز هویت رو خودکار بهش اضافه کنی.

💥 خلاصه‌ی تفاوت‌ها:
- مدیریت خطاها: axios خودش خطاهای سرور رو مدیریت می‌کنه، ولی fetch نه.
- سازگاری با مرورگرها: axios حتی تو مرورگرهای قدیمی هم کار می‌کنه.
- امکانات بیشتر: axios کلی ابزار اضافه داره که کار رو راحت‌تر می‌کنه.

مثال‌ها:
- مثال ساده با `fetch`:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

- مثال ساده با `axios`:

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Axios error:', error));

⭐️ جمع‌بندی:
اگه دنبال یه راه سریع و ساده برای کارای معمولی هستی، fetch بد نیست. ولی اگه قراره پروژه‌ات بزرگ‌تر باشه و نیاز به امکانات بیشتری داری، axios کارتو خیلی راحت‌تر می‌کنه.

#fetch #axios #javascript
☕️ @CodeExplore