دليل كامل للعمل مع أكسيوس

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

الشروع في العمل مع Axios

يمكنك استخدام Axios في تطبيقك باستخدام شبكة توصيل المحتوى (CDN) أو تثبيتها في مشروعك.

لاستخدام Axios مباشرةً في HTML ، انسخ رابط CDN أدناه وأدخله في قسم رأس ملف HTML الخاص بك:

<النصيsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">النصي>

مع هذا النهج ، يمكنك استخدام Axios و طرق HTTP في نص نصوص HTML النصية الخاصة بك. يمكن أكسيوس أيضا تستهلك REST APIs في إطار عمل مثل React.

لاستخدام Axios في مشروع Node.js ، قم بتثبيته في دليل المشروع باستخدام إما npm أو مدير حزمة الغزل:

npm تثبيت أكسيوس
# أو
إضافة الغزول المحاور

عند التثبيت ، يمكنك البدء في استخدام Axios في مشروع JavaScript الخاص بك:

مقدار ثابت المحاور = يتطلب("أكسيوس");

إلى جانب هذا الدليل ، ستعمل مع الإصدار المجاني JSON API. بينما تحتوي واجهة برمجة التطبيقات هذه على مجموعة من الموارد ، ستستخدم فقط ملف /comments و /posts نقاط النهاية. نقاط النهاية هي عناوين URL محددة يمكن الوصول إليها لاسترداد البيانات أو معالجتها.

تقديم طلبات GET مع Axios

هناك عدة طرق لتقديم طلب GET باستخدام Axios. ومع ذلك ، فإن بناء الجملة يعتمد بشكل عام على الأفضلية.

تتمثل إحدى طرق تقديم طلب GET في استخدام ملف أكسيوس () أسلوب مع كائن يحدد طريقة الطلب كـ يحصل وعنوان URL لإرسال الطلب إليه.

على سبيل المثال:

مقدار ثابت المحاور = يتطلب("أكسيوس");
أكسيوس ({
 طريقة: "يحصل",
 عنوان url: " https://jsonplaceholder.typicode.com/comments",
})
 .ثم((الدقة) => {
وحدة التحكم.log (res.data) ؛
 })
 .يمسك((يخطئ) => {
وحدة التحكم. Error (يخطئ) ؛
 });

هذا المثال يخلق وعد باستخدام نموذج البرمجة غير المتزامن بسلاسل .ثم() و .يمسك() طُرق. الوعد يسجل الاستجابة لوحدة التحكم عند نجاح الطلب ويسجل رسالة الخطأ إذا فشل الطلب.

يوفر Axios أيضًا طريقة أسهل لتقديم طلبات GET التي تلغي الحاجة إلى تمرير كائن عن طريق ربط ملف .يحصل() طريقة ل أكسيوس مثال.

على سبيل المثال:

أكسيوس
 .يحصل(" https://jsonplaceholder.typicode.com/comments")
 .ثم((الدقة) => {
وحدة التحكم.log (res.data) ؛
 })
 .يمسك((يخطئ) => {
وحدة التحكم. Error (يخطئ) ؛
 });

تقديم طلبات POST مع Axios

يشبه إجراء طلب POST مع Axios تقديم طلب GET. يمكنك إرسال البيانات إلى الخادم باستخدام هذا الطلب.

مقتطف الشفرة أدناه هو مثال على كيفية استخدام Axios .بريد() طريقة:

أكسيوس
 .بريد(" https://jsonplaceholder.typicode.com/comments", {
 اسم: "جاكسون سميث",
 بريد إلكتروني: "[email protected]",
 جسم: "هذا هو قطعة من الفن.",
 })
 .ثم((الدقة) => {
وحدة التحكم.log (res.data) ؛
 })
 .يمسك((يخطئ) => {
وحدة التحكم. Error (يخطئ) ؛
 });

يقوم الكود بعمل طلب POST إلى JSONPlaceholder API لإنشاء تعليق جديد. ال axios.post طريقة إرسال البيانات إلى /comments نقطة النهاية.

البيانات المرسلة في الطلب هي كائن بامتداد اسم, بريد إلكتروني، و جسم ملكية. إذا كان الطلب ناجحًا ، فإن ملف ثم طريقة تسجيل بيانات الاستجابة إلى وحدة التحكم. وإذا كان هناك خطأ ، فإن ملف يمسك طريقة تسجيل الخطأ إلى وحدة التحكم.

عمل طلبات PUT / PATCH باستخدام Axios

يمكنك استخدام طلب PUT أو PATCH لتحديث مورد موجود على الخادم. بينما يستبدل PUT المورد بالكامل ، يقوم PATCH بتحديث الحقول المحددة فقط.

لتقديم طلب PUT أو PATCH مع Axios ، تحتاج إلى استخدام ملف .يضع() أو .رقعة() طرق على التوالي.

فيما يلي مثال على كيفية استخدام هذه الطرق لتحديث ملف بريد إلكتروني خاصية التعليق بمعرف 100:

مقدار ثابت المحاور = يتطلب("أكسيوس");
أكسيوس
 .يحصل(" https://jsonplaceholder.typicode.com/comments/100")
 .ثم((الدقة) => {
وحدة التحكم.log (res.data.email) ؛
 })
 .يمسك((يخطئ) => {
وحدة التحكم. Error (يخطئ) ؛
 });
