প্রতিক্রিয়াতে HTTP অনুরোধ পোস্ট করুন

ভূমিকা

API-এর সাথে কাজ করার সময় আমরা প্রায়ই প্রক্রিয়াকরণের জন্য সার্ভারে ডেটা পাঠাতে চাই। উদাহরণস্বরূপ, যদি আমাদের কাছে করণীয়গুলির একটি তালিকা থাকে এবং এটিতে যোগ করতে চান, সম্ভবত একটি ফর্ম জমা দেওয়ার মাধ্যমে, আমরা প্রক্রিয়াকরণ এবং সম্ভাব্য অধ্যবসায়ের জন্য একটি পেলোড সহ একটি অনুরোধ পাঠাতে POST HTTP অনুরোধগুলি ব্যবহার করি৷

এই নিবন্ধে, আমরা শিখব কীভাবে প্রতিক্রিয়াতে পোস্ট HTTP অনুরোধগুলি দুটি সাধারণ পদ্ধতি ব্যবহার করে সম্পাদন করা যায়: ফেচ API এবং Axios৷ কার্যকরী এবং শ্রেণী-ভিত্তিক উপাদানগুলিতে কীভাবে এটি করা যায় তাও আমরা জানতে পারব।

Fetch API ব্যবহার করে, প্রতিক্রিয়া সহ একটি 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 অনুরোধগুলি একটি এন্ডপয়েন্টে ডেটা পোস্ট করতে ব্যবহৃত হয় - যা সাধারণত এটিকে প্রক্রিয়া করে এবং একটি ডাটাবেসে সংরক্ষণ করে। এই ডেটা একটি ফর্ম থেকে আসতে পারে, একটি বস্তুতে সংরক্ষণ করা যেতে পারে, বা অন্য উপায়ে প্রাপ্ত করা যেতে পারে - তবে এটি সাধারণত REST API-এর জন্য একটি JSON উপস্থাপনায় রূপান্তরিত হয়।

যেকোন ক্রিয়াপদের সাথে HTTP অনুরোধ পাঠানোর মাধ্যমে সহজ করা হয় এপিআই আনুন (বিল্ট-ইন) এবং লাইব্রেরি যেমন Axios. ফেচ API হল HTTP অনুরোধগুলি সম্পাদন করার জন্য একটি অন্তর্নির্মিত ব্রাউজার পদ্ধতি, যেখানে Axios হল একটি বাহ্যিক প্যাকেজ যা ব্যবহার করার আগে আমাদের অবশ্যই আমাদের প্রকল্পে ইনস্টল করতে হবে।

এইগুলির মধ্যে নির্বাচন করা আপনার উপর নির্ভর করে। ফেচ এপিআই আরও ভার্বোস এবং অ্যাসিঙ্ক্রোনাস অনুরোধের সাথে কাজ করে না, তবে 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;

এখন ফর্মটিকে কার্যকরী করা যাক যাতে ফর্ম জমা দেওয়ার পরে আমরা আমাদের ওয়েবসাইটে পোস্টের তালিকায় ডেটা যোগ করতে পারি।

প্রতিক্রিয়ার কার্যকরী উপাদানে পোস্ট HTTP অনুরোধ কীভাবে সম্পাদন করবেন

প্রতিক্রিয়ায় হুক প্রবর্তনের জন্য আমরা এখন কার্যকরী উপাদানগুলিতে HTTP অনুরোধগুলি সম্পাদন করতে পারি। পূর্বে, কার্যকরী উপাদানগুলি শুধুমাত্র UI রেন্ডার করার জন্য ব্যবহৃত হত।

একটি কার্যকরী উপাদান তৈরি করা হয় যখন একটি JavaScript ফাংশন (হয় স্ট্যান্ডার্ড বা ES6) একটি প্রতিক্রিয়া উপাদান (JSX) প্রদান করে।

ক্লাস-ভিত্তিক উপাদানগুলির মতো কনস্ট্রাক্টর পদ্ধতিতে স্টেট অবজেক্ট ব্যবহার করার পরিবর্তে, আমরা এখন রিঅ্যাক্ট হুক ব্যবহার করি যেমন useState() মূল ডেটাতে পাঠানোর আগে আমাদের ডেটা সংরক্ষণ করতে।

