Axios היא אפשרות מועדפת ביותר לביצוע בקשות HTTP ב-JavaScript. למד כיצד לעשות זאת ביעילות בעזרת המדריך המקיף הזה.

Axios היא ספריית JavaScript המספקת API פשוט לשליחת בקשות HTTP מקוד JavaScript בצד הלקוח או מקוד Node.js בצד השרת. Axios בנויה על ה-Promise API של JavaScript, מה שהופך את הקוד האסינכרוני לתחזוקה יותר.

תחילת העבודה עם Axios

אתה יכול להשתמש ב-Axios באפליקציה שלך באמצעות רשת אספקת תוכן (CDN) או התקנתה בפרויקט שלך.

כדי להשתמש ב-Axios ישירות ב-HTML, העתק את קישור ה-CDN למטה והכנס אותו לחלק הראשי של קובץ ה-HTML שלך:

<תַסרִיטsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">תַסרִיט>

עם גישה זו, אתה יכול להשתמש ב-Axios ושלו שיטות HTTP בגוף סקריפטי ה-HTML שלך. Axios יכול גם לצרוך ממשקי API של REST במסגרת כמו React.

כדי להשתמש ב-Axios בפרויקט Node.js, התקן אותו בספריית הפרויקט שלך באמצעות npm או מנהל חבילות חוט:

npm להתקין אקסיות
# או
חוט להוסיף אקסיות

לאחר ההתקנה, אתה יכול להתחיל להשתמש ב-Axios בפרויקט JavaScript שלך:

const אקסיוס = לִדרוֹשׁ('אקסיות');

לאורך המדריך הזה, תעבדו עם החינמי

instagram viewer
JSONPlaceholder ממשק API. בעוד ל-API הזה יש קבוצה של משאבים, אתה תשתמש רק ב- /comments ו /posts נקודות קצה. נקודות קצה הן כתובות URL ספציפיות שניתן לגשת אליהן כדי לאחזר או לתפעל נתונים.

ביצוע בקשות GET עם Axios

ישנן מספר דרכים לבצע בקשת GET באמצעות Axios. עם זאת, התחביר תלוי בדרך כלל בהעדפה.

אחת הדרכים להגשת בקשת GET היא באמצעות axios() שיטה עם אובייקט שמציין את שיטת הבקשה בתור לקבל ואת כתובת האתר שאליה יש לשלוח את הבקשה.

לדוגמה:

const אקסיוס = לִדרוֹשׁ("אקסיות");
axios({
 שיטה: "לקבל",
 כתובת אתר: " https://jsonplaceholder.typicode.com/comments",
})
 .לאחר מכן((מילואים) => {
לְנַחֵם.log (res.data);
 })
 .לתפוס((לִטְעוֹת) => {
לְנַחֵםשגיאה (שגיאה);
 });

הדוגמה הזו יוצרת הבטחה באמצעות מודל התכנות האסינכרוני על ידי שרשרת ה .לאחר מכן() ו .לתפוס() שיטות. ההבטחה מתעדת את התגובה למסוף כאשר הבקשה מצליחה ומתעדת את הודעת השגיאה אם ​​הבקשה נכשלת.

Axios מספקת גם דרך קלה יותר להגשת בקשות GET המבטלות את הצורך להעביר אובייקט על ידי שרשור .לקבל() שיטה ל אקסיוס למשל.

לדוגמה:

אקסיוס
 .לקבל(" https://jsonplaceholder.typicode.com/comments")
 .לאחר מכן((מילואים) => {
לְנַחֵם.log (res.data);
 })
 .לתפוס((לִטְעוֹת) => {
לְנַחֵםשגיאה (שגיאה);
 });

ביצוע בקשות POST עם Axios

ביצוע בקשת POST עם Axios דומה לבקשת GET. אתה יכול לשלוח נתונים לשרת באמצעות בקשה זו.

קטע הקוד שלהלן הוא דוגמה לשימוש ב-Axios' .הודעה() שיטה:

אקסיוס
 .הודעה(" https://jsonplaceholder.typicode.com/comments", {
 שֵׁם: "ג'קסון סמית'",
 אימייל: "[email protected]",
 גוּף: "זו יצירת אמנות.",
 })
 .לאחר מכן((מילואים) => {
לְנַחֵם.log (res.data);
 })
 .לתפוס((לִטְעוֹת) => {
לְנַחֵםשגיאה (שגיאה);
 });

הקוד מבצע בקשת POST ל-JSONPlaceholder API כדי ליצור הערה חדשה. ה axios.post שיטה שולחת נתונים ל- /comments נקודת קצה.

הנתונים שנשלחו בבקשה הם אובייקט עם א שֵׁם, אימייל, ו גוּף תכונה. אם הבקשה תצליח, ה לאחר מכן השיטה מתעדת את נתוני התגובה למסוף. ואם יש שגיאה, ה לתפוס השיטה מתעדת את השגיאה למסוף.

ביצוע בקשות PUT/PATCH עם Axios

אתה יכול להשתמש בבקשת PUT או PATCH כדי לעדכן משאב קיים בשרת. בעוד PUT מחליף את המשאב כולו, PATCH מעדכן רק את השדות שצוינו.

כדי לבצע בקשת PUT או PATCH עם Axios, עליך להשתמש ב- .לָשִׂים() או .תיקון() שיטות בהתאמה.

הנה דוגמה כיצד להשתמש בשיטות אלה כדי לעדכן את אימייל המאפיין של ההערה עם מזהה 100:

