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

Axios هي مكتبة JavaScript شائعة جدًا يمكنك استخدامها لتنفيذ طلبات HTTP ، والتي تعمل في كل من الأنظمة الأساسية Browser و Node.js

مقدمة في أكسيوس

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