Vue Academy · درس

طلبات HTTP باستخدام Axios

أرسل طلبات GET وPOST إلى واجهات API باستخدام Axios

طلبات HTTP باستخدام Axios درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

التواصل مع واجهات API

تحمّل معظم التطبيقات الفعلية البيانات من خادم خلفي عبر HTTP. وعلى الرغم من أن المتصفح يوفّر fetch مدمجًا، تستخدم العديد من مشاريع Vue مكتبة Axios، وهي عميل HTTP شائع قائم على الوعود، وتوفّر واجهة أبسط وتحليلًا تلقائيًا لـ JSON وخيارات تهيئة متقدمة.

تثبيت Axios

أضف Axios إلى مشروعك باستخدام مدير الحزم، ثم استورده في الموضع الذي تحتاج إليه.

npm install axios

استيراد Axios

استورد التصدير الافتراضي لبدء إرسال الطلبات.

import axios from "axios"

طلب GET

استخدم axios.get لجلب البيانات. فهو يعيد وعدًا يُحلّ إلى كائن استجابة؛ ويكون جسم الاستجابة في response.data بعد تحليله مسبقًا من JSON.

axios.get("https://api.example.com/users")
  .then(response => {
    console.log(response.data)
  })

طلب POST

استخدم axios.post لإرسال البيانات. والوسيط الثاني هو جسم الطلب، الذي يحوّله Axios إلى JSON تلقائيًا.

axios.post("https://api.example.com/users", {
  name: "Grace",
  email: "grace@example.com"
})

استخدام async/await

تُقرأ الوعود بوضوح أكبر باستخدام async/await. حدّد الدالة على أنها async وانتظر الطلب باستخدام await.

async function loadUsers() {
  const response = await axios.get("/api/users")
  return response.data
}

داخل دالة Vue

من الأنماط الشائعة استدعاء Axios من دالة داخل المكوّن وتخزين النتيجة في بيانات تفاعلية.

export default {
  data() {
    return { users: [] }
  },
  methods: {
    async fetchUsers() {
      const res = await axios.get("/api/users")
      this.users = res.data
    }
  }
}

تهيئة الطلب: معلمات الاستعلام

مرّر كائن params لإضافة معلمات إلى سلسلة الاستعلام. وينشئ Axios عنوان URL نيابةً عنك.

axios.get("/api/users", {
  params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10

تهيئة الطلب: الرؤوس

أرسل رؤوسًا مخصّصة، مثل رمز التفويض، من خلال كائن التهيئة.

axios.get("/api/profile", {
  headers: {
    Authorization: "Bearer " + token
  }
})

تهيئة عنوان URL الأساسي

يؤدي تكرار عنوان URL الكامل في كل موضع إلى زيادة احتمالية الأخطاء. أنشئ نسخة من Axios باستخدام baseURL وإعدادات افتراضية مشتركة، ثم استخدمها في أنحاء تطبيقك.

import axios from "axios"

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" }
})

// elsewhere: api.get("/users")

طرق HTTP الأخرى

يعكس Axios أفعال HTTP الشائعة: get وpost وput وpatch وdelete. استخدم الفعل الذي يناسب العملية التي تريد تنفيذها.

api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")

اختبار سريع

اختبر معلوماتك حول طلبات Axios.

مراجعة

Axios هو عميل HTTP قائم على الوعود. استخدم get وpost وput وpatch وdelete، ومرّر params وheaders عبر كائن التهيئة، وفضّل استخدام async/await لزيادة الوضوح. وتحافظ النسخة المشتركة التي تُنشأ عبر axios.create مع baseURL على مبدأ DRY في الطلبات. ستجلب بعد ذلك البيانات في المرحلة المناسبة من دورة حياة المكوّن.

الأسئلة الشائعة

هل درس «طلبات HTTP باستخدام Axios» مجاني؟

نعم — نص درس «طلبات HTTP باستخدام Axios» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «طلبات HTTP باستخدام Axios»؟

أرسل طلبات GET وPOST إلى واجهات API باستخدام Axios تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «طلبات HTTP باستخدام Axios»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy