نمونه اسکریپت درخواست JS HTTP با استفاده از روش Axios POST و GE

نحوه نوشتن نمونه اسکریپت درخواست‌های HTTP با استفاده از روش Axios در جاوااسکریپت

در دنیای برنامه‌نویسی وب، ارسال درخواست‌های HTTP یکی از مهم‌ترین و حیاتی‌ترین عملیات‌ها است. این عملیات‌ها، به برنامه‌نویسان اجازه می‌دهند تا ارتباط موثری با سرور برقرار کرده و داده‌های مورد نیاز خود را دریافت یا ارسال کنند. در این میان، کتابخانه Axios، که به خاطر سادگی و قابلیت‌های قدرتمندش، بسیار محبوب است، ابزار فوق‌العاده‌ای برای انجام این وظیفه است. در ادامه، به طور کامل و جامع، نحوه استفاده از Axios برای ساخت درخواست‌های HTTP به روش‌های POST و GET را شرح خواهیم داد، همراه با نمونه‌های کد و توضیحات دقیق.
مقدمه‌ای بر Axios و اهمیت آن در توسعه وب
ابتدا، باید بدانید که Axios یک کتابخانه جاوااسکریپت است که به طور خاص برای ارسال درخواست‌های HTTP طراحی شده است. این کتابخانه، بر پایه Promise ساخته شده، بنابراین کار با آن بسیار ساده و قابل مدیریت است. برخلاف XMLHttpRequest، Axios قابلیت‌های گسترده‌تر و کاربرپسندتری دارد، از جمله مدیریت خطاها، درخواست‌های همزمان، و پشتیبانی از نسخه‌های مختلف مرورگرها.
علاوه بر این، Axios امکان ارسال درخواست‌های HTTP به سرورهای مختلف، با روش‌های متفاوت، مانند GET، POST، PUT، DELETE و غیره، را فراهم می‌کند. در این مقاله، تمرکز بر روی دو روش مهم و پرکاربرد است: GET و POST. این دو روش، معمولا برای دریافت داده‌ها و ارسال داده‌ها به سرور استفاده می‌شوند.
نحوه نصب و راه‌اندازی Axios
قبل از شروع، باید کتابخانه Axios را به پروژه خود اضافه کنید. دو روش اصلی برای این کار وجود دارد:
1. نصب با npm یا yarn در پروژه‌های مبتنی بر Node.js:

bash  
npm install axios  

یا

bash  
yarn add axios  

2. افزودن مستقیم در فایل HTML از طریق CDN:

html  

در ادامه، فرض می‌کنیم که از روش دوم، یعنی افزودن مستقیم در HTML، استفاده می‌کنیم تا نحوه کار برای تمامی توسعه‌دهندگان قابل درک باشد. اما برای پروژه‌های بزرگ، توصیه می‌شود از npm یا yarn بهره ببرید.
ساخت درخواست GET با Axios
درخواست GET برای دریافت داده‌ها از سرور است. فرض کنید می‌خواهید لیستی از کاربران را از یک API خاص دریافت کنید. نمونه کد زیر، نمونه‌ای ساده است:

javascript  
axios.get('https://jsonplaceholder.typicode.com/users')
.then(function (response) {
// درخواست موفقیت‌آمیز بود  
console.log('لیست کاربران:', response.data);
})
.catch(function (error) {
// خطا در درخواست  
console.error('خطا در دریافت داده‌ها:', error);
});

در این کد، آدرس URL، نقطه پایانی (endpoint) است که سرور به آن پاسخ می‌دهد. در صورت موفقیت، داده‌های دریافتی در response.data قرار می‌گیرند و می‌توانید آنها را در کنسول مشاهده کنید. در غیر این صورت، خطا در catch مدیریت می‌شود.
نکات مهم در مورد درخواست GET:
- می‌توانید پارامترهای پرس‌وجو (Query Parameters) را به صورت آبجکت به درخواست بدهید، مثلاً:

javascript  
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1  
}
})
.then(response => {
console.log('پست‌های کاربر 1:', response.data);
})
.catch(error => {
console.error('خطا:', error);
});

- درخواست‌های GET معمولا برای دریافت اطلاعات بدون تغییر در سرور استفاده می‌شوند، و نباید برای عملیات‌های تغییر داده به کار روند.
ساخت درخواست POST با Axios
در مقابل... ← ادامه مطلب در magicfile.ir