تواجه العديد من تطبيقات الويب ضرورة التعامل مع واجهة برمجة تطبيقات REST API في مرحلة ما من تطويرها. بالنسبة لـ React، يمكننا استخدام Axios، وهو عميل HTTP خفيف الوزن يعتمد على $http داخل Angular.js v1.x. وتتشابه ميزاته مع ميزات Fetch API.
يعتمد Axios على الوعود (promise-based)، مما يتيح لنا القدرة على دمج ميزتي async و await لكتابة كود متزامن أكثر سهولة في القراءة. كما أنه يدعم اعتراض الطلبات وإلغائها. علاوة على ذلك، هناك حماية مدمجة من جانب العميل ضد تزوير الطلبات عبر المواقع (CSRF).
في هذا الدليل، سنعرض كيفية استخدام Axios للوصول إلى واجهة برمجة التطبيقات الشهيرة JSON Placeholder في تطبيق React تجريبي. يمكنك معرفة المزيد عن تنسيق JSON في JavaScript من هذا البرنامج التعليمي.
المتطلبات الأساسية
لإكمال الخطوات الموضحة في هذا الدليل، ستحتاج إلى المكونات التالية:
- خادم Ubuntu مهيأ بشكل صحيح. إليك خطوات إعداد خادم Ubuntu الخاص بك على CloudSigma.
- تثبيت أحدث إصدار من Node.js. تحقق من كيفية تثبيت Node.js على Ubuntu.
- مشروع React جديد باستخدام Create React App. سيكون من المفيد أولاً اتباع وتنفيذ هذا الدليل الخاص بإعداد مشروع React باستخدام Create React App.
- فهم أساسي لـ HTML, CSS، و JavaScript.
الخطوة 1: تثبيت Axios في مشروع React
يتوفر Axios مباشرة كـ حزمة npm. تحقق من Axios على npm. كل ما نحتاجه هو إنشاء مشروع React وتثبيت حزمة Axios.
سيقوم أمر npx التالي بتشغيل create-react-app لإنشاء مشروع React جديد. سيتم استخدام اسم المشروع لإنشاء دليل مخصص للمشروع. هنا، قمنا بتسمية المشروع react-axios-demo. قم بتشغيل الأمر:
|
1 |
npx create-react-app react-axios-demo |
قم بتغيير الدليل الحالي إلى دليل المشروع الذي تم إنشاؤه حديثًا:
|
1 |
cd react-axios-demo/ |
بعد ذلك، قم باستدعاء أمر npm install لتثبيت Axios. إذا لم يتم تحديد إصدار، فإن npm سيقوم تلقائيًا بتنزيل وتثبيت أحدث إصدار من Axios:
|
1 |
npm install axios |
مشروعنا الآن جاهز لاستخدام Axios! حان الوقت لتطبيق ميزاته عمليًا.
الخطوة 2: إنشاء طلب GET
في هذه الخطوة، سنعرض إنشاء مكون جديد يستخدم Axios لإرسال طلب GET .
أولاً، قم بإنشاء مكون جديد باسم PersonList والذي سيعرض قائمة بالأسماء. قم بإنشاء دليل مخصص لتخزين المكون:
|
1 |
mkdir -pv src/components |
بعد ذلك، قم بإنشاء الملف PersonList.js :
|
1 |
touch PersonList.js |
افتح الملف في محرر نصوص. نحن نستخدم Visual Studio Code للسهولة والوضوح. أدخل كود JavaScript التالي:
|
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 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
هنا:
-
لقد قمنا باستيراد React و Axios حتى نتمكن من استخدامهما معًا في المكون.
-
نحن نربط بخطاف دورة الحياة componentDidMount ونرسل طلب GET.
يمكنك استخدام axios.get(<url>) من نقطة نهاية واجهة برمجة التطبيقات (API endpoint) للحصول على وعد (يُرجع كائن استجابة). يحتوي كائن الاستجابة على البيانات المطلوبة. ثم نقوم بتعيينها لقيمة person. يمكننا أيضًا جمع معلومات إضافية حول الطلب، مثل رمز الحالة ضمن res.status أو مزيد من المعلومات من res.request.
بعد ذلك، نحتاج إلى إضافة المكون الخاص بنا إلى ملف App.js الرئيسي. أضف الأكواد التالية:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
اكتمل التكوين لهذه الخطوة. يمكنك الآن تشغيل التطبيق واختباره باستخدام متصفحك المفضل. ابدأ تشغيل خادم التطوير:
|
1 |
npm start |
كما نرى، يظهر المخرج قائمة بأسماء الأشخاص بترتيب عشوائي:
الخطوة 3: إنشاء طلب POST
في هذا القسم، سنعرض استخدام Axios لإجراء طريقة طلب HTTP أخرى تسمى POST. لتوضيح ذلك، هدفنا هو إنشاء مكون جديد لمشروع React الخاص بنا باسم PersonAdd.
أنشئ الملف PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
ثم افتح الملف في محرر نصوص وأدخل الكود التالي:
|
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 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> اسم الشخص: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">إضافة</button> </form> </div> ) } } |
في هذا الكود، نقوم بأخذ مدخلات المستخدم وإرسال المحتوى عبر طلب POST إلى واجهة برمجة التطبيقات (API). داخل دالة handleSubmit، نمنع الإجراء الافتراضي للنموذج ونقوم بتحديث الحالة (state) لتطابق مدخلات المستخدم. عند استخدام POST فإنه يعيد نفس كائن الاستجابة. يمكننا استخدام الكائن داخل استدعاء then. لتلبية طلب POST، نقوم بالتقاط مدخلات المستخدم وإضافتها مع طلب POST. يمنحنا هذا استجابة. نقوم بتسجيل الاستجابة باستخدام console.log. يجب أن يظهر ذلك مدخلات user في النموذج.
بعد ذلك، أضف المكون إلى App.js. يجب أن يبدو الكود الكامل كما يلي:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
الآن، حان الوقت لاختبار التغييرات. ابدأ تشغيل خادم التطوير:
|
1 |
npm start |
تحقق من التغيير على متصفح الويب:
الخطوة 4: إنشاء طلب DELETE
في هذا القسم، سنوضح كيفية حذف العناصر من واجهة برمجة التطبيقات (API) بمساعدة axios.delete واستخدام عنوان URL كمعلمة (parameter). للتوضيح، أنشئ المكون PersonRemove. أنشئ الملف PersonRemove.js في مجلد src/components :
|
1 |
touch src/components/PersonRemove.js |
بعد ذلك، افتح الملف في محرر نصوص وأضف الكود التالي:
|
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 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> معرف الشخص: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">حذف</button> </form> </div> ) } } |
هنا، كائن res يقدم معلومات حول الطلب. يمكننا بعد ذلك استخدام console.log بعد إرسال النموذج.
بعد ذلك، قم بتنفيذ المكون في App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
حان الوقت لاختبار الكود الخاص بنا مرة أخرى. ابدأ تشغيل الخادم:
|
1 |
npm start |
يجب أن تجد نموذجًا جديدًا يأخذ اسم المستخدم ويحذفه من القائمة:
الخطوة 5: تطبيق المثيل الأساسي في Axios
الآن، سنعمل مع مثيل Axios الأساسي. هنا، يمكننا تحديد عنوان URL وعناصر التكوين الأخرى. لتنفيذه، قم بإنشاء ملف منفصل api.js:
|
1 |
touch src/api.js |
افتحه في محرر نصوص وأدخل الكود التالي:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
بمجرد إعداده، يمكننا استخدامه داخل مكون PersonRemove. إليك كيف سيبدو الكود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
هنا، تم تعيين http://jsonplaceholder.typicode.com/ كعنوان URL الأساسي. الآن، لم نعد بحاجة إلى استخدام عنوان URL الكامل في كل مرة نصل فيها إلى نقطة نهاية واجهة برمجة التطبيقات (API).
الخطوة 6: تنفيذ async و await
في هذا القسم، سنلقي نظرة على كيفية تنفيذ async و await للعمل مع الوعود. تقوم الكلمة المفتاحية await بحل الـ promise وإرجاع الـ value. يمكننا تعيين هذه الـ value لمتغير لاستخدام أكثر سهولة.
إليك كيف سيبدو الكود المحدث لـ PersonRemove.js:
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
هنا، قمنا باستبدال .then(). بمجرد أن promise يتم حله، نقوم بتخزين القيمة في المتغير response.
أفكار نهائية
في هذا البرنامج التعليمي، استكشفنا أمثلة مختلفة لاستخدام Axios للعمل مع REST API. تعرض الأكواد البرمجية إنشاء طلبات HTTP ومعالجة الاستجابات.
هل أنت مهتم بمعرفة المزيد عن JavaScript؟ تحقق من أدلة المبتدئين الأخرى لدينا حول مفاهيم وميزات JavaScript المختلفة، على سبيل المثال، التاريخ والوقت, معالجة السلاسل النصية, الفئات، و الكائنات.
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.