פרסם בקשת HTTP ב-React

מבוא

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

במאמר זה, נלמד כיצד לבצע בקשות POST HTTP ב-React באמצעות שתי גישות מקובלות: Fetch API ו-Axios. כמו כן, נכיר כיצד לעשות זאת ברכיבים פונקציונליים ומבוססי כיתה.

שימוש ב-Fetch API, שליחת בקשת POST HTTP עם React היא קלה כמו:

fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios מספקת לנו חלופה אלגנטית לשליחת בקשות HTTP POST:

axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

אם תרצה ללמוד עוד על גישות אלו וכיצד הן פועלות - אנא קרא את שאר המדריך!

מהי בקשת POST HTTP?

כפי שהשם מרמז, בקשות POST משמשות לפרסום נתונים לנקודת קצה - שבדרך כלל מעבדת אותם ושומרת אותם במסד נתונים. נתונים אלה יכולים לבוא מטופס, להישמר באובייקט, או להתקבל בדרך אחרת - אבל הם בדרך כלל מומרים לייצוג JSON עבור REST API לצרוך.

שליחת בקשות HTTP עם כל פועל נעשית פשוטה על ידי ה תביא API (מובנה) וספריות כגון אקסיו. ה-Fetch API הוא שיטת דפדפן מובנית לביצוע בקשות HTTP, בעוד Axios היא חבילה חיצונית שעלינו להתקין בפרויקט שלנו לפני השימוש.

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

לשתי השיטות יש יתרונות וחסרונות, אך חשוב לציין שהן יכולות להתמודד עם פעלי ה-HTTP הסטנדרטיים - POST, GET, PUT, PATCH, DELETE.

במקרה שלנו, נעבוד רשימה של פוסטים שכבר הבאנו מ-API מדומה. אנו ניצור טופס שלוקח את הכותרת והגוף של פוסט חדש, ולאחר שנשלח, נשלח בקשת POST לשרת המדומה לעיבוד:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

כעת נהפוך את הטופס לפונקציונלי כדי שנוכל להוסיף נתונים לרשימות הפוסטים באתר שלנו לאחר שליחת הטופס.

כיצד לבצע בקשת POST HTTP ברכיב הפונקציונלי של React

כעת אנו יכולים לבצע בקשות HTTP ברכיבים פונקציונליים הודות להכנסת הוקס ב-React. בעבר, רכיבים פונקציונליים שימשו רק לעיבוד ממשק משתמש.

רכיב פונקציונלי נוצר כאשר פונקציית JavaScript (סטנדרטית או ES6) מחזירה אלמנט React (JSX).

במקום להשתמש באובייקט המצב בשיטת הבנאי כמו ברכיבים מבוססי מחלקה, אנו משתמשים כעת ב-React hooks כגון useState() לאחסן את הנתונים שלנו לפני העברתם לנתונים המקוריים.

כיצד לבצע בקשת POST HTTP ברכיב הפונקציונלי של React עם Fetch API

מכיוון ש-Fetch API הוא שיטת דפדפן מובנית שמחזירה א Promise, אנו משתמשים ב- .then() ו .catch() שיטות להתמודדות עם הצלחה וכישלון. הוא מקבל גם ארגומנט חובה, שהוא כתובת ה-URL של המשאב/API שלתוכו אנו רוצים להכניס נתונים, וכן ארגומנט המציין את בקשת ה-HTTP, שבמקרה שלנו היא POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

בקוד למעלה, יצרנו שיטה שנקשר לטופס כך שהיא תופעל כאשר לוחצים על כפתור השליחה של הטופס. התחלנו בשימוש e.preventDefault() כדי למנוע מהדף להיטען מחדש בעת שליחת הטופס, כלומר בְּדֶרֶך כְּלַל מה שאתה רוצה שיקרה, אבל לא עובד באותה מידה עבור ההדגמה שלנו:

