React Native এ ডেটা ফেচিং এবং API Integration

React Native এ ডেটা ফেচিং এবং API ইন্টিগ্রেশন একটি অ্যাপ্লিকেশনের গুরুত্বপূর্ণ অংশ, বিশেষ করে যখন আপনার অ্যাপের ব্যবহারকারীদের বিভিন্ন ধরনের তথ্য বা সার্ভার-ভিত্তিক ডেটা দেখানোর প্রয়োজন হয়। API ইন্টিগ্রেশন এবং ডেটা ফেচিং ব্যবহারের মাধ্যমে আপনি সহজেই রিমোট ডেটা অ্যাক্সেস করতে এবং সেটি অ্যাপ্লিকেশন এর UI তে প্রদর্শন করতে পারেন।

React Native এ API ইন্টিগ্রেশন এবং ডেটা ফেচিং করার জন্য বেশ কিছু পদ্ধতি রয়েছে, এর মধ্যে সবচেয়ে জনপ্রিয় হলো Fetch API এবং Axios।

১. Fetch API ব্যবহার করে ডেটা ফেচিং

React Native এ Fetch API ব্যবহার করে ডেটা ফেচ করা খুবই সাধারণ একটি পদ্ধতি। এটি ওয়েব API এর মতো কাজ করে এবং রিমোট সার্ভার থেকে ডেটা রিটার্ন করতে সহায়তা করে।

Fetch API এর মাধ্যমে ডেটা ফেচ করার উদাহরণ:

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

const DataFetchingExample = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // ডেটা ফেচিং
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())  // JSON ফর্ম্যাটে ডেটা পাবো
      .then((json) => {
        setData(json);  // ডেটা স্টেটে সেট করা
        setLoading(false);  // লোডিং শেষ
      })
      .catch((error) => {
        setError(error);  // যদি কোনো সমস্যা হয়
        setLoading(false);
      });
  }, []);  // একবার অ্যাপ লোড হলে, এই কোড রান করবে

  // লোডিং বা ত্রুটি থাকলে কনডিশনাল রেন্ডারিং
  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <View>
      <Text>Fetched Data:</Text>
      {data && data.map((item) => (
        <View key={item.id}>
          <Text>{item.title}</Text>
        </View>
      ))}
    </View>
  );
};

export default DataFetchingExample;

এখানে useEffect হুক ব্যবহার করে, যখন কম্পোনেন্ট প্রথমবার রেন্ডার হয়, তখন fetch কল করা হয় এবং সার্ভার থেকে ডেটা আনা হয়।

২. Axios ব্যবহার করে ডেটা ফেচিং

Axios একটি জনপ্রিয় তৃতীয় পক্ষের লাইব্রেরি যা HTTP রিকোয়েস্ট করার জন্য ব্যবহার করা হয়। এটি fetch API থেকে অনেকটা উন্নত, যেমন promise ধারণার মাধ্যমে আরও সহজ এবং বোধগম্য কোড লেখা যায় এবং বিভিন্ন ফিচার যেমন request cancellation, request timeout, automatic JSON parsing ইত্যাদি সরবরাহ করে।

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

1. প্রথমে Axios ইন্সটল করতে হবে:

npm install axios

2. এরপর আপনি Axios ব্যবহার করে API কল করতে পারেন:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

const DataFetchingWithAxios = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);  // API থেকে আসা ডেটা
        setLoading(false);  // লোডিং শেষ
      })
      .catch((error) => {
        setError(error);  // কোনো ত্রুটি হলে
        setLoading(false);
      });
  }, []);

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <View>
      <Text>Fetched Data:</Text>
      {data && data.map((item) => (
        <View key={item.id}>
          <Text>{item.title}</Text>
        </View>
      ))}
    </View>
  );
};

export default DataFetchingWithAxios;

এখানে axios.get দিয়ে API কল করা হয়েছে এবং তারপর ডেটা response.data থেকে আসছে।

৩. POST রিকোয়েস্ট এবং ডেটা পাঠানো

অতিরিক্তভাবে, আপনি যদি সার্ভারে ডেটা পাঠাতে চান (যেমন লগইন বা ফর্ম ডেটা পাঠানো), তবে আপনি POST রিকোয়েস্ট ব্যবহার করবেন।

