آموزش Axios: ارسال درخواست‌های دلخواه به سبک حرفه‌ای

Axios یک کتابخانه قدرتمند و محبوب جاوااسکریپت برای ارسال درخواست‌های HTTP به سرورها و دریافت پاسخ است. اگر بخواهید از یک API داده بگیرید، فرمی را ارسال کنید یا فایلی آپلود نمایید، Axios این کار را بسیار ساده و خواناتر از fetch داخلی مرورگر انجام می‌دهد. به عبارتی اکسیوس یک کتابخانه برای ارسال درخواست http با جاوااسکریپت است.

در این مقاله، مفاهیم کلیدی را با مثال‌های سناریو محور یاد می‌گیریم تا شما بتوانید هر نوع درخواست دلخواهی را با Axios پیاده کنید — بدون نیاز به دانش پیچیده.

✅ پیش‌نیازهای کوتاه

• آشنایی اولیه با جاوااسکریپت (متغیرها، توابع، async/await)
• یک مرورگر مدرن یا محیط Node.js
• دسترسی به اینترنت (برای دریافت کتابخانه Axios)

🚀 نصب و راه‌اندازی Axios در پروژه

دو راه ساده برای اضافه کردن Axios وجود دارد:

1. استفاده از CDN (مناسب برای یادگیری سریع) – کافی است در فایل HTML خود قبل از کدهای جاوااسکریپت، این خط را اضافه کنید:

   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. نصب از طریق npm (برای پروژه‌های حرفه‌ای):

   npm install axios

   سپس در کد خود: const axios = require('axios'); یا import axios from 'axios';

🧠 ذهنیت کلی: درخواست و پاسخ

هر درخواست Axios شامل موارد زیر است:

• متد (Method): GET (دریافت داده)، POST (ارسال داده)، PUT (بروزرسانی کامل)، PATCH (بروزرسانی جزئی)، DELETE (حذف)
• آدرس (URL): جایی که داده می‌خواهیم یا داده می‌فرستیم
• بدنه (Body) – فقط در POST, PUT, PATCH
• هدرها (Headers) – مانند نوع محتوا یا توکن احراز هویت

Axios همیشه یک Promise برمی‌گرداند. با .then() و .catch() یا با async/await جواب را دریافت می‌کنیم.

🌟 سناریو ۱: دریافت اطلاعات کاربران (درخواست GET)

فرض کنید می‌خواهیم لیست کاربران یک سایت را از API ساختگی jsonplaceholder.typicode.com دریافت کنیم.

// روش اول: با then/catch
axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    console.log('لیست کاربران:', response.data);
  })
  .catch(error => {
    console.error('خطا در دریافت:', error);
  });

// روش دوم: با async/await (تمیزتر)
async function getUsers() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log('داده‌ها:', response.data);
  } catch (error) {
    console.log('مشکل در ارتباط:', error.message);
  }
}
getUsers();

نکته مهم: داده‌ای که سرور برمی‌گرداند همیشه داخل response.data قرار دارد. بقیه اطلاعات مثل response.status (کد وضعیت) و response.headers نیز در دسترس هستند.

📝 سناریو ۲: ارسال یک پست جدید (درخواست POST)

فرض کنید یک فرم داریم و می‌خواهیم عنوان و متن یک مقاله را به سرور بفرستیم.

const newPost = {
  title: 'آموزش Axios',
  body: 'این مقاله خیلی کاربردی بود!',
  userId: 1
};

axios.post('https://jsonplaceholder.typicode.com/posts', newPost)
  .then(res => {
    console.log('پست با موفقیت ساخته شد:', res.data);
  })
  .catch(err => {
    console.log('خطا:', err.response ? err.response.data : err.message);
  });

توجه کنید که اگر سرور خطای ۴۰۰ یا ۵۰۰ بدهد، باز هم catch اجرا می‌شود. درون error.response می‌توانید جزئیات خطا را ببینید.

✏️ سناریو ۳: بروزرسانی یک مقاله (PUT و PATCH)

• PUT: کل منبع را جایگزین می‌کند (باید همه فیلدها را بفرستید).
• PATCH: فقط فیلدهای مشخص‌شده را به‌روز می‌کند.

// به‌روزرسانی کامل با PUT
const updatedData = {
  id: 1,
  title: 'عنوان جدید کل مقاله',
  body: 'متن کاملا جدید',
  userId: 1
};
axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedData);

// به‌روزرسانی جزئی با PATCH
axios.patch('https://jsonplaceholder.typicode.com/posts/1', {
  title: 'فقط عنوان تغییر کرد'
});

