প্রতিক্রিয়া নেটিভ একটি সার্ভার থেকে তথ্য লোড কিভাবে?

সার্ভার থেকে ডেটা লোড করতে আপনি আনয়ন API ব্যবহার করতে পারেন যা XMLHttpRequest এর মত অথবা অন্য কোনো নেটওয়ার্কিং এপিআই।

ফেচ ব্যবহার করে সার্ভারে অনুরোধ করা খুবই সহজ। নিচের কোডটি দেখুন -

আনয়ন('https://jsonplaceholder.typicode.com/posts/1') .then((response) => response.json()). তারপর((responseJson) => console.log(responseJson));

উপরের কোডে আমরা JSON ফাইলটি নিয়ে আসছি https://jsonplaceholder.typicode.com/posts/1 এবং ডেটা প্রিন্ট করছি কনসোলে। ফেচ() API-এর জন্য সবচেয়ে সহজ কলটি একটি আর্গুমেন্ট নেয় অর্থাৎ আপনি যে পথটি আনতে চান এবং এটি প্রতিক্রিয়া সহ একটি প্রতিশ্রুতি প্রদান করে৷

fetch api HTTP প্রতিক্রিয়া সহ একটি প্রতিশ্রুতি প্রদান করে, প্রতিক্রিয়া থেকে JSON বডি পেতে আমাদের json() পদ্ধতি ব্যবহার করতে হবে।

ফেচ এপিআই-এর দ্বিতীয় প্যারাম হল একটি অবজেক্ট যার পদ্ধতি থাকতে পারে যেমন (GET, POST), হেডার, আপনি যে ডেটা পোস্ট করতে চান ইত্যাদি।

এখানে একটি কার্যকরী উদাহরণ রয়েছে যা দেখায় কিভাবে সার্ভার থেকে ডেটা পেতে হয় এবং ব্যবহারকারীর কাছে প্রদর্শন করতে হয়৷

উদাহরণ:ফেচ API ব্যবহার করে ডেটা পান

নীচে দেখানো হিসাবে ডেটা শুরুতে খালি করার জন্য শুরু করা হয় -

state ={ data:''}

componentDidMount()

কম্পোনেন্টডিডমাউন্ট() ফাংশনের ভিতরে ফেচ এপিআই বলা হয়। componentDidMount() একটি কম্পোনেন্ট মাউন্ট করার সাথে সাথেই কল করা হয় অর্থাৎ পৃষ্ঠায় সমস্ত উপাদান রেন্ডার হওয়ার পরে।

এখানে একই −

componentDidMount =() => { fetch('https://jsonplaceholder.typicode.com/posts/1', { পদ্ধতি:'GET' }). তারপর((response) => response.json()) তারপর((responseJson) => { console.log(responseJson); this.setState({ data:responseJson }) }) .catch((error) => { console.error(error); });} 

 ইউআরএল থেকে ডেটা:https://jsonplaceholder.typicode.com/posts/1 নিম্নরূপ -
 
{ "userId":1, "id":1, "title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body":"quia et suscipit\nsuscipit recusande ফলাফল expedita et cum\nreprehenderit molesia ut ut quas Totam\nনোস্ট্রম রিরাম ইস্ট অটেম সুনট রেম ইভেনিয়েট আর্কিটেক্ট"
 

 আমরা মূল অংশের ভিতরে পাঠ্য প্রদর্শন করতে আগ্রহী।
 

 ডেটা ভেরিয়েবল সেটস্টেট পদ্ধতি ব্যবহার করে আপডেট করা হয়েছে যেমন নীচে দেখানো হয়েছে −
 
this.setState({ data:responseJson})
 

 সুতরাং এখন this.state.data.body সার্ভার থেকে ডেটা রয়েছে যা ব্যবহারকারীকে নীচে দেখানো হিসাবে প্রদর্শন করতে ব্যবহার করা যেতে পারে -
 
render() { ফেরত (   {this.state.data.body}   )}
 

 ফেচ Api −
 ব্যবহার করে সার্ভার থেকে ডেটা পাওয়ার জন্য এখানে কার্যকরী কোড রয়েছে 
প্রতিক্রিয়া আমদানি করুন, { কম্পোনেন্ট } "react" থেকে; import { Text, View } থেকে "react-native"; ক্লাস HttpExample কম্পোনেন্ট { state ={ data:'' } componentDidMount =() => { fetch(' https://jsonplaceholder.typicode.com/posts/1', { পদ্ধতি:'GET' }) .then((response) => response.json()). তারপর((responseJson) => { console.log( responseJson); this.setState({ data:responseJson }) }).catch((error) => { console.error(error); });}render() { return (   {এটি। state.data.body}   ) }}const অ্যাপ =() => { রিটার্ন (  )}ডিফল্ট অ্যাপ রপ্তানি করুন
 
আউটপুট