Fetch API এর মাধ্যমে POST রিকোয়েস্ট:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((json) => console.log(json));

Axios এর মাধ্যমে POST রিকোয়েস্ট:

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1,
})
  .then((response) => console.log(response.data))
  .catch((error) => console.error('Error:', error));

৪. React Query অথবা Redux Toolkit ব্যবহার করে API ইন্টিগ্রেশন

যদি আপনার অ্যাপে অনেক API কল হয় এবং আপনি চাইলে ডেটার ক্যাশিং, রিফেচিং বা সিঙ্ক্রোনাইজেশন পরিচালনা করতে, তবে আপনি React Query বা Redux Toolkit Query ব্যবহার করতে পারেন। এই লাইব্রেরিগুলো API ইন্টিগ্রেশন এবং স্টেট ম্যানেজমেন্টের জন্য আরও উন্নত এবং সিস্টেমেটিক সমাধান দেয়।

সারাংশ

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

Fetch API হল একটি আধুনিক JavaScript API যা ব্যবহারকারীদের ওয়েব পেজ থেকে অ্যাসিনক্রোনাসভাবে ডেটা ফেচ (আনলিমিটেড রিসোর্স বা সার্ভার থেকে ডেটা আনতে) করার সুবিধা দেয়। এটি Promise-based এবং সাদামাটা সিনট্যাক্সের মাধ্যমে HTTP অনুরোধ পাঠানো এবং সাড়া পাওয়া যায়।

এখানে আমরা Fetch API দিয়ে ডেটা ফেচ করার একটি উদাহরণ দেখব।

Fetch API দিয়ে ডেটা ফেচ করা:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch API দিয়ে ডেটা ফেচ করা
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data); // ডেটা স্টেটে সেট করা
        setIsLoading(false); // লোডিং শেষ
      })
      .catch(error => {
        setError(error.message); // যদি কোনো ত্রুটি ঘটে
        setIsLoading(false); // লোডিং শেষ
      });
  }, []); // কম্পোনেন্ট প্রথমবার মাউন্ট হলে একবারই রান হবে

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

ব্যাখ্যা:

1. useState হুক:
   • data: ফেচ করা ডেটা সংরক্ষণ করতে ব্যবহৃত স্টেট।
   • isLoading: লোডিং স্টেট যা ফেচিং প্রক্রিয়া চলাকালীন লোডিং অবস্থায় থাকে।
   • error: যদি কোনো ত্রুটি ঘটে তবে সেটি সংরক্ষণ করা হবে।
2. useEffect হুক:
   • fetch API কল করার জন্য ব্যবহার করা হয়। এখানে 'https://jsonplaceholder.typicode.com/posts' URL থেকে ডেটা ফেচ করা হচ্ছে। এটি একটি পাবলিক API যার মাধ্যমে ফেক পোস্ট ডেটা পাওয়া যায়।
   • then() এর মাধ্যমে প্রাপ্ত রেসপন্সের JSON ডেটা ব্যবহার করে সেটি setData দিয়ে স্টেটে রাখা হচ্ছে।
   • catch() ব্লকে যদি কোনো ত্রুটি ঘটে, তা setError এর মাধ্যমে স্টেটে স্টোর করা হয়।
3. ল্যান্ডিং স্টেট:
   • লোডিং (Loading): যখন ডেটা ফেচ হচ্ছে তখন লোডিং টেক্সট দেখানো হবে।
   • ত্রুটি (Error): যদি কোনো সমস্যা ঘটে, তাতে ত্রুটির বার্তা দেখানো হবে।
   • ডেটা: সফলভাবে ডেটা ফেচ হলে, তা ইউজার ইন্টারফেসে দেখানো হবে।

Fetch API এর ব্যবহার সম্পর্কে কিছু গুরুত্বপূর্ণ বিষয়:

1. অ্যাসিনক্রোনাস (Asynchronous) কাজ করা:
   fetch() একটি Promise রিটার্ন করে, যার মাধ্যমে আপনি .then() এবং .catch() মেথড ব্যবহার করে অ্যাসিনক্রোনাস ডেটা রিসিভ করতে পারেন।
