اسکریپت درخواست HTTP با استفاده از Axios در جاوااسکریپت: POST و GET


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

مقدمه‌ای بر Axios و درخواست‌های HTTP




Axios یک کتابخانه‌ی JavaScript است که بر پایه Promise ساخته شده است، و در نتیجه، عملیات‌های ناهمزمان (asynchronous) را به شکل بسیار کارآمد و قابل کنترل انجام می‌دهد. این ویژگی، به توسعه‌دهندگان این امکان را می‌دهد تا درخواست‌های HTTP را با ساختاری واضح و قابل فهم پیاده‌سازی کنند، بدون اینکه نگران پیچیدگی‌های مربوط به callbackها باشند.
درخواست‌های HTTP، به طور کلی، شامل عملیات‌هایی هستند که به سرور ارسال می‌شوند تا داده‌هایی درخواست یا ارسال شوند. این عملیات‌ها، در دو حالت اصلی قرار می‌گیرند:
- GET: برای دریافت داده‌ها از سرور، بدون تغییر در سرور.

- POST: برای ارسال داده‌ها به سرور، و اغلب برای ایجاد یا به‌روزرسانی اطلاعات در سرور.

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




فرض کنید می‌خواهیم داده‌هایی را از یک REST API دریافت کنیم. نمونه کد زیر، نمونه‌ای ساده از درخواست GET است:
javascript  


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


  .then(function (response) {


    console.log('Data received:', response.data);


  })


  .catch(function (error) {


    console.error('Error fetching data:', error);


  });

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

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




در مقابل، فرض کنید قصد دارید داده‌هایی را به سرور ارسال کنید، مثلاً فرم ثبت‌نام یا ایجاد یک پست جدید. نمونه کد زیر، نمونه‌ای از درخواست POST است:
javascript  


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


    title: 'foo',


    body: 'bar',


    userId: 1  


  })


  .then(function (response) {


    console.log('Post created:', response.data);


  })


  .catch(function (error) {


    console.error('Error creating post:', error);


  });

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