ری ایکٹ میں HTTP درخواست پوسٹ کریں۔

تعارف

APIs کے ساتھ کام کرتے وقت ہم اکثر ڈیٹا کو پروسیسنگ کے لیے سرور کو بھیجنا چاہتے ہیں۔ مثال کے طور پر، اگر ہمارے پاس کرنے کی فہرست ہے اور اس میں اضافہ کرنا چاہتے ہیں، شاید فارم جمع کرانے کے ذریعے، ہم پروسیسنگ اور ممکنہ مستقل مزاجی کے لیے پے لوڈ کے ساتھ درخواست بھیجنے کے لیے POST HTTP درخواستوں کا استعمال کرتے ہیں۔

اس مضمون میں، ہم سیکھیں گے کہ دو عام طریقوں کا استعمال کرتے ہوئے React میں POST HTTP درخواستوں کو انجام دینے کا طریقہ: Fetch API اور Axios۔ ہم یہ بھی جان لیں گے کہ اسے فنکشنل اور کلاس پر مبنی اجزاء میں کیسے کرنا ہے۔

Fetch API کا استعمال کرتے ہوئے، React کے ساتھ POST HTTP درخواست بھیجنا اتنا ہی آسان ہے جتنا:

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 درخواستوں کا استعمال ڈیٹا کو کسی اینڈ پوائنٹ پر پوسٹ کرنے کے لیے کیا جاتا ہے - جو پھر عام طور پر اس پر کارروائی کرتا ہے اور اسے ڈیٹا بیس میں محفوظ کرتا ہے۔ یہ ڈیٹا کسی فارم سے آ سکتا ہے، کسی شے میں محفوظ کیا جا سکتا ہے، یا کسی اور طریقے سے حاصل کیا جا سکتا ہے - لیکن یہ عام طور پر REST API کے استعمال کے لیے JSON نمائندگی میں تبدیل ہو جاتا ہے۔

کسی بھی فعل کے ساتھ HTTP درخواستیں بھیجنا آسان بنا دیا گیا ہے۔ API بازیافت کریں۔ (بلٹ ان) اور لائبریریاں جیسے Axios. Fetch API HTTP درخواستوں کو انجام دینے کے لیے ایک بلٹ ان براؤزر طریقہ ہے، جبکہ Axios ایک بیرونی پیکیج ہے جسے استعمال کرنے سے پہلے ہمیں اپنے پروجیکٹ میں انسٹال کرنا چاہیے۔

ان میں سے انتخاب آپ پر منحصر ہے۔ Fetch API زیادہ لفظی ہے اور غیر مطابقت پذیر درخواستوں کے ساتھ کام نہیں کرتا ہے، لیکن Axios ایک بیرونی انحصار ہے۔ اس کے باوجود - بہت سے لوگ Fetch API کے بجائے Axios کے ساتھ کام کرنے کو ترجیح دیتے ہیں۔ ہم دونوں کا احاطہ کریں گے۔

دونوں طریقوں کے فوائد اور نقصانات ہیں، لیکن یہ نوٹ کرنا ضروری ہے کہ وہ معیاری 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 درخواست کو کیسے انجام دیا جائے۔

اب ہم ری ایکٹ میں ہکس کے تعارف کی بدولت فنکشنل اجزاء میں HTTP درخواستیں انجام دے سکتے ہیں۔ پہلے، فنکشنل اجزاء صرف UI کو پیش کرنے کے لیے استعمال کیے جاتے تھے۔

ایک فنکشنل جزو اس وقت بنتا ہے جب JavaScript فنکشن (یا تو معیاری یا ES6) ایک React عنصر (JSX) لوٹاتا ہے۔

کلاس پر مبنی اجزاء کی طرح کنسٹرکٹر کے طریقہ کار میں اسٹیٹ آبجیکٹ کو استعمال کرنے کے بجائے، اب ہم React ہکس استعمال کرتے ہیں جیسے useState() اپنے ڈیٹا کو اصل ڈیٹا میں منتقل کرنے سے پہلے ذخیرہ کرنے کے لیے۔

Fetch API کے ساتھ React کے فنکشنل اجزاء میں POST HTTP درخواست کو کیسے انجام دیں۔