const handleSubmit = (e) => {
   e.preventDefault();
};

מסתכל על ה fetch() call, הוספנו את כתובת האתר כפרמטר החובה הראשון, והפרמטר השני מקבל את שיטת הבקשה (POST), את body, וה header:

• body – מכיל את הנתונים שאנו רוצים לשלוח לנקודת הקצה של ה-API, שעלינו מחמירים, הפיכתו לייצוג JSON מבוסס טקסט.
• header – מפרט את סוג התוכן, שבמקרה שלנו הוא application/json, מאחר והמטען שלנו מיוצג כמחרוזת JSON:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

לבסוף, מכיוון ששיטה זו מחזירה א Promise, נחלץ ממנו את תוכן ה-JSON (תגובה של השרת), נעדכן את posts המדינה לכלול את הנתונים החדשים.

כדי לטפל בשגיאות, השתמשנו גם ב- .catch() שיטה:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

כיצד לבצע בקשת POST HTTP ברכיב הפונקציונלי של React עם Axios

הסברנו כיצד לבצע בקשות POST עם ה-Fetch API בסעיף הקודם. עכשיו, בואו נשנה את handleSubmit() שיטה ולבצע בקשות POST עם Axios במקום זאת.

Axios היא ספריית לקוח HTTP שמשתמשת בהבטחות כדי להקל על השליחה בקשות HTTP אסינכרוניות לנקודות קצה REST. מכיוון שזו ספריה חיצונית, עלינו להתקין אותה תחילה בפרויקט שלנו על ידי הפעלת הפקודה הבאה בספריה של הפרויקט שלנו:

$ npm install axios

לאחר שהתקינו בהצלחה את Axios, נוכל להמשיך לבצע את בקשת ה-POST שלנו:

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

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

כיצד לבצע בקשת POST HTTP ברכיב הכיתה של React

בקשות POST ברכיבי מחלקה מטופלות בצורה שונה מאשר ברכיבים פונקציונליים מכיוון שאנו לא משתמשים יותר ב-React hooks ובמקום זאת משתמשים ב- state אובייקט.

רכיב מחלקה הוא מחלקה ES6 שמחזירה JSX ודורשת הרחבות React.

כיצד לבצע בקשת POST HTTP ברכיב הכיתה של React עם Fetch API

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

import React, { Component } from 'react';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }
   
   

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   render() {
      const { posts, title, body } = this.state;
      return (
         
      );
   }
}

export default App;

הפעם, אנחנו כבר לא מצהירים על שיטות עם const מילת מפתח. במקום זאת, הקדמה להם this. שיטה זו תופעל כאשר תלחץ על כפתור השליחה של הטופס. מכיוון שזה טופס, התחלנו להשתמש e.preventDefault() כדי למנוע מהדף להיטען מחדש עם שליחת הטופס:

handleSubmit = (e) => {
   e.preventDefault();
};

בדיוק כפי שלמדנו קודם לכן, ה-Fetch API תופס שני פרמטרים. האחת היא כתובת האתר, בעוד שהשנייה מכילה אפשרויות כמו שיטת הבקשה (POST), body, שהוא המידע שאנו מפרסמים (חייב להיות מחורז), ולאחר מכן ה- headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

בידיעה שזו הבטחה, אנו יכולים כעת לצרף את .then() שיטה להתמודד עם הצלחה וה .catch() שיטה לטיפול במצב אם יש שגיאה או כשל בבקשת HTTP.

כיצד לבצע בקשת POST HTTP ברכיב הכיתה של React עם Axios

ראינו איך לבצע POST בקשות HTTP ברכיבים מבוססי כיתה. זה דומה מאוד ל-Axios, מכיוון שכל מה שאנחנו צריכים לעשות הוא להתקין את Axios ואז להחליף את handleSubmit() שיטה, אז אנו משתמשים כעת ב-Axios ולא ב-Fetch API:

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

סיכום

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