🗑️ سناریو ۴: حذف یک رکورد (DELETE)

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(() => console.log('پست با موفقیت حذف شد'))
  .catch(error => console.error(error));

⚙️ ارسال درخواست دلخواه با استفاده از آرایه پیکربندی (Config)

گاهی نیاز به کنترل کامل روی درخواست دارید. به جای axios.get یا axios.post، می‌توانید از axios() با یک شیء استفاده کنید:

async function sendCustomRequest() {
  const config = {
    method: 'post',        // یا 'get', 'delete', 'patch'
    url: 'https://api.example.com/data',
    data: { username: 'ali', score: 100 },  // برای POST, PUT
    params: { page: 2, limit: 10 },         // برای GET (تبدیل به query string)
    headers: {
      'Authorization': 'Bearer توکن_شما',
      'Content-Type': 'application/json'
    },
    timeout: 5000  // اگر سرور بیش از ۵ ثانیه پاسخ نداد، خطا بده
  };

  try {
    const result = await axios(config);
    console.log(result.data);
  } catch (err) {
    console.log('خطا:', err.message);
  }
}

این روش به شما انعطاف ۱۰۰٪ می‌دهد و تمام درخواست‌های دلخواهتان را پوشش می‌دهد.

⏱️ کار با Query Parameters (مثل ?id=5&sort=desc)

به جای چسباندن دستی به URL، از خاصیت params استفاده کنید:

axios.get('https://api.example.com/users', {
  params: {
    role: 'admin',
    active: true,
    page: 1
  }
});
// نتیجه: https://api.example.com/users?role=admin&active=true&page=1

🔁 انجام همزمان چند درخواست (Promise.all)

اگر بخواهید اطلاعات دو یا چند منبع مختلف را همزمان دریافت کنید:

async function getMultipleResources() {
  try {
    const [usersRes, postsRes] = await Promise.all([
      axios.get('https://jsonplaceholder.typicode.com/users'),
      axios.get('https://jsonplaceholder.typicode.com/posts?userId=1')
    ]);
    console.log('کاربران:', usersRes.data);
    console.log('پست‌های کاربر اول:', postsRes.data);
  } catch (error) {
    console.error('حداقل یکی از درخواست‌ها شکست خورد', error);
  }
}

🛡️ مدیریت خطاها حرفه‌ای‌تر

در catch، آبجکت error دارای خصوصیات زیر است:

• error.message – توضیح کلی خطا
• error.response – اگر سرور پاسخی داده (مثل ۴۰۴، ۵۰۰). داخل آن error.response.data, error.response.status وجود دارد.
• error.request – اگر درخواست فرستاده شده ولی پاسخی دریافت نشده.
• error.config – تنظیمات درخواستی که فرستاده شد.

try {
  await axios.get('https://api.example.com/not-exist');
} catch (err) {
  if (err.response) {
    console.log(`خطای سمت سرور: ${err.response.status}`);
    console.log(err.response.data);
  } else if (err.request) {
    console.log('سرور پاسخ نداد (مشکل شبکه)');
  } else {
    console.log('خطا در تنظیم درخواست:', err.message);
  }
}

تمرین عملی برای مبتدیان – درخواست دلخواه شما!

حالا نوبت شماست. فرض کنید می‌خواهید یک آب و هوا ساده را از یک API رایگان بگیرید. کد زیر را در کنسول مرورگر (بعد از افزودن Axios) امتحان کنید:

async function getWeather(city) {
  const apiKey = 'YOUR_API_KEY'; // (از سایت openweathermap یک کلید رایگان بگیر)
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

  try {
    const res = await axios.get(url);
    console.log(`دمای ${city}: ${res.data.main.temp} درجه سانتی‌گراد`);
  } catch (error) {
    if (error.response && error.response.status === 404) {
      console.log('شهر مورد نظر یافت نشد');
    } else {
      console.log('خطای شبکه یا سرور');
    }
  }
}

// اجرا
getWeather('Tehran');

📌 خلاصه و جمع‌بندی نهایی

• برای هر نوع درخواست HTTP، یک متد راحت دارید: axios.get/post/put/patch/delete.
• همیشه از async/await استفاده کنید تا کد خوانا و شبیه به کدهای همزمان شود.
• برای درخواست‌های دلخواه و پیشرفته، از axios(config) استفاده کنید.
• پارامترهای کوئری را با params و بدنه را با data ارسال کنید.
• خطاها را با بررسی error.response و error.request مدیریت کنید.

اکنون شما توانایی ارسال هر نوع درخواست دلخواه با Axios را دارید. از این کتابخانه در پروژه‌های واقعی خود استفاده کنید و کدهای تمیزتری نسبت به fetch بنویسید.