מבוא
בעת פיתוח אפליקציות אינטרנט - אנו ניגשים באופן שוטף למשאבים המתארחים בשרת. לבקש, לשלוח או לבצע פעולות אחרות במשאבים מתבצעות באמצעות בקשות HTTP. בקשות אלו נשלחות מהלקוח למארח בשרת. בעת ביצוע בקשת HTTP, הלקוח משתמש ב-a כתובת אתר (איתור משאבים אחיד) ומטען המכיל את המידע הדרוש לגישה למשאבי השרת.
חמש שיטות בקשת 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 hooks כאשר עובדים עם רכיבים פונקציונליים, שהם חשובים מאוד בעת ביצוע בקשות GET.
אנו נשתמש ב- useState() ו useEffect() ווים. בגלל ה useEffect() hook מעבד מיד כאשר האפליקציה עולה, אנו תמיד מבצעים בתוכה בקשות GET, ואנחנו משתמשים ב- useState() וו לאחסון הנתונים/תגובה שלנו.
כיצד לבצע בקשת GET HTTP ברכיב הפונקציונלי של React עם ה-Fetch API
השמיים fetch() השיטה מקבלת ארגומנט חובה אחד - כתובת ה-URL למשאב שאנו רוצים להביא, וכן ארגומנט אופציונלי המציין את שיטת הבקשה. ערך ברירת המחדל עבור הארגומנט האופציונלי הזה הוא GET, כך שאין צורך להגדיר אותו בעת ביצוע בקשת GET.
ואז Fetch API מחזיר את a 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() הוק והעביר את כתובת האתר שבה נוכל להשתמש כדי לגשת לשרת. מכיוון שזה מחזיר הבטחה, השתמשנו ב- 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 שלנו.
כיצד לבצע בקשת HTTP GET ברכיב הפונקציונלי של 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, עם שיטות עבודה מומלצות, סטנדרטים מקובלים בתעשייה ודף רמאות כלול. תפסיק לגוגל פקודות 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 עם Fetch API
זה מאוד דומה לאופן שבו ביצענו את GET בקשה ברכיבים פונקציונליים. ההבדל היחיד הוא שכעת נשתמש ברכוש המדינה ב constructor() שיטה ולא את useState() וו. כמו כן, אנחנו נטפל שלנו GET בקשה ב ComponentDidMount() מחזור החיים ולא ה useEffect() הוק, כך שהבקשה הזו תופעל ברגע שהאפליקציה שלנו נטענת:
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 (
);
}
}
בקוד למעלה, השתמשנו בשיטת הבנאי כדי לאתחל מצב של אובייקט כדי לאחסן את המשאב/הנתונים שנקבל מהשרת/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 בקשות עם Axios. כל מה שנותר הוא לבצע את GET בקשה במסגרת ComponentDidMount() מחזור חיים ולייבא Axios:
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, במאמר זה.
השימוש בשיטה ספציפית תלוי לחלוטין בך.
