Axios هي مكتبة JavaScript شائعة جدًا يمكنك استخدامها لتنفيذ طلبات HTTP ، والتي تعمل في كل من الأنظمة الأساسية Browser و Node.js
- مقدمة في أكسيوس
- فيديو تعليمي
- تثبيت
- واجهة برمجة تطبيقات Axios
- طلبات GET
- أضف معلمات إلى طلبات GET
- طلبات POST
مقدمة في أكسيوس
Axios هي مكتبة JavaScript شائعة جدًا يمكنك استخدامها لتنفيذ طلبات HTTP ، والتي تعمل في كل من المتصفح وNode.jsالمنصات.
وهو يدعم جميع المتصفحات الحديثة ، بما في ذلك دعم IE8 والإصدارات الأحدث.
إنه مستند إلى الوعد ، وهذا يتيح لنا كتابة رمز انتظار / غير متزامن لأداءهXHRالطلبات بسهولة بالغة.
استخدام أكسيوس له مزايا قليلة مقارنة بالأصليجلب API:
- يدعم المتصفحات القديمة (يحتاج الجلب إلى polyfill)
- لديه طريقة لإجهاض الطلب
- لديه طريقة لتعيين مهلة الاستجابة
- يحتوي على حماية CSRF مدمجة
- يدعم تقدم التحميل
- ينفذ تلقائيجسونتحويل البيانات
- يعمل في Node.js
فيديو تعليمي
تحقق من هذا الفيديو حيث أقوم بإنشاء خادم Express يوفر نقطة نهاية POST ، وأقوم بطلب Axios لنشر البيانات:
تثبيت
يمكن تثبيت Axios لاستخدامه في Node.jsnpm:
npm install axios
في المتصفح ، يمكنك تضمينه في صفحتك باستخدام unpkg.com:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
تذكر أنه يجب تمكين استدعاءات APIكورسليتم الوصول إليها داخل المتصفح ، وإلا فسيفشل الطلب.
واجهة برمجة تطبيقات Axios
يمكنك بدء طلب HTTP من ملفaxios
موضوع:
axios({
url: 'https://dog.ceo/api/breeds/list/all',
method: 'get'
})
هذا يعيد ملفيعد. يمكنك استخدام غير متزامن / انتظار لحل هذا الوعد لكائن الاستجابة:
;(async () => {
const response = await axios({
url: 'https://dog.ceo/api/breeds/list/all',
method: 'get'
})
console.log(response)
})()
للراحة ، ستستخدم الطرق بشكل عام
axios.get()
axios.post()
بالنسبة إلى الإصدارات القديمة ، كما هو الحال في jQuery الذي قد تستخدمه
$.get()
و$.post()
بدلا من$.ajax()
أنها توفر بناء جملة أبسط. على سبيل المثال:
;(async () => {
const response = await axios.get('https://dog.ceo/api/breeds/list/all')
console.log(response)
})()
يوفر Axios طرقًا لجميع أفعال HTTP ، والتي تعتبر أقل شيوعًا ولكنها لا تزال مستخدمة:
axios.delete()
axios.put()
axios.patch()
axios.options()
وطريقة للحصول على رؤوس HTTP لطلب ما ، وتجاهل النص الأساسي ،axios.head()
.
طلبات GET
يستعلم مثال Node.js هذا عن ملفالكلب APIلاسترداد قائمة سلالات الكلاب باستخدامaxios.get()
وهي تحسبهم:
const axios = require('axios')
const getBreeds = async () => {
try {
return await axios.get(‘https://dog.ceo/api/breeds/list/all’)
} catch (error) {
console.error(error)
}
}
const countBreeds = async () => {
const breeds = await getBreeds()
if (breeds.data.message) {
console.log(Got </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">breeds</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds
)
}
}
countBreeds()
إذا كنت لا تريد استخدام غير متزامن / انتظار ، يمكنك استخدام ملفوعودبناء الجملة:
const axios = require('axios')
const getBreeds = () => {
try {
return axios.get(‘https://dog.ceo/api/breeds/list/all’)
} catch (error) {
console.error(error)
}
}
const countBreeds = async () => {
const breeds = getBreeds()
.then(response => {
if (response.data.message) {
console.log(
Got </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds
)
}
})
.catch(error => {
console.log(error)
})
}
countBreeds()
أضف معلمات إلى طلبات GET
يمكن أن تحتوي استجابة GET على معلمات في عنوان URL ، مثل هذا:https://site.com/?name=Flavio
.
باستخدام Axios ، يمكنك إجراء ذلك باستخدام عنوان URL هذا:
axios.get('https://site.com/?name=Flavio')
أو يمكنك استخدام ملفparams
الخاصية في الخيارات:
axios.get('https://site.com/', {
params: {
name: 'Flavio'
}
})
طلبات POST
إن تنفيذ طلب POST يشبه تمامًا إجراء طلب GET ، ولكن بدلاً منaxios.get
، انت تستخدمaxios.post
:
axios.post('https://site.com/')
الكائن الذي يحتوي على معلمات POST هو الوسيط الثاني:
axios.post('https://site.com/', {
name: 'Flavio'
})
تحميل مجانيكتيب Node.js
المزيد من دروس العقدة:
- مقدمة لمدير الحزم npm
- مقدمة إلى Node.js
- طلبات HTTP باستخدام Axios
- أين تستضيف تطبيق Node.js
- تفاعل مع Google Analytics API باستخدام Node.js
- عداء حزمة العقدة npx
- دليل package.json
- أين تقوم npm بتثبيت الحزم؟
- كيفية تحديث Node.js
- كيفية استخدام أو تنفيذ حزمة مثبتة باستخدام npm
- ملف package-lock.json
- الإصدار الدلالي باستخدام npm
- هل يجب عليك تثبيت مجلد node_modules في Git؟
- قم بتحديث جميع تبعيات Node إلى أحدث إصدار لها
- تحليل JSON باستخدام Node.js
- ابحث عن الإصدار المثبت من حزمة npm
- تيارات Node.js
- قم بتثبيت إصدار أقدم من حزمة npm
- احصل على المجلد الحالي في Node
- كيفية تسجيل كائن في العقدة
- كشف الوظائف من ملف العقدة باستخدام الصادرات
- الاختلافات بين العقدة والمستعرض
- قم بإجراء طلب HTTP POST باستخدام Node
- احصل على بيانات نص طلب HTTP باستخدام Node
- عقدة المخازن
- تاريخ موجز لـ Node.js
- كيفية تثبيت Node.js
- ما مقدار JavaScript الذي تحتاج إلى معرفته لاستخدام Node؟
- كيفية استخدام Node.js REPL
- عقدة ، قبول الحجج من سطر الأوامر
- الإخراج إلى سطر الأوامر باستخدام العقدة
- اقبل الإدخال من سطر الأوامر في Node
- إلغاء تثبيت حزم npm باستخدام "npm uninstall"
- الحزم العالمية أو المحلية npm
- تبعيات npm و dev
- حلقة حدث Node.js
- فهم process.nextTick ()
- فهم setImmediate ()
- باعث حدث العقدة
- بناء خادم HTTP
- إجراء طلبات HTTP باستخدام Node
- الوحدة النمطية Node fs
- طلبات HTTP في العقدة باستخدام Axios
- قراءة الملفات باستخدام Node
- مسارات ملفات العقدة
- كتابة الملفات باستخدام Node
- احصائيات ملف العقدة
- العمل مع واصفات الملفات في Node
- العمل مع المجلدات في Node
- وحدة مسار العقدة
- وحدة Node http
- استخدام WebSockets مع Node.js
- أساسيات العمل مع MySQL و Node
- معالجة الخطأ في Node.js
- دليل الصلصال
- كيفية قراءة متغيرات البيئة من Node.js
- كيفية الخروج من برنامج Node.js
- وحدة Node os
- وحدة أحداث العقدة
- العقدة ، الفرق بين التطوير والإنتاج
- كيفية التحقق من وجود ملف في Node.js
- كيفية إنشاء ملف فارغ في Node.js
- كيفية إزالة ملف باستخدام Node.js
- كيفية الحصول على تاريخ آخر تحديث لملف باستخدام Node.js
- كيفية تحديد ما إذا كان التاريخ هو اليوم في JavaScript
- كيفية كتابة كائن JSON لملفه في Node.js
- لماذا يجب عليك استخدام Node.js في مشروعك التالي؟
- قم بتشغيل خادم الويب من أي مجلد
- كيفية استخدام MongoDB مع Node.js
- استخدم Chrome DevTools لتصحيح أخطاء تطبيق Node.js
- ما هو pnpm؟
- قائمة خيارات Node.js Runtime v8
- كيفية إصلاح خطأ "الوصول للكتابة مفقود" عند استخدام npm
- كيفية تمكين وحدات ES في Node.js
- كيفية إنتاج عملية فرعية باستخدام Node.js
- كيفية الحصول على كل من الجسم المحلل والجسم الخام في Express
- كيفية التعامل مع تحميلات الملفات في Node.js
- ما هي تبعيات الأقران في وحدة العقدة؟
- كيفية كتابة ملف CSV باستخدام Node.js
- كيفية قراءة ملف CSV باستخدام Node.js
- الوحدات الأساسية للعقدة
- زيادة أرقام المجلدات المتعددة مرة واحدة باستخدام Node.js
- كيفية طباعة لوحة الرسم على عنوان URL للبيانات
- كيفية إنشاء صورة وحفظها باستخدام Node.js و Canvas
- كيفية تنزيل صورة باستخدام Node.js
- كيفية إعادة تسمية الملفات بشكل جماعي في Node.js
- كيفية الحصول على أسماء جميع الملفات في مجلد في Node
- كيفية استخدام الوعود والانتظار مع وظائف Node.js المستندة إلى رد الاتصال
- كيفية اختبار حزمة npm محليًا
- كيفية التحقق من إصدار Node.js الحالي في وقت التشغيل
- كيفية استخدام Sequelize للتفاعل مع PostgreSQL
- اعرض صفحة HTML باستخدام Node.js
- كيفية حل خطأ "util.pump ليس دالة" في Node.js