2. প্রতিক্রিয়া যাচাই:
   response.ok ব্যবহার করে আপনি রেসপন্সের স্ট্যাটাস কোড পরীক্ষা করতে পারেন। যদি রেসপন্স ভালো না হয় (যেমন 404 বা 500 স্ট্যাটাস), তাহলে আপনি একটি ত্রুটি (error) ছুড়ে দিতে পারেন।
3. JSON পদ্ধতিতে রূপান্তর:
   response.json() ব্যবহার করে ফেচ করা ডেটা JSON ফর্ম্যাটে রূপান্তরিত হয়।

সারাংশ:

Fetch API দিয়ে ডেটা ফেচিং একটি সহজ পদ্ধতি যা React বা সাধারণ JavaScript অ্যাপ্লিকেশনগুলিতে ডেটা অনুরোধ পাঠাতে এবং তা রিসিভ করতে ব্যবহৃত হয়। এটি অ্যাসিনক্রোনাস এবং Promise ভিত্তিক, যা ডেটা ফেচিংয়ের জন্য অত্যন্ত কার্যকরী।

Axios একটি জনপ্রিয় JavaScript লাইব্রেরি যা HTTP রিকোয়েস্ট করতে ব্যবহৃত হয়। এটি promises সমর্থন করে এবং সহজে API রিকোয়েস্ট করার জন্য একটি পরিষ্কার এবং সহজ API প্রদান করে। Axios ওয়েব অ্যাপ্লিকেশন বা React, Vue, Angular ইত্যাদিতে HTTP রিকোয়েস্ট করার জন্য ব্যাপকভাবে ব্যবহৃত হয়।

নিচে Axios ব্যবহার করে API রিকোয়েস্ট করার কিছু সহজ পদ্ধতি আলোচনা করা হলো:

১. Axios ইনস্টলেশন

প্রথমে, আপনাকে Axios ইনস্টল করতে হবে। এটি NPM বা Yarn ব্যবহার করে ইনস্টল করা যায়:

NPM:

npm install axios

Yarn:

yarn add axios

২. GET রিকোয়েস্ট করা

GET রিকোয়েস্ট API থেকে ডেটা ফেচ করতে ব্যবহৃত হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Axios ব্যবহার করে API থেকে ডেটা ফেচ করা হচ্ছে।

import axios from 'axios';

const getData = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data); // API থেকে পাওয়া ডেটা
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

getData();

এখানে:

• axios.get() ফাংশনটি GET রিকোয়েস্ট পাঠাতে ব্যবহৃত হয়।
• await কিওয়ার্ড ব্যবহার করে আমরা প্রমিজ সম্পূর্ণ হওয়ার জন্য অপেক্ষা করছি।
• response.data তে API থেকে প্রাপ্ত ডেটা থাকবে।

৩. POST রিকোয়েস্ট করা

POST রিকোয়েস্ট ব্যবহার করা হয় নতুন ডেটা সার্ভারে পাঠানোর জন্য। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Axios ব্যবহার করে একটি POST রিকোয়েস্ট পাঠানো হচ্ছে:

import axios from 'axios';

const postData = async () => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1
    });
    console.log(response.data); // সার্ভার থেকে প্রাপ্ত রেসপন্স
  } catch (error) {
    console.error('Error posting data:', error);
  }
};

postData();

এখানে:

• axios.post() ফাংশনটি POST রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়।
• দ্বিতীয় প্যারামিটার হিসেবে আমরা যেই ডেটা পাঠাতে চাই তা প্রদান করি (যেমন এখানে { title: 'foo', body: 'bar' })।

৪. PUT রিকোয়েস্ট করা

PUT রিকোয়েস্ট সাধারণত ডেটা আপডেট করতে ব্যবহৃত হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Axios ব্যবহার করে একটি PUT রিকোয়েস্ট করা হচ্ছে:

import axios from 'axios';

const updateData = async () => {
  try {
    const response = await axios.put('https://jsonplaceholder.typicode.com/posts/1', {
      title: 'Updated Title',
      body: 'Updated Body',
      userId: 1
    });
    console.log(response.data); // সার্ভার থেকে প্রাপ্ত রেসপন্স
  } catch (error) {
    console.error('Error updating data:', error);
  }
};

updateData();

এখানে:

• axios.put() ফাংশনটি PUT রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়।
• URL এ 1 ব্যবহার করা হয়েছে, যাতে প্রথম পোস্টটি আপডেট করা যায়।