const אקסיוס = לִדרוֹשׁ("אקסיות");
אקסיוס
 .לקבל(" https://jsonplaceholder.typicode.com/comments/100")
 .לאחר מכן((מילואים) => {
לְנַחֵם.log (res.data.email);
 })
 .לתפוס((לִטְעוֹת) => {
לְנַחֵםשגיאה (שגיאה);
 });


// פלט:
// '[email protected]'


אקסיוס
 .תיקון(" https://jsonplaceholder.typicode.com/comments/100", {
 אימייל: "[email protected]",
 })
 .לאחר מכן((מילואים) => {
לְנַחֵם.log (res.data.email);
 })
 .לתפוס((לִטְעוֹת) => {
לְנַחֵםשגיאה (שגיאה);
 });
// פלט:
// '[email protected]',

תוכנית זו מבצעת תחילה בקשת GET לנקודת הקצה " https://jsonplaceholder.typicode.com/comments/100". לאחר מכן הוא רושם את אימייל הנכס של ההערה עם מזהה של 100 לקונסולה. אנו מבצעים בקשת GET כדי שתוכל לראות מה השתנה לאחר ביצוע בקשת ה- PATCH.

הבקשה השנייה היא בקשת PATCH לאותה נקודת קצה. קוד זה מעדכן את האימייל של התגובה ל [email protected].

ביצוע בקשות מחיקה עם Axios

אתה יכול להשתמש ב לִמְחוֹק בקשה למחוק משאב בשרת.

קח את הדוגמה הבאה כיצד להשתמש ב- .לִמְחוֹק() שיטה למחיקת משאב מהשרת:

אקסיוס
 .לִמְחוֹק(" https://jsonplaceholder.typicode.com/comments/10")
 .לאחר מכן((מילואים) => {
לְנַחֵם.log (res.data);
 })
 .לתפוס((לִטְעוֹת) => {
לְנַחֵםשגיאה (שגיאה);
 });
//Output:
// {}

על ידי רישום אובייקט ריק למסוף, הקוד שלמעלה מראה שהוא מחק את התגובה עם המזהה 10.

ביצוע בקשות בו-זמנית עם Axios

אתה יכול להביא נתונים ממספר נקודות קצה בו-זמנית באמצעות Axios. כדי לעשות זאת, עליך להשתמש ב- .את כל() שיטה. שיטה זו מקבלת מערך של בקשות כפרמטר שלה ופותרת רק כאשר אתה מקבל את כל התגובות.

בדוגמה הבאה, ה .את כל() השיטה מאחזרת נתונים משתי נקודות קצה בו זמנית:

אקסיוס
 .את כל([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .לאחר מכן(
 axios.spread((תגובות, פוסטים) => {
לְנַחֵם.log (comments.data);
לְנַחֵם.log (posts.data);
 })
 )
 .לתפוס((לִטְעוֹת) =>לְנַחֵםשגיאה (שגיאה));

בלוק הקוד שלמעלה שולח בקשות בו-זמנית ולאחר מכן מעביר את התגובות ל- .לאחר מכן() שיטה. של אקסיוס .התפשטות() השיטה מפרידה בין התגובות ומקצה כל תגובה למשתנה שלה.

לבסוף, המסוף רושם את נתונים מאפיין של שתי התגובות: תגובות ופוסטים.

יירוט בקשות עם Axios

לפעמים, ייתכן שיהיה עליך ליירט בקשה לפני שהיא מגיעה לשרת. אתה יכול להשתמש ב-Axios' interceptors.request.use() שיטה ליירט בקשות.

בדוגמה הבאה, השיטה מתעדת את סוג הבקשה למסוף עבור כל בקשה שמתבצעת:

axios.interceptors.request.use(
 (config) => {
לְנַחֵם.עֵץ(`${config.method} הבקשה הוגשה`);
לַחֲזוֹר config;
 },
 (שגיאה) => {
לַחֲזוֹרהַבטָחָה.reject (שגיאה);
 }
);
אקסיוס
 .לקבל(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .לאחר מכן((מילואים) =>לְנַחֵם‎.log (res.data))
 .לתפוס((לִטְעוֹת) =>לְנַחֵםשגיאה (שגיאה));

התוכנית מגדירה מיירט של Axios באמצעות ה אקסיוס.מיירטים.בקשות.שימוש שיטה. שיטה זו לוקחת תצורה ו שְׁגִיאָה חפצים כטיעונים. ה תצורה האובייקט מכיל מידע על הבקשה, כולל שיטת הבקשה (config.method) וכתובת האתר של הבקשה (config.url).

הפונקציה המיירט מחזירה את תצורה התנגדות, המאפשרת לבקשה להתנהל כרגיל. אם יש שגיאה, הפונקציה מחזירה את הנדחה הַבטָחָה לְהִתְנַגֵד.

לבסוף, התוכנית מבקשת לבדוק את המיירט. המסוף ירשום את סוג הבקשה שנעשתה, במקרה זה, בקשת GET.

יש עוד באקסיוס

למדת כיצד לבצע וליירט בקשות בפרויקטים שלך באמצעות Axios. תכונות רבות אחרות, כמו שינוי בקשות ושימוש במופעי Axios זמינות עבורך כמפתח JavaScript לחקור. Axios נותרה אפשרות מועדפת לביצוע בקשות HTTP ביישומי JavaScript שלך. עם זאת, Fetch API היא אפשרות טובה נוספת שתוכל לחקור.