// انتاج:
// "[email protected]"
أكسيوس
 .رقعة(" https://jsonplaceholder.typicode.com/comments/100", {
 بريد إلكتروني: "[email protected]",
 })
 .ثم((الدقة) => {
وحدة التحكم.log (res.data.email) ؛
 })
 .يمسك((يخطئ) => {
وحدة التحكم. Error (يخطئ) ؛
 });
// انتاج:
// "[email protected]" ،

يقوم هذا البرنامج أولاً بتقديم طلب GET إلى نقطة النهاية " https://jsonplaceholder.typicode.com/comments/100". ثم يقوم بتسجيل ملفات بريد إلكتروني خاصية التعليق بمعرف 100 إلى وحدة التحكم. نحن نقدم طلب GET حتى تتمكن من رؤية ما تغير بعد إجراء طلب التصحيح.

الطلب الثاني هو طلب التصحيح إلى نفس نقطة النهاية. يقوم هذا الرمز بتحديث البريد الإلكتروني للتعليق إلى [email protected].

جعل طلبات الحذف مع أكسيوس

يمكنك استخدام ال يمسح طلب حذف مورد على الخادم.

خذ المثال التالي حول كيفية استخدام .يمسح() طريقة لحذف مورد من الخادم:

أكسيوس
 .يمسح(" https://jsonplaceholder.typicode.com/comments/10")
 .ثم((الدقة) => {
وحدة التحكم.log (res.data) ؛
 })
 .يمسك((يخطئ) => {
وحدة التحكم. Error (يخطئ) ؛
 });
//Output:
// {}

من خلال تسجيل كائن فارغ في وحدة التحكم ، يوضح الكود أعلاه أنه حذف التعليق بمعرف 10.

تقديم طلبات في وقت واحد مع أكسيوس

يمكنك جلب البيانات من نقاط نهاية متعددة مرة واحدة باستخدام Axios. للقيام بذلك ، تحتاج إلى استخدام ملف .الجميع() طريقة. تقبل هذه الطريقة مصفوفة من الطلبات كمعامل لها ولا يتم حلها إلا عندما تتلقى جميع الاستجابات.

في المثال التالي ، ملف .الجميع() يقوم الأسلوب باسترداد البيانات من نقطتي نهاية في وقت واحد:

أكسيوس
 .الجميع([
 axios.get (" https://jsonplaceholder.typicode.com/comments? _limit = 2 "),
 axios.get (" https://jsonplaceholder.typicode.com/posts? _limit = 2 "),
 ])
 .ثم(
 axios.spread ((التعليقات والمشاركات) => {
وحدة التحكم.log (comments.data) ؛
وحدة التحكم.log (posts.data) ؛
 })
 )
 .يمسك((يخطئ) =>وحدة التحكم. Error (يخطئ)) ؛

ترسل كتلة التعليمات البرمجية أعلاه الطلبات في وقت واحد ثم تقوم بتمرير الردود إلى .ثم() طريقة. أكسيوس .الانتشار() تفصل الطريقة بين الردود وتخصيص كل استجابة لمتغيرها.

أخيرًا ، تسجل وحدة التحكم ملف بيانات خاصية الرد على اثنين: التعليقات والمشاركات.

اعتراض الطلبات مع أكسيوس

في بعض الأحيان ، قد تحتاج إلى اعتراض أحد الطلبات قبل أن يصل إلى الخادم. يمكنك استخدام Axios ' interceptors.request.use () طريقة لاعتراض الطلبات.

في المثال التالي ، تقوم الطريقة بتسجيل نوع الطلب إلى وحدة التحكم لكل طلب يتم إجراؤه:

axios.interceptors.request.use (
 (التكوين) => {
وحدة التحكم.سجل(`$ {config.method} تم تقديم الطلب);
يعود التكوين ؛
 },
 (خطأ) => {
يعوديعد.reject (خطأ) ؛
 }
);
أكسيوس
 .يحصل(" https://jsonplaceholder.typicode.com/comments? _limit = 2 ")
 .ثم((الدقة) =>وحدة التحكم.log (res.data))
 .يمسك((يخطئ) =>وحدة التحكم. Error (يخطئ)) ؛

يعرّف البرنامج معترض Axios باستخدام ملف axios.interceptors.request.use طريقة. تستغرق هذه الطريقة التكوين و خطأ الأشياء كحجج. ال التكوين يحتوي الكائن على معلومات حول الطلب ، بما في ذلك طريقة الطلب (config.method) وعنوان URL للطلب (config.url).

تقوم دالة المعترض بإرجاع ملف التكوين كائن ، مما يسمح للطلب بالمضي قدمًا بشكل طبيعي. إذا كان هناك خطأ ، تقوم الوظيفة بإرجاع المرفوض يعد هدف.

أخيرًا ، يقدم البرنامج طلبًا لاختبار المعترض. ستسجل وحدة التحكم نوع الطلب المقدم ، وفي هذه الحالة ، طلب GET.

هناك المزيد في Axios

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