طلب POST HTTP في React

المُقدّمة

عند العمل مع واجهات برمجة التطبيقات (APIs)، نرغب في كثير من الأحيان في إرسال البيانات إلى الخادم للمعالجة. على سبيل المثال، إذا كانت لدينا قائمة مهام ونريد الإضافة إليها، ربما من خلال إرسال نموذج، فإننا نستخدم طلبات 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 عبارة عن حزمة خارجية يجب علينا تثبيتها في مشروعنا قبل استخدامها.

الاختيار بين هذه الأمر متروك لك. تعد واجهة Fetch API أكثر تفصيلاً ولا تعمل مع الطلبات غير المتزامنة، لكن Axios عبارة عن تبعية خارجية. ومع ذلك، يفضل الكثيرون العمل مع Axios بدلاً من Fetch API. سوف نغطي كلا الأمرين.

كلتا الطريقتين لهما مزايا وعيوب، ولكن من المهم ملاحظة أن بإمكانهما التعامل مع أفعال HTTP القياسية – POST, GET, PUT, PATCH, DELETE.

في مثالنا، سنعمل على قائمة بالمشاركات التي جلبناها بالفعل من واجهة برمجة تطبيقات وهمية. سنقوم بإنشاء نموذج يأخذ عنوان ونص المنشور الجديد، وبمجرد إرساله، نرسل طلب 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 مثل 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، أضفنا عنوان URL كمعلمة إلزامية أولى، والمعلمة الثانية تأخذ طريقة الطلب (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 ونستخدم بدلاً من ذلك 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 معلمتين. أحدهما هو عنوان URL، بينما يحتوي الثاني على خيارات مثل طريقة الطلب (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. لقد رأينا أيضًا كيف يمكن القيام بذلك في كل من المكونات الوظيفية والفئوية، لذلك يمكن أن تخدمنا هذه المقالة بغض النظر عما يتم استخدامه في مشروعنا.