৫. DELETE রিকোয়েস্ট করা

DELETE রিকোয়েস্ট API থেকে ডেটা মুছে ফেলতে ব্যবহৃত হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Axios ব্যবহার করে একটি DELETE রিকোয়েস্ট করা হচ্ছে:

import axios from 'axios';

const deleteData = async () => {
  try {
    const response = await axios.delete('https://jsonplaceholder.typicode.com/posts/1');
    console.log(response.data); // সার্ভার থেকে প্রাপ্ত রেসপন্স
  } catch (error) {
    console.error('Error deleting data:', error);
  }
};

deleteData();

এখানে:

• axios.delete() ফাংশনটি DELETE রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়।
• URL এ 1 ব্যবহার করা হয়েছে, যাতে প্রথম পোস্টটি ডিলিট করা যায়।

৬. Axios Configuration

যখন আপনাকে একাধিক রিকোয়েস্টে একই কনফিগারেশন (যেমন বেস URL বা হেডার) ব্যবহার করতে হয়, তখন আপনি Axios এর কনফিগারেশন সেট করতে পারেন।

import axios from 'axios';

// Axios এর কনফিগারেশন সেট করা
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
  timeout: 1000, // 1 সেকেন্ডের জন্য অপেক্ষা
  headers: {'X-Custom-Header': 'foobar'}
});

