طلبات HTTP في العقدة باستخدام Axios

Axios هي مكتبة JavaScript ملائمة جدًا لتنفيذ طلبات HTTP في Node.js

مقدمة

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

وهو يدعم جميع المتصفحات الحديثة ، بما في ذلك دعم IE8 والإصدارات الأحدث.

إنه مستند إلى الوعد ، وهذا يتيح لنا كتابة رمز انتظار / غير متزامن لأداءهXHRالطلبات بسهولة بالغة.

استخدام أكسيوس له مزايا قليلة مقارنة بالأصليجلب API:

  • يدعم المتصفحات القديمة (يحتاج الجلب إلى polyfill)
  • لديه طريقة لإجهاض الطلب
  • لديه طريقة لتعيين مهلة الاستجابة
  • يحتوي على حماية CSRF مدمجة
  • يدعم تقدم التحميل
  • يقوم بتحويل بيانات JSON تلقائيًا
  • يعمل في Node.js

فيديو تعليمي

تحقق من هذا الفيديو حيث أقوم بإنشاء خادم Express يوفر نقطة نهاية POST ، وأقوم بطلب Axios لنشر البيانات:


تثبيت

يمكن تثبيت Axios باستخدامnpm:

npm install axios

أوغزل:

yarn add axios

أو قم بتضمينها في صفحتك باستخدام unpkg.com:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

واجهة برمجة تطبيقات Axios

يمكنك بدء طلب HTTP من ملفaxiosموضوع:

أنا أستعملfooوbarمثلأسماء عشوائية. أدخل أي نوع من الأسماء لاستبدالها.

axios({
  url: 'https://dog.ceo/api/breeds/list/all',
  method: 'get',
  data: {
    foo: 'bar'
  }
})

ولكن للراحة ، ستستخدمه بشكل عام

  • axios.get()
  • axios.post()

(كما هو الحال في jQuery الذي قد تستخدمه$.get()و$.post()بدلا من$.ajax())

يوفر Axios طرقًا لجميع أفعال HTTP ، والتي تعتبر أقل شيوعًا ولكنها لا تزال مستخدمة:

  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()

وطريقة للحصول على رؤوس HTTP لطلب ما ، مع تجاهل النص الأساسي:

  • axios.head()

طلبات GET

إحدى الطرق الملائمة لاستخدام Axios هي استخدام الصيغة الحديثة (ES2017) غير المتزامن / انتظار.

يستعلم مثال 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/?foo=bar.

باستخدام Axios ، يمكنك إجراء ذلك باستخدام عنوان URL هذا:

axios.get('https://site.com/?foo=bar')

أو يمكنك استخدام ملفparamsالخاصية في الخيارات:

axios.get('https://site.com/', {
  params: {
    foo: 'bar'
  }
})

طلبات POST

إن تنفيذ طلب POST يشبه تمامًا إجراء طلب GET ، ولكن بدلاً منaxios.get، انت تستخدمaxios.post:

axios.post('https://site.com/')

الكائن الذي يحتوي على معلمات POST هو الوسيط الثاني:

axios.post('https://site.com/', {
  foo: 'bar'
})

تحميل مجانيكتيب Node.js


المزيد من دروس العقدة: