प्रतिक्रिया में HTTP अनुरोध पोस्ट करें

परिचय

एपीआई के साथ काम करते समय हम अक्सर प्रोसेसिंग के लिए सर्वर को डेटा भेजना चाहते हैं। उदाहरण के लिए, यदि हमारे पास काम की सूची है और उसमें जोड़ना चाहते हैं, तो शायद एक फॉर्म सबमिशन के माध्यम से, हम प्रोसेसिंग और संभावित दृढ़ता के लिए पेलोड के साथ अनुरोध भेजने के लिए POST HTTP अनुरोधों का उपयोग करते हैं।

इस लेख में, हम सीखेंगे कि रिएक्ट में 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);
  })

यदि आप इन तरीकों के बारे में और उनके काम करने के तरीके के बारे में अधिक जानना चाहते हैं - तो कृपया बाकी गाइड पढ़ें!

एक पोस्ट HTTP अनुरोध क्या है?

जैसा कि नाम से ही स्पष्ट है, POST अनुरोधों का उपयोग डेटा को एक समापन बिंदु पर पोस्ट करने के लिए किया जाता है - जो तब आमतौर पर इसे संसाधित करता है और इसे डेटाबेस में सहेजता है। यह डेटा एक फॉर्म से आ सकता है, किसी ऑब्जेक्ट में सहेजा जा सकता है, या किसी अन्य तरीके से प्राप्त किया जा सकता है - लेकिन इसे आम तौर पर उपभोग करने के लिए आरईएसटी एपीआई के लिए जेएसओएन प्रतिनिधित्व में परिवर्तित किया जाता है।

किसी भी क्रिया के साथ HTTP अनुरोध भेजना द्वारा सरल बना दिया गया है एपीआई लायें (अंतर्निहित) और पुस्तकालय जैसे Axios. Fetch API HTTP अनुरोधों को निष्पादित करने के लिए एक अंतर्निहित ब्राउज़र विधि है, जबकि Axios एक बाहरी पैकेज है जिसे उपयोग करने से पहले हमें अपने प्रोजेक्ट में स्थापित करना होगा।

इनमें से चुनना आप पर निर्भर है। Fetch API अधिक वर्बोज़ है और एसिंक्रोनस अनुरोधों के साथ काम नहीं करता है, लेकिन Axios एक बाहरी निर्भरता है। फिर भी - कई लोग Fetch API के बजाय Axios के साथ काम करना पसंद करते हैं। हम दोनों को कवर करेंगे।

दोनों विधियों के फायदे और नुकसान हैं, लेकिन यह ध्यान रखना महत्वपूर्ण है कि वे मानक 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 अनुरोध कैसे करें

अब हम रिएक्ट में हुक की शुरूआत के कारण कार्यात्मक घटकों में HTTP अनुरोध कर सकते हैं। पहले, कार्यात्मक घटकों का उपयोग केवल UI प्रदान करने के लिए किया जाता था।

एक कार्यात्मक घटक तब बनाया जाता है जब एक जावास्क्रिप्ट फ़ंक्शन (या तो मानक या ES6) एक प्रतिक्रिया तत्व (JSX) देता है।

क्लास-आधारित घटकों के साथ कंस्ट्रक्टर विधि में स्टेट ऑब्जेक्ट का उपयोग करने के बजाय, अब हम रिएक्ट हुक का उपयोग करते हैं जैसे कि useState() हमारे डेटा को मूल डेटा में पास करने से पहले स्टोर करने के लिए।

फ़ेच एपीआई के साथ प्रतिक्रिया के कार्यात्मक घटक में पोस्ट HTTP अनुरोध कैसे करें?

क्योंकि Fetch API एक अंतर्निहित ब्राउज़र विधि है जो a Promise, हम उपयोग करते हैं .then() और .catch() सफलता और असफलता को संभालने के तरीके। यह एक अनिवार्य तर्क को भी स्वीकार करता है, जो उस संसाधन/एपीआई का 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 - इसमें वह डेटा होता है जिसे हम एपीआई एंडपॉइंट पर भेजना चाहते हैं, जो हमें अवश्य करना चाहिए कड़ा करना, इसे टेक्स्ट-आधारित 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 के साथ प्रतिक्रिया के कार्यात्मक घटक में 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 अनुरोधों को कार्यात्मक घटकों की तुलना में अलग तरह से संभाला जाता है क्योंकि हम अब रिएक्ट हुक का उपयोग नहीं करते हैं और इसके बजाय इसका उपयोग करते हैं state वस्तु।

एक वर्ग घटक एक ES6 वर्ग है जो JSX लौटाता है और इसके लिए रिएक्ट एक्सटेंशन की आवश्यकता होती है।

फ़ेच एपीआई के साथ रिएक्ट के क्लास कंपोनेंट में 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 के साथ रिएक्ट के क्लास कंपोनेंट में 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 अनुरोधों को करने के लिए रिएक्ट में दो प्राथमिक विधियों का उपयोग कैसे करें। हमने यह भी देखा कि उन्हें कार्यात्मक और वर्ग-आधारित दोनों घटकों में कैसे किया जा सकता है, इसलिए यह लेख हमारी सेवा कर सकता है, भले ही हमारी परियोजना में क्या उपयोग किया गया हो।