کیونکہ Fetch API ایک بلٹ ان براؤزر طریقہ ہے جو واپس کرتا ہے a Promise، ہم استعمال کرتے ہیں .then() اور .catch() کامیابی اور ناکامی سے نمٹنے کے طریقے۔ یہ ایک لازمی دلیل کو بھی قبول کرتا ہے، جو کہ وسائل/API کا URL ہے جس میں ہم ڈیٹا پوسٹ کرنا چاہتے ہیں، ساتھ ہی 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() کال کریں، ہم نے URL کو پہلے لازمی پیرامیٹر کے طور پر شامل کیا، اور دوسرا پیرامیٹر درخواست کے طریقہ کار (POST) میں لیتا ہے، body، اور header:

• body - اس میں وہ ڈیٹا ہوتا ہے جسے ہم API اینڈ پوائنٹ پر بھیجنا چاہتے ہیں، جو ہمیں لازمی ہے۔ stringify، اسے متن پر مبنی 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',
      },
   })
};

آخر میں، کیونکہ یہ طریقہ واپس آتا ہے a 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);
      });
};

Axios کے ساتھ React کے فنکشنل اجزاء میں POST HTTP درخواست کو کیسے انجام دیا جائے۔

ہم نے پچھلے سیکشن میں Fetch API کے ساتھ POST درخواستوں کو انجام دینے کا طریقہ بتایا۔ اب، آئیے ترمیم کرتے ہیں۔ handleSubmit() طریقہ اور اس کے بجائے Axios کے ساتھ POST درخواستیں انجام دیں۔

Axios ایک HTTP کلائنٹ لائبریری ہے جو بھیجنا آسان بنانے کے لیے وعدوں کا استعمال کرتی ہے۔ غیر مطابقت پذیر HTTP درخواستیں۔ ریسٹ اینڈ پوائنٹس تک۔ چونکہ یہ ایک بیرونی لائبریری ہے، ہمیں پہلے اپنے پروجیکٹ کی ڈائرکٹری میں درج ذیل کمانڈ کو چلا کر اسے اپنے پروجیکٹ میں انسٹال کرنا ہوگا۔

$ 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 درخواست کو کیسے انجام دیا جائے۔

کلاس اجزاء میں POST کی درخواستوں کو فنکشنل اجزاء کی نسبت مختلف طریقے سے ہینڈل کیا جاتا ہے کیونکہ ہم اب React ہکس کا استعمال نہیں کرتے ہیں اور اس کے بجائے state اعتراض

کلاس کا جزو ایک ES6 کلاس ہے جو JSX لوٹاتا ہے اور اسے React ایکسٹینشنز کی ضرورت ہوتی ہے۔

Fetch API کے ساتھ React کے کلاس اجزاء میں POST HTTP درخواست کو کیسے انجام دیا جائے۔

درخواست فنکشنل اجزاء سے بہت ملتی جلتی ہے۔ اعداد و شمار کو ذخیرہ کرنے کے دوران ہمیں صرف کچھ فرق نظر آئیں گے۔ 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 درخواست میں کوئی غلطی یا ناکامی ہو تو صورتحال کو سنبھالنے کا طریقہ۔

Axios کے ساتھ React کے کلاس اجزاء میں POST HTTP درخواست کو کیسے انجام دیا جائے۔

ہم نے دیکھا ہے کہ کس طرح پرفارم کرنا ہے۔ POST کلاس پر مبنی اجزاء میں HTTP درخواستیں۔ یہ Axios سے بہت ملتا جلتا ہے، کیونکہ ہمیں صرف Axios کو انسٹال کرنا ہے اور پھر اسے تبدیل کرنا ہے۔ handleSubmit() طریقہ، لہذا اب ہم Fetch API کے بجائے Axios استعمال کرتے ہیں:

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));
};

نتیجہ

اس گائیڈ میں، ہم نے سیکھا کہ POST HTTP درخواستوں کو انجام دینے کے لیے React میں دو بنیادی طریقے کیسے استعمال کیے جائیں۔ ہم نے یہ بھی دیکھا کہ انہیں فنکشنل اور کلاس پر مبنی دونوں اجزاء میں کیسے کیا جا سکتا ہے، لہذا یہ مضمون ہماری خدمت کر سکتا ہے قطع نظر اس کے کہ ہمارے پروجیکٹ میں کیا استعمال کیا گیا ہے۔