const getData = async () => {
  try {
    const response = await instance.get('posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

getData();

এখানে:

• axios.create() ফাংশন দিয়ে একটি কাস্টম Axios ইনস্ট্যান্স তৈরি করা হয়েছে যাতে বেস URL এবং হেডার সেট করা যায়।
• এরপর এই ইনস্ট্যান্স ব্যবহার করে রিকোয়েস্ট করা হয়েছে।

সারাংশ

Axios দিয়ে API রিকোয়েস্ট করা খুবই সহজ এবং এটি promises সমর্থন করে, যেটি অ্যাসিনক্রোনাস অপারেশনগুলোর জন্য কার্যকরী। আপনি সহজেই GET, POST, PUT, এবং DELETE রিকোয়েস্ট করতে পারেন এবং প্রতিটি রিকোয়েস্টের জন্য কাস্টম কনফিগারেশনও ব্যবহার করতে পারেন। Axios-এর মাধ্যমে API রিকোয়েস্ট করা React, Vue, অথবা যেকোনো JavaScript অ্যাপ্লিকেশনে খুবই সুবিধাজনক এবং কার্যকরী।

RESTful API (Representational State Transfer) একটি সফটওয়্যার আর্কিটেকচার স্টাইল যা ক্লায়েন্ট-সার্ভার অ্যাপ্লিকেশনগুলির মধ্যে সহজ এবং দ্রুত যোগাযোগ নিশ্চিত করে। এটি HTTP প্রোটোকল ব্যবহার করে ডেটা আদান-প্রদান করতে সক্ষম, এবং এতে মূলত GET, POST, PUT, DELETE ইত্যাদি HTTP মেথড ব্যবহৃত হয়।

JSON (JavaScript Object Notation) হল একটি হালকা, পাঠযোগ্য এবং সহজে পার্স করা ডেটা বিন্যাস, যা সাধারণত RESTful API-র মাধ্যমে ডেটা আদান-প্রদানে ব্যবহৃত হয়। JSON একটি অবজেক্টের মতো দেখতে হয়, যা কী এবং মানের জোড়া নিয়ে গঠিত।

এখানে RESTful API Integration এবং JSON Data Handling সম্পর্কে বিস্তারিত আলোচনা করা হবে।

RESTful API Integration

RESTful API ইন্টিগ্রেশন এমন একটি প্রক্রিয়া যার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশন বা সিস্টেমকে অন্যান্য সিস্টেমের সাথে API-র মাধ্যমে যুক্ত করেন। RESTful API সাধারণত HTTP প্রোটোকলের উপর ভিত্তি করে থাকে, এবং API থেকে ডেটা রিকোয়েস্ট এবং রেসপন্স করতে পারে। এই ইন্টিগ্রেশনটির মাধ্যমে আপনার অ্যাপ্লিকেশন বিভিন্ন সার্ভিসের সাথে যোগাযোগ করতে পারে।

প্রক্রিয়া:

1. API Endpoint চিহ্নিত করা
   API ব্যবহার করার জন্য প্রথমেই আপনাকে API এর endpoint চিহ্নিত করতে হবে। এটি সাধারণত একটি URL হয়, যা আপনি HTTP মেথড (GET, POST, PUT, DELETE) ব্যবহার করে এক্সেস করবেন।
2. HTTP Request পাঠানো
   ক্লায়েন্ট (আপনার অ্যাপ্লিকেশন) API-র মাধ্যমে HTTP রিকোয়েস্ট পাঠায়। এই রিকোয়েস্টে HTTP মেথড, হেডার এবং ডেটা থাকে।
3. JSON Data Handling
   সাধারণত, API থেকে প্রাপ্ত ডেটা JSON ফরম্যাটে থাকে। আপনি এই JSON ডেটা প্রক্রিয়া এবং বিশ্লেষণ করে অ্যাপ্লিকেশনে ব্যবহার করবেন।
4. API Response প্রাপ্তি
   সার্ভার থেকে রেসপন্স আসলে, আপনি প্রাপ্ত JSON ডেটাকে পার্স এবং হ্যান্ডেল করতে পারেন।

RESTful API Integration in React (যেমন Axios ব্যবহার করে)

React অ্যাপ্লিকেশনে RESTful API ইন্টিগ্রেট করতে সাধারণত Axios বা Fetch API ব্যবহার করা হয়। এখানে Axios ব্যবহার করে API ইন্টিগ্রেশন এবং JSON ডেটা হ্যান্ডল করার একটি উদাহরণ দেওয়া হল:

১. Axios Installation:

প্রথমে আপনাকে Axios ইনস্টল করতে হবে:

npm install axios

২. Axios ব্যবহার করে GET রিকোয়েস্ট পাঠানো:

React কম্পোনেন্টে API থেকে ডেটা ফেচ করতে Axios ব্যবহার করতে পারেন:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  
  useEffect(() => {
    // API রিকোয়েস্ট পাঠানো
    axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(response => {
        // API থেকে JSON ডেটা পাওয়ার পর সেটি স্টেটে স্টোর করা
        setTodos(response.data);
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }, []);

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

• এখানে axios.get() ব্যবহার করে API থেকে ডেটা ফেচ করা হচ্ছে।
• response.data হল JSON ডেটা যা আপনি API থেকে পেয়েছেন, এবং সেটি React state-এ স্টোর করা হয়েছে।
• এই ডেটা পরে UI তে রেন্ডার করা হয়।

৩. JSON Data Handling (POST রিকোয়েস্ট)

যদি আপনি API-তে ডেটা পাঠাতে চান (যেমন একটি নতুন todo যোগ করতে), তাহলে POST HTTP মেথড ব্যবহার করবেন।

import React, { useState } from 'react';
import axios from 'axios';

const AddTodo = () => {
  const [todo, setTodo] = useState('');

  const handleChange = (e) => {
    setTodo(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newTodo = { title: todo, completed: false };

    // API-এ POST রিকোয়েস্ট পাঠানো
    axios.post('https://jsonplaceholder.typicode.com/todos', newTodo)
      .then(response => {
        console.log('New Todo added:', response.data);
      })
      .catch(error => {
        console.error('Error posting data: ', error);
      });
  };

  return (
    <div>
      <h1>Add Todo</h1>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={todo} 
          onChange={handleChange} 
          placeholder="Enter Todo" 
        />
        <button type="submit">Add</button>
      </form>
    </div>
  );
};

export default AddTodo;

• এখানে POST রিকোয়েস্ট পাঠানো হচ্ছে এবং একটি নতুন todo ডেটা API-তে পাঠানো হচ্ছে।
• JSON ডেটা newTodo হলো সেই ডেটা যা API-তে পাঠানো হবে।

JSON Data Handle করা

JSON হল একটি ডেটা ফরম্যাট যা JavaScript এবং অন্যান্য ভাষায় সহজে পার্স এবং হ্যান্ডেল করা যায়। React বা JavaScript অ্যাপ্লিকেশনে API থেকে প্রাপ্ত JSON ডেটা সাধারণত JavaScript অবজেক্ট হিসেবে পার্স করা হয়।

১. JSON Parsing:

যখন আপনি API থেকে JSON ডেটা পাবেন, তখন এটি সাধারণত একটি স্ট্রিং আকারে আসে। JavaScript এ JSON.parse() মেথড ব্যবহার করে এটিকে অবজেক্টে রূপান্তর করা হয়।

const jsonString = '{"name": "John", "age": 30}';
const parsedObject = JSON.parse(jsonString);

console.log(parsedObject.name); // John
console.log(parsedObject.age);  // 30

২. JSON Stringify:

JSON ডেটাকে JavaScript অবজেক্টে রূপান্তর করার পর, আপনি যদি সেটি আবার JSON স্ট্রিংতে রূপান্তর করতে চান (যেমন API-তে পাঠানোর জন্য), তাহলে JSON.stringify() ব্যবহার করা হয়।

const user = { name: "John", age: 30 };
const jsonString = JSON.stringify(user);

console.log(jsonString);  // '{"name":"John","age":30}'

API Error Handling

API রিকোয়েস্টের ক্ষেত্রে সঠিকভাবে Error Handling করা গুরুত্বপূর্ণ। Axios এবং Fetch API তে .catch() বা .then() চেইন ব্যবহার করে আপনি রেসপন্সে ত্রুটি ধরতে পারেন।

axios.get('https://jsonplaceholder.typicode.com/todos')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('API Error:', error);
  });

সারাংশ

• RESTful API Integration হল একটি অ্যাপ্লিকেশন বা সিস্টেমের মাধ্যমে API ব্যবহার করে ডেটা আদান-প্রদান করার প্রক্রিয়া। React অ্যাপ্লিকেশনে Axios বা Fetch API ব্যবহার করে এই প্রক্রিয়া বাস্তবায়ন করা হয়।
• JSON Data Handling হল API থেকে প্রাপ্ত ডেটাকে পার্স, ব্যবহার এবং আবার JSON ফরম্যাটে রূপান্তর করার প্রক্রিয়া। JSON ডেটা JavaScript অবজেক্ট হিসেবে ব্যবহার করা হয় এবং প্রয়োজন হলে সেটি আবার JSON স্ট্রিংতে রূপান্তরিত করা যায়।
• Error Handling এর মাধ্যমে আপনি API রিকোয়েস্টের ত্রুটির সময় সঠিকভাবে প্রতিক্রিয়া জানাতে পারেন।

Async Functions এবং Promises হল JavaScript এর দুটি শক্তিশালী কৌশল যা অ্যাসিঙ্ক্রোনাস প্রোগ্রামিংকে আরও সহজ এবং পড়তে সুবিধাজনক করে তোলে। এগুলি অ্যাসিঙ্ক্রোনাস কোড ব্যবস্থাপনার জন্য ব্যবহৃত হয়, বিশেষ করে যখন আপনি API কল বা ডেটাবেস রিকোয়েস্ট ইত্যাদি করতে চান যা সময় নিতে পারে।

1. Promises

Promise হল একটি JavaScript অবজেক্ট যা ভবিষ্যতে একটি মূল্য (value) প্রদান করবে। এই মূল্যটি সফলভাবে (resolved) প্রাপ্ত হতে পারে অথবা ব্যর্থ (rejected) হতে পারে। Promise অ্যাসিঙ্ক্রোনাস অপারেশনগুলির ফলাফলকে ট্র্যাক করতে সাহায্য করে এবং then, catch, এবং finally মেথডের মাধ্যমে প্রতিক্রিয়া (response) গুলি হ্যান্ডেল করতে দেয়।

Promise এর মূল ধারণা:

• Pending: Promise এখনও সম্পন্ন হয়নি।
• Resolved (Fulfilled): Promise সফলভাবে পূর্ণ হয়েছে এবং তার একটি ফলাফল (value) রয়েছে।
• Rejected: Promise সম্পন্ন হয়নি এবং ত্রুটি (error) ঘটেছে।

Promise এর ব্যবহার উদাহরণ:

// Promise তৈরি করা
const fetchData = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve('Data fetched successfully');
  } else {
    reject('Failed to fetch data');
  }
});

// Promise ব্যবহার করা
fetchData
  .then((result) => {
    console.log(result); // 'Data fetched successfully'
  })
  .catch((error) => {
    console.error(error); // 'Failed to fetch data'
  });

2. Async Functions

Async Functions হল JavaScript এর একটি ফিচার যা Promise ব্যবহারকে আরও সহজ করে তোলে। async কীওয়ার্ড দিয়ে ফাংশনকে async ঘোষণা করা হয়, আর await কীওয়ার্ড দিয়ে আপনি একটি Promise-এর ফলাফল (resolve) পর্যন্ত অপেক্ষা করতে পারেন।

• async: ফাংশনকে অ্যাসিঙ্ক্রোনাস ঘোষণা করে, এবং এটি একটি Promise রিটার্ন করে।
• await: async ফাংশনের ভিতরে ব্যবহৃত হয় এবং Promise resolve না হওয়া পর্যন্ত এক্সিকিউশন থামিয়ে রাখে।

Async Functions এবং Await এর ব্যবহার উদাহরণ:

// Async Function তৈরি করা
const fetchData = async () => {
  const promise = new Promise((resolve, reject) => {
    const success = true;
    
    if (success) {
      resolve('Data fetched successfully');
    } else {
      reject('Failed to fetch data');
    }
  });

  // Await ব্যবহার করা
  const result = await promise; // Promise রেজলভ না হওয়া পর্যন্ত অপেক্ষা করবে
  console.log(result); // 'Data fetched successfully'
};

fetchData().catch((error) => {
  console.error(error); // 'Failed to fetch data'
});

Async/Await এবং Promises এর মধ্যে পার্থক্য

• Promises: Promises একটি ঐতিহ্যগত পদ্ধতি যা অ্যাসিঙ্ক্রোনাস কার্যকলাপের জন্য ব্যবহৃত হয়। এটি then() এবং catch() মেথডের মাধ্যমে কাজ করে।
• Async/Await: Async/Await, Promise এর উপর ভিত্তি করে তৈরি হলেও, এটি আরও পড়তে সহজ এবং সিঙ্ক্রোনাস কোডের মতো দেখতে হয়। async ফাংশন এবং await কীওয়ার্ড দিয়ে কোডের ভেতরে অ্যাসিঙ্ক্রোনাস অপারেশনগুলোকে আরও সহজে লিখা যায়।

3. Async Functions এবং Promises সহ API কলের উদাহরণ

API কলের জন্য Async/Await বা Promises ব্যবহার করা একটি সাধারণ প্র্যাকটিস। নিচে একটি উদাহরণ দেওয়া হলো যেখানে fetch API ব্যবহার করে ডেটা ফেচ করা হচ্ছে।

Async/Await এবং Fetch API উদাহরণ:

// Async function দিয়ে API কল
const fetchUserData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchUserData();

Promises দিয়ে API কল:

// Promise দিয়ে API কল
const fetchUserData = () => {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error('Error fetching data:', error));
};

