اسکریپت درخواست‌های HTTP با JavaScript: استفاده از Axios برای POST و GET به صورت جامع و کامل


در دنیای توسعه وب، ارتباط بین کلاینت و سرور یکی از اصلی‌ترین مفاهیم است که نقش بسیار مهمی در عملکرد برنامه‌ها و سایت‌ها ایفا می‌کند. برای این کار، معمولاً از پروتکل HTTP استفاده می‌شود. و برای سادگی و کارایی بیشتر، توسعه‌دهندگان از کتابخانه‌هایی مانند Axios بهره می‌برند که امکان ارسال درخواست‌های HTTP را به صورت آسان و قابل تنظیم فراهم می‌کنند. در این مقاله، قصد داریم به‌طور کامل و جامع درباره نمونه اسکریپت‌های درخواست HTTP در جاوااسکریپت با استفاده از Axios، مخصوصا درخواست‌های POST و GET، صحبت کنیم.

چه چیزی Axios است و چرا باید از آن استفاده کنیم؟




Axios یک کتابخانه‌ی قدرتمند و محبوب در اکوسیستم جاوااسکریپت است که امکان ارسال درخواست‌های HTTP را بسیار ساده می‌کند. این کتابخانه، به‌خصوص در پروژه‌های سمت کلاینت و همچنین در توسعه‌ی برنامه‌های سمت سرور با Node.js، کاربرد فراوان دارد. یکی از بزرگ‌ترین مزایای Axios، پشتیبانی از درخواست‌های asynchronous است که باعث می‌شود عملیات‌های شبکه به صورت غیرهمزمان انجام شوند و در نتیجه، کاربر تجربه‌ی بهتری داشته باشد.
علاوه بر این، Axios قابلیت‌های متنوعی دارد، از جمله مدیریت خطا، تنظیم هدرهای درخواست، ارایه‌ی پاسخ در قالب‌های مختلف، و خودکارسازی فرآیندهای حمل و نقل داده‌ها. این ویژگی‌ها باعث شده است که توسعه‌دهندگان ترجیح دهند از Axios در مقایسه با متدهای قدیمی‌تر مانند XMLHttpRequest یا fetch API استفاده کنند.

نمونه اسکریپت درخواست GET با Axios




درخواست GET برای دریافت داده‌ها از سرور استفاده می‌شود. فرض کنید قصد دارید لیستی از کاربران را از یک API دریافت کنید. در این حالت، باید یک درخواست GET به URL مربوطه ارسال نمایید.
javascript  


// ارسال درخواست GET با Axios  


axios.get('https://jsonplaceholder.typicode.com/users')


  .then(function (response) {


    // عملیات بر روی داده‌های دریافتی  


    console.log('لیست کاربران:', response.data);


  })


  .catch(function (error) {


    // مدیریت خطا در صورت بروز مشکل  


    console.error('خطا در دریافت داده‌ها:', error);


  });

در این نمونه، ابتدا URL API که قرار است داده‌ها را برگرداند، مشخص شده است. سپس با استفاده از متد `.get()` این درخواست ارسال می‌شود. در صورت موفقیت، پاسخ درون تابع `.then()` قرار می‌گیرد و می‌توانید داده‌ها را پردازش کنید. در مقابل، در صورت بروز خطا، کنترل آن در بخش `.catch()` انجام می‌شود.

نمونه اسکریپت درخواست POST با Axios




درخواست POST برای ارسال داده‌ها به سرور و ایجاد یا به‌روزرسانی رکوردهای جدید کاربرد دارد. فرض کنید می‌خواهید یک کاربر جدید به سرور اضافه کنید.
javascript  


// ارسال درخواست POST با Axios  


axios.post('https://jsonplaceholder.typicode.com/users', {


  name: 'علی رضایی',


  username: 'ali.rezaei',


  email: 'ali.rezaei@example.com'


})


.then(function (response) {


  console.log('کاربر جدید ایجاد شد:', response.data);


})


.catch(function (error) {


  console.error('خطا در ارسال داده‌ها:', error);


});

در این نمونه، URL مربوط به عملیات افزودن کاربر است، و داده‌های کاربر در قالب یک شیء جاوااسکریپت به عنوان دومین پارامتر در متد `.post()` قرار گرفته است. پاسخ س... ← ادامه مطلب در magicfile.ir