Sales

Axios هو مكتبة تستخدم لإجراء طلبات HTTP في تطبيقات JavaScript، بما في ذلك تطبيقات Vue.Js. تتيح لك Axios إجراء طلبات GET وPOST وPUT وDELETE بسهولة، بالإضافة إلى التعامل مع البيانات المسترجعة من الخادم. للاستخدام في Vue.Js، يمكن تثبيت Axios عن طريق npm: ```bash npm install axios ``` ثم يمكنك استيراده في ملف Vue الخاص بك واستخدامه داخل المكونات كما يلي: ```javascript import axios from 'axios'; export default { data() { return { info: null }; }, mounted() { axios.get('https://api.example.com/data') .then(response => { this.info = response.data; }) .catch(error => { console.error(error); }); } }; ``` بهذه الطريقة، يمكنك استخدام Axios لجلب البيانات من API وعرضها في تطبيق Vue الخاص بك.

Emir Eskici

Emir Eskici

بلس كلاودز أوثر

استخدام Axios مع Vue.js

ما هو أكسيوس؟
هو مكتبة جافا سكريبت تسهل علينا إجراء عمليات HTTP في تطبيقات الواجهة الأمامية بشكل بسيط.
تثبيت أكسيوس
يمكننا تثبيته باستخدام npm أو yarn أو CDN.
تثبيت باستخدام npm

$ npm install axios

تثبيت باستخدام yarn

$ yarn add axios

تثبيت باستخدام CDN

مثال صغير باستخدام دالة Axios.get()
دعنا نقوم بعمل مثال صغير على API باستخدام دالة get() الخاصة بأكسيوس


import axios from 'axios' // نقوم باستيراد axios لاستخدامها بعد تحميلها
export default {
data(){
    return{
        users:null, // أنشأت متغير فارغ باسم users 
    }},
  methods:{
    function (){
    axios.get('https://jsonplaceholder.typicode.com/users').then((response) => { 
    // قمنا بسحب API واستخدمنا دالة then() للعمليات اللاحقة
     this.users = response.data; // وصلنا إلى كائن البيانات داخل الاستجابة التي تم إرجاعها وعيناه في المتغير المسمى users
     console.log(this.users); // والآن قمنا بكتابة النتائج المReturned في وحدة التحكم
     })
  }
}
}

مخرجات وحدة التحكم
drawing

دعنا نرى نتيجة المثال بشكل مرئي
دعنا نستخدم Bootstrap لإنشاء جدول صغير ونضع البيانات القادمة من API في هذا الجدول

وها هي النتيجة…

result