الدرس الرابع : ارسال واستقبال البيانات في الجافا سكربت

بسم الله الرحمن الرحيم

اللهم صلِّ وسلم وبارك على سيدنا محمد

مرحباً بزوار ومتابعي بلوجر فيومي!

الدرس الرابع: استخدام Axios في JavaScript

في الدرس ده، هنتعرف على مكتبة Axios، وهي مكتبة شائعة لإجراء طلبات HTTP في JavaScript. تعتبر Axios طريقة أكثر مرونة وسهولة من Fetch API وتوفر العديد من الميزات الرائعة.

1. ما هي Axios؟

Axios هي مكتبة تقوم بتسهيل عملية إجراء الطلبات HTTP من المتصفح أو Node.js. تتميز بالعديد من الخصائص، منها:

• تقوم تلقائياً بتحويل البيانات إلى JSON.
• تدعم التكوين المخصص للطلبات.
• تسمح بإدارة الأخطاء بشكل أسهل.

2. تثبيت Axios

يمكنك تثبيت Axios باستخدام npm إذا كنت تستخدم Node.js، أو يمكنك تضمين المكتبة مباشرةً في مشروعك عن طريق إضافة هذا الرابط إلى ملف HTML الخاص بك:

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

    

3. مثال على استخدام Axios لعمل طلب GET

دعنا نقوم بعمل طلب GET باستخدام Axios للحصول على بيانات من API. هنا، سنقوم باستخدام URL لمثال API لنسترجع البيانات.

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

    .then(response => {

        console.log(response.data);

    })

    .catch(error => {

        console.error('حدث خطأ:', error);

    });

    

في هذا الكود، نستخدم axios.get() لإجراء طلب GET. إذا كانت الاستجابة ناجحة، نقوم بعرض البيانات في وحدة التحكم. وإذا حدث خطأ، سيتم التعامل معه باستخدام catch.

4. مثال على استخدام Axios لعمل طلب POST

دعنا نستخدم Axios لإرسال بيانات باستخدام طلب POST. سنقوم بإنشاء كائن بيانات يحتوي على اسم المستخدم وكلمة المرور، ثم نرسلها إلى API.

const data = {

    username: 'ahmed',

    password: 'password123'

};

axios.post('https://example.com/api/login', data)

    .then(response => {

        console.log('نجاح:', response.data);

    })

    .catch(error => {

        console.error('خطأ:', error);

    });

    

هنا، نستخدم axios.post() لإرسال البيانات. نقوم بتمرير URL وبيانات الطلب كمعاملات. إذا كانت الاستجابة ناجحة، نقوم بعرض النتائج، وإذا حدث خطأ، يتم التعامل معه بنفس الطريقة.

5. الخاتمة

Axios تعتبر خياراً ممتازاً لإجراء الطلبات HTTP في JavaScript، حيث توفر واجهة سهلة الاستخدام مع مجموعة من الميزات القوية. يمكنك استخدامها في مشاريعك لجعل التعامل مع البيانات أسهل وأكثر كفاءة.

في الدرس الجاي، هنتعلم إزاي نستخدم مكتبات أخرى لتحسين تجربة التطوير. تابعونا لتتعرفوا على المزيد من الأدوات المفيدة في JavaScript!