fetchUserData();

4. Promise.all() এবং Promise.race()

• Promise.all(): এটি একাধিক Promise একসাথে নিয়ে কাজ করে। যখন সব Promise রেজলভ হবে, তখন একটি অ্যারে হিসেবে তাদের ফলাফল ফিরিয়ে দেওয়া হবে।
• Promise.race(): এটি একাধিক Promise নিয়ে কাজ করে এবং প্রথম Promise যা রেজলভ বা রিজেক্ট হবে, সেই Promise এর ফলাফল ফিরে দেয়।

Promise.all() উদাহরণ:

const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'One'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 2000, 'Two'));

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ['One', 'Two']
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race() উদাহরণ:

const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'One'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 2000, 'Two'));

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 'One' (because it resolves first)
  })
  .catch((error) => {
    console.error(error);
  });

সারাংশ

• Promises অ্যাসিঙ্ক্রোনাস কার্যকলাপ পরিচালনা করার জন্য ব্যবহৃত হয় এবং এটি ফলাফল বা ত্রুটির জন্য অপেক্ষা করে।
• Async/Await হল Promises এর একটি সহজ এবং পড়তে সুবিধাজনক পদ্ধতি, যা অ্যাসিঙ্ক্রোনাস কোডকে সিঙ্ক্রোনাস কোডের মতো দেখায়।
• Promise.all() এবং Promise.race() একাধিক Promise একসাথে পরিচালনা করতে সাহায্য করে।

Async Functions এবং Promises JavaScript অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং সহজ এবং কার্যকরী করে তোলে।