المُقدّمة
عند تطوير تطبيقات الويب - نقوم بشكل روتيني بالوصول إلى الموارد المستضافة على الخادم. يتم طلب أو إرسال أو تنفيذ عمليات أخرى على الموارد من خلال طلبات HTTP. يتم إرسال هذه الطلبات من العميل إلى مضيف موجود على الخادم. عند إجراء طلب HTTP ، يستخدم العميل أ URL (محدد موقع المعلومات) وحمولة تحتوي على المعلومات الضرورية للوصول إلى موارد الخادم.
طرق طلب HTTP الخمسة الشائعة هي GET, PUT, POST, PATCHو DELETE. تسمح لنا هذه الطرق بأداء عمليات CRUD القياسية.
في هذه المقالة ، سوف نتعلم كيفية إنشاء طلب GET HTTP في React باستخدام إما Axios أو Fetch API ، وكذلك كيفية القيام بذلك في كل من الفئة والمكونات الوظيفية.
ما هو طلب GET؟
GET هي طريقة طلب HTTP تُستخدم للحصول على الموارد من الخوادم.
أكسيوس و جلب API هما الطريقتان الرئيسيتان لتقديم طلبات HTTP.
- Fetch API عبارة عن وحدة JavaScript مضمنة قائمة على الوعد لاسترداد الموارد من الخادم أو نقطة نهاية API.
- Axios هي مكتبة عميل HTTP قائمة على الوعد تسهل إرسال طلبات HTTP غير المتزامنة إلى نقاط نهاية REST. هذه مكتبة خارجية يجب تثبيتها.
في هذه المقالة ، سننظر في كيفية تنفيذ طلبات GET في المكونات الوظيفية لـ React باستخدام طرق Fetch API و Axios ، ثم كيفية القيام بنفس الشيء في المكونات المستندة إلى الفصل.
كيفية تنفيذ طلب GET HTTP في المكونات الوظيفية لـ React
يتم إنشاء مكون وظيفي عندما تقوم دالة JavaScript (إما عادية أو ES6) بإرجاع عنصر React (JSX). نستخدم خطافات React عند العمل مع المكونات الوظيفية ، وهي مهمة جدًا عند تنفيذ طلبات GET.
سنستخدم useState() و useEffect() خطافات. بسبب ال useEffect() يتم عرض hook على الفور عند تثبيت التطبيق ، فنحن دائمًا ننفذ طلبات GET بداخله ، ونستخدم امتداد useState() ربط لتخزين بياناتنا / استجابتنا.
كيفية تنفيذ طلب GET HTTP في المكون الوظيفي لـ React باستخدام واجهة برمجة تطبيقات الجلب
• fetch() يقبل التابع وسيطة إلزامية واحدة - عنوان URL للمورد الذي نريد جلبه ، بالإضافة إلى وسيطة اختيارية تشير إلى طريقة الطلب. القيمة الافتراضية لهذه الوسيطة الاختيارية هي GET، لذلك ليس من الضروري تعيينه عند تقديم طلب GET.
ثم تقوم Fetch API بإرجاع ملف Promise، حتى نتمكن من استخدام then() و catch() طرق للتعامل مع النجاح أو الفشل:
import { useState, useEffect } from 'react';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
return (
);
};
هذا ما يبدو عليه طلب GET القياسي. الآن ، دعنا نحلل ما فعلناه حتى الآن حتى تحصل على فهم أفضل للكود أعلاه. بادئ ذي بدء ، أنشأنا حالة للاحتفاظ بجميع الموارد / المشاركات التي سنجلبها من posts API:
const [posts, setPosts] = useState([]);
ثم استخدمنا ملف useEffect() ربط وكتب طلب GET الخاص بنا فيه بحيث يتم تشغيل الطلب فورًا بعد تحميل التطبيق:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
بعد ذلك ، أنشأنا طلب جلب في ملف useEffect() ربط وتمرير عنوان URL الذي يمكننا استخدامه للوصول إلى الخادم. نظرًا لأن هذا يعيد الوعد ، فقد استخدمنا ملف then() طريقة. نظرًا لأن هذه الطريقة تُرجع كائن استجابة بدلاً من JSON ، فقد قمنا أولاً بتحويل البيانات إلى تنسيق JSON:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
}, []);
ثم شرعنا في الحصول على المنشورات / البيانات وتخزينها في الحالة التي أنشأناها سابقًا:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
}
}, []);
أخيرًا نستخدم ملف catch() طريقة معالجة الأخطاء:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
لقد قمنا بالفعل بتنفيذ طلب GET وحفظنا بياناتنا في الحالة التي أنشأناها. الآن يمكننا استهلاك البيانات داخل تطبيق React الخاص بنا.
كيفية تنفيذ طلب GET HTTP في المكون الوظيفي لـ React باستخدام Axios
بصرف النظر عن Fetch API ، يمكننا أيضًا استخدام Axios لإرسال طلبات GET. أكسيوس هي مكتبة عميل HTTP قائمة على الوعد تسهل إرسال طلبات HTTP غير المتزامنة إلى نقاط نهاية REST.
إذا أردنا استخدام Axios ، وهي مكتبة خارجية ، فيجب علينا أولاً تثبيتها في مشروعنا عن طريق تشغيل الأمر التالي في دليل مشروعنا:
$ npm install axios
بمجرد تثبيت Axios بنجاح ، يمكننا المضي قدمًا في تنفيذ طلب GET الخاص بنا:
import { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
return (
);
};
تحقق من دليلنا العملي العملي لتعلم Git ، مع أفضل الممارسات ، والمعايير المقبولة في الصناعة ، وورقة الغش المضمنة. توقف عن أوامر Googling Git وفي الواقع تعلم ذلك!
هذا يبدو أنظف كثيرًا من واجهة Fetch API! بإلقاء نظرة على الكود أعلاه ، بدأنا باستيراد Axios نظرًا لأنها كانت مكتبة خارجية قمنا بتثبيتها:
import axios from 'axios';
ثم قمنا بتنفيذ طلب GET داخل نطاق useEffect() ربط كما فعلنا مع Fetch API ، ولكن هذه المرة يختلف بناء الجملة قليلاً:
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
على عكس طريقة Fetch API ، لا توجد خيارات مطلوبة للإعلان عن الطريقة. نقوم ببساطة بإرفاق الطريقة بالمثيل والاستعلام عنه ، كما لا توجد حاجة لتحويل البيانات لأنها تُرجعها بصيغة JSON.
كيفية تنفيذ طلب GET HTTP في مكون فئة React
مكون الفئة هو فئة ES6 تُرجع JSX وتتطلب امتدادات React لاستخدامها. قبل إدخال الخطافات ، كانت هذه هي الطريقة الأكثر استخدامًا (أي الإصدارات السابقة 16.8) لأنه لا يمكن استخدام الحالة داخل المكونات الوظيفية.
على الرغم من توفر الخطافات ، يستمر العديد من الأشخاص في استخدام مكونات الفصل. دعونا نلقي نظرة على كيفية استخدام constructor() ملكية الدولة للطريقة ، و ComponentDidMount() أسلوب دورة الحياة لتنفيذ طلبات GET HTTP في React مع مكونات الصنف.
كيفية تنفيذ طلب GET HTTP في مكونات فئة React باستخدام واجهة برمجة تطبيقات الجلب
هذا مشابه جدًا للطريقة التي أجرينا بها GET طلب في المكونات الوظيفية. الاختلاف الوحيد هو أننا سنستخدم الآن ملكية الدولة في constructor() طريقة بدلا من useState() صنارة صيد. أيضا ، سوف نتعامل مع ملف GET طلب في ComponentDidMount() دورة حياة بدلاً من useEffect() hook ، بحيث يتم تشغيل هذا الطلب بمجرد تحميل التطبيق لدينا:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
render() {
const { posts } = this.state;
return (
);
}
}
في الكود أعلاه ، استخدمنا التابع constructor لتهيئة حالة الكائن لتخزين الموارد / البيانات التي سنحصل عليها من الخادم / API:
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
ثم قمنا بتنفيذ طلب GET في ملف componentDidMount() طريقة دورة الحياة بحيث يتم تشغيلها بمجرد تحميل التطبيق:
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
state هو كائن يحمل العديد من الحالات ، فنحن ندمره أولاً للحصول على posts الحالة ، والتي يمكن استخدامها لاحقًا:
render() {
const { posts } = this.state;
return (
);
}
كيفية تنفيذ طلب GET HTTP في مكونات فئة React باستخدام Axios
كما رأينا مع المكونات الوظيفية ، يمكننا الإرسال GET طلبات مع أكسيوس. كل ما تبقى هو تنفيذ GET طلب داخل ComponentDidMount() دورة الحياة واستيراد أكسيوس:
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
this.setState({ posts: response.data });
})
.catch((error) => {
console.log(error);
});
}
render() {
const { posts } = this.state;
return (
);
}
}
وفي الختام
تعلمنا كيفية تنفيذ طلبات GET HTTP مع كل من المكونات الوظيفية والفئة باستخدام الطريقتين الأكثر استخدامًا - Fetch API و Axios ، في هذه المقالة.
إن استخدام طريقة معينة أمر متروك لك تمامًا.