ফেচ এপিআই সহ প্রতিক্রিয়ার কার্যকরী উপাদানে পোস্ট HTTP অনুরোধ কীভাবে সম্পাদন করবেন

কারণ ফেচ এপিআই একটি বিল্ট-ইন ব্রাউজার পদ্ধতি যা একটি রিটার্ন করে Promise, আমরা ব্যবহার করি .then() এবং .catch() সাফল্য এবং ব্যর্থতা পরিচালনা করার পদ্ধতি। এটি একটি বাধ্যতামূলক আর্গুমেন্টও গ্রহণ করে, যেটি সেই রিসোর্স/এপিআই-এর ইউআরএল যেখানে আমরা ডেটা পোস্ট করতে চাই, সেইসাথে 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',
      },
   })
};

অবশেষে, কারণ এই পদ্ধতিটি একটি রিটার্ন করে 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);
      });
};

অ্যাক্সিওসের সাথে প্রতিক্রিয়ার কার্যকরী উপাদানে পোস্ট HTTP অনুরোধ কীভাবে সম্পাদন করবেন

আমরা পূর্ববর্তী বিভাগে ফেচ API-এর সাথে POST অনুরোধগুলি কীভাবে সম্পাদন করতে হয় তা ব্যাখ্যা করেছি। এখন, এর পরিবর্তন করা যাক handleSubmit() পদ্ধতি এবং পরিবর্তে Axios এর সাথে POST অনুরোধগুলি সম্পাদন করুন৷

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

উপরের কোডের দিকে তাকালে, এটি অনেক সহজ এবং ফেচ API এর চেয়ে কম সিনট্যাক্সের প্রয়োজন, কারণ আমাদের আর JSON-এ রূপান্তর করতে, হেডারগুলির সাথে কাজ করতে এবং এমনকি আমাদের ডেটা স্ট্রিংফাই করার প্রয়োজন নেই৷ এই বয়লারপ্লেটটি Axios দ্বারা বিমূর্ত করা হয়েছে।

প্রতিক্রিয়ার ক্লাস কম্পোনেন্টে পোস্ট HTTP অনুরোধ কীভাবে সম্পাদন করবেন

ক্লাসের উপাদানগুলিতে POST অনুরোধগুলি কার্যকরী উপাদানগুলির চেয়ে আলাদাভাবে পরিচালনা করা হয় কারণ আমরা আর প্রতিক্রিয়া হুক ব্যবহার করি না এবং পরিবর্তে ব্যবহার করি state অবজেক্ট।

একটি ক্লাস কম্পোনেন্ট হল একটি ES6 ক্লাস যা JSX প্রদান করে এবং এর জন্য React এক্সটেনশন প্রয়োজন।

ফেচ এপিআই সহ প্রতিক্রিয়ার ক্লাস কম্পোনেন্টে পোস্ট 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 দুটি পরামিতি নেয়। একটি হল 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 অনুরোধে কোনো ত্রুটি বা ব্যর্থতা থাকলে পরিস্থিতি পরিচালনা করার পদ্ধতি।

অ্যাক্সিওসের সাথে প্রতিক্রিয়ার ক্লাস কম্পোনেন্টে পোস্ট HTTP অনুরোধ কীভাবে সম্পাদন করবেন

আমরা দেখেছি কিভাবে পারফর্ম করতে হয় POST ক্লাস-ভিত্তিক উপাদানগুলিতে HTTP অনুরোধ। এটি Axios-এর মতোই, কারণ আমাদের যা করতে হবে তা হল Axios ইনস্টল করা এবং তারপরে প্রতিস্থাপন করা handleSubmit() পদ্ধতি, তাই আমরা এখন ফেচ 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 অনুরোধগুলি সম্পাদন করতে প্রতিক্রিয়াতে দুটি প্রাথমিক পদ্ধতি ব্যবহার করতে হয়। আমরা এটিও দেখেছি যে কীভাবে তারা কার্যকরী এবং শ্রেণী-ভিত্তিক উভয় উপাদানেই করা যেতে পারে, তাই আমাদের প্রকল্পে যা ব্যবহার করা হোক না কেন এই নিবন্ধটি আমাদের পরিবেশন করতে পারে।