ভূমিকা
ওয়েব অ্যাপ্লিকেশন বিকাশ করার সময় - আমরা নিয়মিতভাবে একটি সার্ভারে হোস্ট করা সংস্থানগুলি অ্যাক্সেস করি। সম্পদের জন্য জিজ্ঞাসা করা, পাঠানো বা অন্যান্য ক্রিয়াকলাপ সম্পাদন করা HTTP অনুরোধের মাধ্যমে সম্পন্ন হয়। এই অনুরোধগুলি ক্লায়েন্ট থেকে একটি সার্ভারের হোস্টে পাঠানো হয়। HTTP অনুরোধ করার সময়, ক্লায়েন্ট নিয়োগ করে a ইউআরএল (ইউনিফর্ম রিসোর্স লোকেটার) এবং একটি পেলোড যা সার্ভার সংস্থানগুলি অ্যাক্সেস করার জন্য প্রয়োজনীয় তথ্য ধারণ করে।
পাঁচটি সাধারণ HTTP অনুরোধ পদ্ধতি হল GET, PUT, POST, PATCH, এবং DELETE. এই পদ্ধতিগুলি আমাদেরকে স্ট্যান্ডার্ড CRUD অপারেশন করতে দেয়।
এই নিবন্ধে, আমরা শিখব কিভাবে Axios বা Fetch API ব্যবহার করে রিঅ্যাক্টে একটি GET HTTP অনুরোধ করা যায়, সেইসাথে ক্লাস এবং কার্যকরী উভয় উপাদানেই কীভাবে তা করা যায়।
GET অনুরোধ কি?
GET একটি HTTP অনুরোধ পদ্ধতি যা সার্ভার থেকে সম্পদ পেতে ব্যবহৃত হয়।
Axios এবং এপিআই আনুন HTTP অনুরোধ করার জন্য দুটি প্রধান পদ্ধতি।
- ফেচ এপিআই হল একটি বিল্ট-ইন প্রতিশ্রুতি-ভিত্তিক জাভাস্ক্রিপ্ট মডিউল যা একটি সার্ভার বা এপিআই এন্ডপয়েন্ট থেকে সম্পদ পুনরুদ্ধার করার জন্য।
- Axios হল একটি প্রতিশ্রুতি-ভিত্তিক HTTP ক্লায়েন্ট লাইব্রেরি যা REST এন্ডপয়েন্টগুলিতে অ্যাসিঙ্ক্রোনাস HTTP অনুরোধগুলি প্রেরণ করা সহজ করে তোলে। এটি একটি বহিরাগত লাইব্রেরি যা ইনস্টল করা আবশ্যক।
এই প্রবন্ধে, আমরা দেখব কিভাবে Fetch API এবং Axios পদ্ধতি ব্যবহার করে রিঅ্যাক্ট ফাংশনাল কম্পোনেন্টে GET রিকোয়েস্ট সঞ্চালন করা যায় এবং তারপর ক্লাস-ভিত্তিক কম্পোনেন্টে কীভাবে একই কাজ করা যায়।
প্রতিক্রিয়ার কার্যকরী উপাদানগুলিতে কীভাবে HTTP অনুরোধটি সম্পাদন করবেন
একটি কার্যকরী উপাদান তৈরি করা হয় যখন একটি JavaScript ফাংশন (হয় স্বাভাবিক বা ES6) একটি প্রতিক্রিয়া উপাদান (JSX) প্রদান করে। কার্যকরী উপাদানগুলির সাথে কাজ করার সময় আমরা প্রতিক্রিয়া হুক ব্যবহার করি, যা GET অনুরোধগুলি সম্পাদন করার সময় অত্যন্ত গুরুত্বপূর্ণ।
আমরা এটি ব্যবহার করব useState() এবং useEffect() হুক কারন useEffect() অ্যাপটি মাউন্ট করার সাথে সাথে হুক রেন্ডার হয় আমরা সর্বদা এটির মধ্যে GET অনুরোধগুলি সম্পাদন করি এবং আমরা ব্যবহার করি useState() আমাদের ডেটা/প্রতিক্রিয়া সংরক্ষণ করার জন্য হুক।
ফেচ এপিআই সহ প্রতিক্রিয়ার কার্যকরী উপাদানে কীভাবে GET HTTP অনুরোধ সম্পাদন করবেন
সার্জারির fetch() পদ্ধতি একটি বাধ্যতামূলক যুক্তি গ্রহণ করে - আমরা যে সংস্থানটি আনতে চাই তার URL, সেইসাথে একটি ঐচ্ছিক যুক্তি যা অনুরোধের পদ্ধতি নির্দেশ করে। ঐ ঐচ্ছিক আর্গুমেন্টের ডিফল্ট মান হল GET, তাই একটি GET অনুরোধ করার সময় এটি সেট করার প্রয়োজন নেই।
তারপর ফেচ API এ রিটার্ন করে Promise, তাই আমরা ব্যবহার করতে পারেন then() এবং catch() সাফল্য বা ব্যর্থতা পরিচালনা করার পদ্ধতি:
import { useState, useEffect } from 'react';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
return (
);
};
এটি একটি স্ট্যান্ডার্ড GET অনুরোধের মত দেখায়। এখন, এখন পর্যন্ত আমরা যা করেছি তা পচন করা যাক যাতে আপনি উপরের কোডটি আরও ভালভাবে বুঝতে পারেন। প্রথমত, আমরা যে সমস্ত সংস্থান/পোস্টগুলি থেকে আনব সেগুলি ধরে রাখার জন্য আমরা একটি রাষ্ট্র তৈরি করেছি posts এপিআই:
const [posts, setPosts] = useState([]);
তারপর আমরা ব্যবহার করেছি useEffect() হুক করুন এবং এতে আমাদের GET অনুরোধটি লিখুন যাতে অ্যাপ্লিকেশনটি মাউন্ট হওয়ার সাথে সাথে অনুরোধটি ট্রিগার হয়:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
এর পরে, আমরা একটি আনার অনুরোধ তৈরি করেছি৷ useEffect() হুক এবং পাস করা URL আমরা সার্ভার অ্যাক্সেস করতে ব্যবহার করতে পারি। যেহেতু এটি একটি প্রতিশ্রুতি প্রদান করে, আমরা ব্যবহার করেছি then() পদ্ধতি যেহেতু এই পদ্ধতিটি JSON এর পরিবর্তে একটি প্রতিক্রিয়া বস্তু প্রদান করে, আমরা প্রথমে ডেটাটিকে JSON ফর্ম্যাটে রূপান্তর করেছি:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
}, []);
তারপরে আমরা পোস্ট/ডেটা পেতে এগিয়ে যাই এবং সেগুলিকে আমরা আগে তৈরি করা অবস্থায় সংরক্ষণ করি:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
}
}, []);
অবশেষে আমরা ব্যবহার করি catch() ত্রুটি পরিচালনা করার পদ্ধতি:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
আমরা ইতিমধ্যে একটি GET অনুরোধ করেছি এবং আমাদের তৈরি করা রাজ্যে আমাদের ডেটা সংরক্ষণ করেছি। এখন আমরা আমাদের প্রতিক্রিয়া অ্যাপ্লিকেশনের মধ্যে ডেটা ব্যবহার করতে পারি।
অ্যাক্সিওসের সাথে প্রতিক্রিয়ার কার্যকরী উপাদানে GET HTTP অনুরোধ কীভাবে সম্পাদন করবেন
Fetch API ছাড়াও, আমরা GET অনুরোধ পাঠাতে Axios ব্যবহার করতে পারি। Axios একটি প্রতিশ্রুতি-ভিত্তিক HTTP ক্লায়েন্ট লাইব্রেরি যা REST এন্ডপয়েন্টগুলিতে অ্যাসিঙ্ক্রোনাস HTTP অনুরোধগুলি প্রেরণ করা সহজ করে তোলে।
যদি আমরা Axios ব্যবহার করতে চাই, যা একটি বাহ্যিক লাইব্রেরি, আমাদের প্রথমে আমাদের প্রকল্পের ডিরেক্টরিতে নিম্নলিখিত কমান্ডটি চালিয়ে আমাদের প্রকল্পে এটি ইনস্টল করতে হবে:
$ npm install axios
একবার আমরা সফলভাবে Axios ইনস্টল করার পরে, আমরা আমাদের GET অনুরোধ সম্পাদন করতে এগিয়ে যেতে পারি:
import { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
return (
);
};
সেরা-অভ্যাস, শিল্প-স্বীকৃত মান এবং অন্তর্ভুক্ত চিট শীট সহ গিট শেখার জন্য আমাদের হ্যান্ডস-অন, ব্যবহারিক গাইড দেখুন। গুগলিং গিট কমান্ড এবং আসলে বন্ধ করুন শেখা এটা!
এটি ফেচ এপিআই এর চেয়ে অনেক বেশি পরিষ্কার দেখাচ্ছে! উপরের কোডটি দেখে, আমরা Axios আমদানি করে শুরু করেছি যেহেতু এটি একটি বহিরাগত লাইব্রেরি যা আমরা ইনস্টল করেছি:
import axios from 'axios';
আমরা তারপর মধ্যে GET অনুরোধ সঞ্চালিত useEffect() আমরা ফেচ এপিআই এর জন্য হুক করেছি, কিন্তু এইবার সিনট্যাক্স একটু ভিন্ন:
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
ফেচ API পদ্ধতির বিপরীতে, পদ্ধতিটি ঘোষণা করার জন্য কোন বিকল্পের প্রয়োজন নেই। আমরা কেবল পদ্ধতিটিকে উদাহরণের সাথে সংযুক্ত করি এবং এটিকে জিজ্ঞাসা করি, এছাড়াও ডেটা রূপান্তর করার দরকার নেই কারণ এটি এটিকে JSON হিসাবে ফেরত দেয়।
প্রতিক্রিয়ার ক্লাস কম্পোনেন্টে কীভাবে HTTP অনুরোধটি সম্পাদন করবেন
একটি ক্লাস কম্পোনেন্ট হল একটি ES6 ক্লাস যা JSX প্রদান করে এবং ব্যবহার করার জন্য React এক্সটেনশন প্রয়োজন। হুক প্রবর্তনের আগে, এটি ছিল সবচেয়ে বেশি ব্যবহৃত পদ্ধতি (অর্থাৎ আগের সংস্করণ 16.8) কারণ কার্যকরী উপাদানের মধ্যে রাষ্ট্র ব্যবহার করা যেত না।
হুকের প্রাপ্যতা সত্ত্বেও, অনেক লোক ক্লাসের উপাদানগুলি ব্যবহার করে চলেছে। চলুন আমরা কিভাবে ব্যবহার করতে পারেন তাকান constructor() পদ্ধতির রাষ্ট্রীয় সম্পত্তি, এবং ComponentDidMount() লাইফসাইকেল পদ্ধতি ক্লাস কম্পোনেন্টগুলির সাথে প্রতিক্রিয়াতে GET HTTP অনুরোধগুলি সম্পাদন করতে।
ফেচ এপিআই দিয়ে প্রতিক্রিয়ার ক্লাসের উপাদানগুলিতে কীভাবে HTTP অনুরোধটি সম্পাদন করবেন
এটা আমরা কিভাবে সঞ্চালিত খুব অনুরূপ GET কার্যকরী উপাদানে অনুরোধ। পার্থক্য শুধু এই যে আমরা এখন রাষ্ট্রীয় সম্পত্তি ব্যবহার করব constructor() পদ্ধতির পরিবর্তে useState() হুক এছাড়াও, আমরা আমাদের পরিচালনা করব GET মধ্যে অনুরোধ ComponentDidMount() জীবনচক্র বরং useEffect() হুক, যাতে আমাদের অ্যাপ মাউন্ট হয়ে গেলে এই অনুরোধটি ট্রিগার হয়:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
render() {
const { posts } = this.state;
return (
);
}
}
উপরের কোডে, আমরা আমাদের সার্ভার/এপিআই থেকে যে রিসোর্স/ডেটা পাব তা সঞ্চয় করতে একটি অবজেক্টের স্টেট আরম্ভ করার জন্য কনস্ট্রাক্টর পদ্ধতি ব্যবহার করেছি:
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
আমরা তারপর আমাদের GET অনুরোধ সঞ্চালিত componentDidMount() লাইফ সাইকেল পদ্ধতি যাতে অ্যাপটি মাউন্ট হয়ে গেলে এটি ট্রিগার হয়:
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
state একটি বস্তু যা অনেক রাজ্য ধারণ করে, আমরা এটি পেতে প্রথমে ধ্বংস করি posts রাষ্ট্র, যা পরে ব্যবহার করা যেতে পারে:
render() {
const { posts } = this.state;
return (
);
}
অ্যাক্সিওসের সাথে প্রতিক্রিয়ার ক্লাসের উপাদানগুলিতে কীভাবে HTTP অনুরোধটি সম্পাদন করবেন
আমরা কার্যকরী উপাদানের সাথে দেখেছি, আমরা পাঠাতে পারি GET Axios এর সাথে অনুরোধ। যা বাকি আছে তা কার্যকর করা GET মধ্যে অনুরোধ ComponentDidMount() জীবনচক্র এবং Axios আমদানি করতে:
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
this.setState({ posts: response.data });
})
.catch((error) => {
console.log(error);
});
}
render() {
const { posts } = this.state;
return (
);
}
}
উপসংহার
আমরা এই নিবন্ধে দুটি সর্বাধিক ব্যবহৃত পদ্ধতি - Fetch API এবং Axios ব্যবহার করে কার্যকরী এবং শ্রেণি উভয় উপাদানের সাথে কীভাবে GET HTTP অনুরোধগুলি সম্পাদন করতে হয় তা শিখেছি।
একটি নির্দিষ্ট পদ্ধতি ব্যবহার করা সম্পূর্ণরূপে আপনার উপর নির্ভর করে।
