Axios هي مكتبة JavaScript شائعة تُستخدم لتقديم طلبات HTTP. وهي عميل HTTP يعتمد على الوعود (promise-based) ويُستخدم في JavaScript أو مع مكتبات Javascript الأخرى مثل Vue.js أو React.js. ونظرًا لطبيعتها الـ isomorphic، يمكن لـ Axios العمل على جانب العميل وجانب الخادم في نفس الوقت باستخدام نفس قاعدة الكود. كما أنها أداة قوية تُستخدم بشكل جماعي مع async لصياغة واجهة برمجة تطبيقات (API) سهلة الاستخدام. وقبل كل شيء، تتمتع Axios بالقدرة على إلغاء الطلب تلقائيًا، وهو أمر يمثل معركة شاقة بخلاف ذلك.
كيف تعمل Axios؟
تستخدم Axios إعدادات promise الافتراضية للتشغيل بالتوازي في المتصفح وNode.js باستخدام نفس الكود. وباستخدام ميزة HTTP القائمة على الوعود، تقوم Axios بإجراء عمليات CRUD وترسل طلبات HTTP إلى نقاط نهاية REST. في هذا البرنامج التعليمي، سنقوم بـ إرشادك خلال خطوات تهيئة واجهة برمجة تطبيقات REST باستخدام Axios في Vue.js.
فلنبدأ!
المتطلبات الأساسية
لتتمكن من إكمال هذا البرنامج التعليمي، يجب أن يتوفر لديك ما يلي:
- تثبيت Node.js وإعداده على نظام التشغيل Ubuntu الخاص بك.
- إذا كنت تستخدم نظام التشغيل Centos، فيمكنك اتباع هذا الدليل لـ تثبيت Node.js على Centos 8.
- أساسيات JavaScript.
الخطوة 1: تثبيت Axios
قبل تثبيت Axios، من المهم تحديث مستودعات النظام لتجنب الأخطاء أو فشل التثبيت:
|
1 |
sudo apt-get update |
بعد ذلك، قم بتثبيت Axios باستخدام حزمة برامج npm :
|
1 |
npm install axios --save |
بدلاً من ذلك، يمكنك تثبيت Axios باستخدام مدير الحزم yarn :
|
1 |
yarn add axios |
بعد ذلك، قم بإنشاء مشروع Vue.js واستيراد Axios فيه:
|
1 |
import axios from ‘axios’; |
في الخطوة التالية، سنستخدم طريقة axios.get() لسحب الطلبات.
الخطوة 2: سحب البيانات باستخدام طلب GET
هنا، سنقوم بسحب البيانات باستخدام طلب GET . ألقِ نظرة على كيفية استخدامنا لطريقة axios.get() لجلب البيانات مباشرة من طريقة:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // يجلب المنشورات عند إنشاء المكون. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // يتم تحليل استجابات JSON تلقائيًا. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
سترى إصدار async أو await :
سيقوم الكود أعلاه بجلب المنشورات من JSONPlaceholder وتوزيع البيانات بطريقة غير مرتبة. أي نوع من الأخطاء التي تتم مواجهتها ستظهر في قائمة أخرى غير مرتبة.
الخطوة 3: إرسال البيانات باستخدام طلب POST
على عكس طريقة axios.get() ، سنستخدم الآن طريقة axios.post() لإجراء طلب POST . ألقِ نظرة على كيفية تطبيق طريقة axios.post() لجلب البيانات:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // يرسل المنشورات إلى الخادم عند استدعائه. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
سترى إصدار async أو await :
سيعمل الكود أعلاه على إنشاء حقل إدخال يرسل المحتوى إلى JSONPlaceholder. يظهر أي نوع من الأخطاء التي تمت مواجهتها في قائمة غير مرتبة مختلفة.
الخطوة 4: إعداد مثيل أساسي مشترك
في هذه الخطوة، سنقوم بإنشاء مثيل أساسي مشترك باستخدام طريقة axios.create() . الهدف من إعداد مثيل أساسي مشترك هو مشاركة عنوان URL أساسي عبر جميع المثيلات.
يكون المثيل الأساسي المشترك مفيدًا إذا كانت جميع طلباتك تستخدم خادمًا مشتركًا أو ترويسة مثل Authorization ترويسة:
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
أخيرًا، أنت جاهز تمامًا لاستخدام HTTP في المكون الخاص بك:
مع ضبط جميع الإعدادات، تم إنشاء ملف http-demo.js الخاص بنا. الآن، يتصل Axios بـ JSONPlaceholder و Authorization في نفس الوقت باستخدام نفس قاعدة الكود. الجزء الأفضل هو أن Axios يسترد المنشورات، ويحدد الأخطاء، ويعرضها في قائمة غير مرتبة.
الخاتمة
في هذا البرنامج التعليمي، تعلمنا أساسيات إرسال وجلب البيانات باستخدام Axios. بالإضافة إلى ذلك، قمنا بإنشاء مثيل أساسي مشترك لمشاركة عنوان URL مشترك. ومع ذلك، لا يجب أن تكون هذه نهاية تعلمك لـ Axios. نحن نشجعك على ممارسة طرق Axios الأخرى لإرسال POST, PUT, PATCH و DELETE طلبات. تعمق في توثيق Axios لاستكشاف الموضوع ومحاولة بناء مشاريع بنفسك.
لمزيد من التعلم حول مواضيع Axios و Vue.js، تحقق من هذه الموارد من مدونتنا:
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.