মূলঃ How To Use Axios With React: The Definitive Guide (2021), লেখকঃ Reed Barger

এই গাইডে আপনাকে শেখানো হবে React, বিশেষ করে React Hooks এর সাথে কিভাবে Axios ব্যবহার করা যায়।

আপনি জানতে পারবেন কেন আপনার Axios কে একটি ডেটা ফেচিং লাইব্রেরি হিসেবে ব্যবহার করা উচিৎ এবং কিভাবে Reactএর সাথে এটি সেটআপ করে সব শরনের HTTP রিকুয়েস্ট পাঠাতে পারবেন।

Then we'll touch on more advanced features like creating an Axios instance for reusability, using async-await with Axios for simplicity, and how to use Axios as a custom hook.

এরপর আমরা অপেক্ষাকৃত অ্যাডভান্সড ফিচার যেমন Axios ইন্সট্যান্স তৈরি করা, Axios এর সাথে async-await ব্যবহার করা, এবং কিভাবে Axios কে একটি কাস্টম হুক হিসেবে ব্যবহার করা যায়।

তাহলে শুরু করা যাক!

আপনার নিজের একটি কপি চান?📄

চীটশীটটি PDF ফরম্যাটে ডাউনলোড করতে এখানে ক্লিক করুন (৫ সেকেন্ডের মধ্যেই ডাউনলোড হয়ে যায়).

এই আর্টিকেলের সকল তথ্যই এই PDF ফাইলের মধ্যে আছে।

সুচিপত্র

  • Axios কী?
  • React এর সাথে Axios কেন ব্যবহার করবো?
  • কিভাবে  React এর সাথে Axios সেটআপ করবো?
  • কিভাবে একটি GET রিকুয়েস্ট করবো?
  • কিভাবে একটি POST রিকুয়েস্ট করবো?
  • কিভাবে একটি PUT রিকুয়েস্ট করবো?
  • কিভাবে একটি DELETE রিকুয়েস্ট করবো?
  • কিভাবে Axios এর এরর হ্যান্ডেল করবো?
  • কিভাবে Axios এর একটি ইন্সট্যান্স তৈরি করবো?
  • Axios এর সাথে কিভাবে Async-Await সিনট্যাক্স ব্যবহার করবো?
  • কিভাবে একটি কাস্টম useAxios হুক তৈরি করবো?

Axios কী?

Axios হল একটি HTTP ক্লায়েন্ট লাইব্রেরি যা আপনাকে একটি প্রদত্ত এন্ডপয়েন্ট এ রিকুয়েস্ট পাঠাতে সহায়তা করে।

Screen-Shot-2021-07-12-at-1.14.41-PM

উদাহরণ স্বরূপ, এন্ডপয়েন্টটি হতে পারে কোন এক্সটার্নাল API বা আপনার নিজের ব্যাকএন্ড Node.js সার্ভার।

একটি রিকুয়েস্টের মাধ্যমে আপনি আপনার API কে কোন একটি কার্য সম্পাদন করতে অনুরোধ করেন।

যেমন, যদি আপনি একটি GET রিকুয়েস্ট করেন, তাহলে রেসপন্স হিসেবে আপনি কিছু ডেটা আশা করতে পারেন যা আপনি আপনার অ্যাপ্লিকেশনে দেখাবেন।

React এর সাথে Axios কেন ব্যবহার করবো?

HTTP রিকুয়েস্ট করার জন্য অনেক কয়টা লাইব্রেরি আছে, তাহলে কেন আমরা Axios ব্যবহার করবো?

Axios কে আপনার HTTP ক্লায়েন্ট হিসেবে ব্যবহার করার স্বপক্ষে এখানে পাঁচটি কারণ দেওয়া হলঃ

  1. JSON ডেটা নিয়ে কাজ করার জন্য, Axios এর ডিফল্ট কনফিগারেশনটি বেশ ভাল। বিকল্প HTTP ক্লায়েন্টগুলো যেমন, Fetch API এর মত Axios এ হেডার সেট করার প্রয়োজন পড়ে না। অথবা রিকুয়েস্ট বডিকে ম্যানুয়ালি JSON স্ট্রিং এ কনভার্ট করার মত ঝামেলায়ো পড়তে হয় না।
  2. Axios এর ফাংশনের নামগুলো তার সাথে সংশ্লিষ্ট রিকুয়েস্ট এর অনুরূপ। যেমন একটি GET রিকুয়েস্ট করার জন্য আপনি get() মেথডটি ব্যবহার করতে পারেন।
  3. Axios এর মাধ্যমে, অল্প কোড লিখেই বেশি কাজ করা সম্ভব। যেমন রিকুয়েস্টের পরে শুধুমাত্র একটি .then() কলের মাধ্যমেই আপনি রেসপন্সের JSON ডেটা অ্যাক্সেস করতে পারবেন।
  4. Axios এর এরর হ্যান্ডলিং তুলনামূলকভাবে ভাল। রিকুয়েস্টে কোন সমস্যা হলে Axios সাধারণত 400 এবং 500 এরর থ্রো করে যেখানে Fetch API এর ক্ষেত্রে আপনাকে ম্যানুয়ালি স্ট্যাটাস কোড চেক করে এরর থ্রো করতে হয়।
  5. Axios ক্লায়েন্ট সাইডের পাশাপাশি সার্ভার সাইডেও ব্যবহার করা যায়। সুতরাং আপনি যদি কোন Node.js অ্যাপ্লিকেশনে কাজ করেন তাহলে আপনি Axios কে ব্রাউজার এনভাইরনমেন্ট এর বাহিরেও আপনার HTTP ক্লায়েন্ট হিসেবে ব্যবহার করতে পারেন।

কিভাবে  React এর সাথে Axios সেটআপ করবো

React এর সাথে Axios ব্যবহার করা খুবই সহজ। এটা করার জন্য আপনার মূলত তিনটি জিনিস প্রয়োজনঃ

  1. একটি React প্রজেক্ট
  2. npm/yarn এর মাধ্যমে Axios ইন্সটল করা
  3. রিকুয়েস্ট করার জন্য একটি API এন্ডপয়েন্ট

আপনি react.new ওয়েবসাইটে গিয়ে খুব দ্রুত একটি নতুন React প্রজেক্ট তৈরি করতে পারেন।

আপনার কম্পিউটারে যদি ইতমধ্যেই একটি React প্রজেক্ট থাকে তাহলে npm বা অন্য কোন প্যাকেজ ম্যানেজার ব্যবহার করে Axios ইন্সটল করে নিলেই চলবেঃ

npm install axios

এই গাইডে ডেটা GET এবং POST করার জন্য আপনি JSON Placeholder API ব্যবহার করবেন। API এর যেসব রাউটগুলোতে আপনি রিকুয়েস্ট পাঠাতে পারবেন, রিকুয়েস্ট মেথডসহ সেগুলোর একটি লিস্ট এখানে দেওয়া হলঃ

Screen-Shot-2021-07-10-at-12.21.28-PM

Axios এবং আপনার API এন্ডপয়েন্টের মাধ্যমে আপনি যেসব রিকুয়েস্ট করবেন তার একটি উদাহরণ এখানে দেখানো হল - পোস্ট retrieve, create, update, এবং delete করাঃ

axios-react

কিভাবে একটি GET রিকুয়েস্ট করবো

API এন্ডপয়েন্ট থেকে ডেটা নিয়ে আসার জন্য আপনি GET রিকুয়েস্ট করবেন।

প্রথমে আপনি একাধিক পোস্টের জন্য রিকুয়েস্ট করবেন। এন্ডপয়েন্টের লিস্ট দেখলে আপনি বুঝতে পারবেন যে আপনার প্রথম পোস্টটি আপনি /posts এন্ডপয়েন্ট থেকে পাচ্ছেনঃ

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

কম্পোনেন্টটি মাউন্ট হওয়ার সময় রিকুয়েস্ট করার জন্য আপনি useEffect হুক ব্যবহার করবেন। এর জন্য আপনাকে Axios ইম্পোর্ট করে .get() মেথড ব্যবহার করে GET রিকুয়েস্টটি করতে হবে। তারপর .then() কলব্যাকটি ব্যবহার করে রেসপন্স ডেটা অ্যাক্সেস করতে হবে।

রেসপন্সটি একটি অবজেক্ট হিসেবে আসে। রেসপন্সের ডেটা (এক্ষেত্রে id, title, এবং body সহ একটি পোস্ট) post নামে একটি স্টেটে রাখা হয় যা কম্পোনেন্ট এ দেখানো হয়েছে।

উল্লেখ্য, আপনি যে কোন সময় রেসপন্সের .data প্রোপার্টির মাধ্যমে করার মাধ্যমে রিকুয়েস্টেড ডেটা অ্যাক্সেস করতে পারেন।

কিভাবে একটি POST রিকুয়েস্ট করবো

সার্ভারে নতুন ডেটা তৈরি করার জন্য POST রিকুয়েস্ট করবেন।

API এন্ডপয়েন্টের বর্ণনা অনুযায়ী POST রিকুয়েস্টটি /posts এন্ডপয়েন্টে করতে হবে। আপনি নিচের কোডে দেখবেন পোস্ট তৈরি করার জন্য একটি বাটন রয়েছেঃ

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function createPost() {
    axios
      .post(baseURL, {
        title: "Hello World!",
        body: "This is a new post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={createPost}>Create Post</button>
    </div>
  );
}

বাটনটি ক্লিক করা হলে এটি createPost ফাংশনটি কল করে।

Axios ব্যবহার করে POST রিকুয়েস্ট পাঠানোর জন্য আপনার .post() মেথড ব্যবহার করতে হবে। দ্বিতীয় আর্গুমেন্ট হিসেবে আপনি একটি অবজেক্ট প্রোপার্টি যুক্ত করবেন যেটায় আপনার পোস্টের বিষয়বস্তু থাকবে।

এবারও .then() কলব্যাক ব্যবহার করে রেসপন্স ডেটা গ্রহণ করবেন এবং নতুন পোস্ট ডেটা দিয়ে পুরনো পোস্ট ডেটা প্রতিস্থাপন করবেন।

এটি অনেকটাই .get() মেথডের মত কিন্তু আপনি নতুন যে রিসোর্সটি তৈরি করতে চান সেটিকে API এন্ডপয়েন্টের পড়ে দ্বিতীয় আর্গুমেন্ট হিসেবে দিয়ে দিতে হবে।

কিভাবে একটি PUT রিকুয়েস্ট করবো

প্রদত্ত কোন রিসোর্সকে আপডেট করার জন্য PUT রিকুয়েস্ট ব্যবহার করবেন।

এক্ষেত্রে আপনি একটি পোস্ট আপডেট করবেন।

এর জন্য আপনি আরো একটি নতুন বাটন তৈরি করবেন। তবে এবার বাটনটি পোস্ট আপডেট করার জন্য একটি ফাংশন কল করবেঃ

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function updatePost() {
    axios
      .put(`${baseURL}/1`, {
        title: "Hello World!",
        body: "This is an updated post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={updatePost}>Update Post</button>
    </div>
  );
}

উপরোক্ত কোডে আপনি Axios এর PUT মেথডটি ব্যবহার করেছেন। এবং POST মেথডের মতই যেসব প্রোপার্টি আপনি আপডেট করতে চান সেগুলোকে দ্বিতীয় আর্গুমেন্টে যুক্ত করে দিতে হবে।

এরপর .then() কলব্যাক ব্যবহার করে রেসপন্সে আসা নতুন ডেটা দিয়ে JSX এ ব্যবহৃত ডেটা প্রতিস্থাপন করবেন।

কিভাবে একটি DELETE রিকুয়েস্ট করবো

এবার কোন রিসোর্স ডিলিট করার জন্য আপনি DELETE মেথড ব্যবহার করবেন।

উদাহরণ স্বরূপ, আমরা প্রথম পোস্টটি ডিলিট করবো।

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

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

বেশিরভাগ সময়েই .delete() মেথডের রিটার্ন করা ডেটা আপনার কাজে আসবে না। তবে উপরোক্ত কোডে .then() কলব্যাক ব্যবহার করে হয়েছে আপনার রিকুয়েস্টটি সফলভাবে শেষ হয়েছে কি না তা নিশ্চিত করতে।

উপরোক্ত কোডে পোস্ট ডিলিট হয়ে যাওয়ার পরে ইউজার কে জানানো হয়েছে যে পোস্টটি ডিলিট হয়েছে। এরপর স্টেট এর মান হিসেবে null সেট করার মাধ্যমে স্টেট ডেটা ক্লিয়ার করে দেওয়া হয়েছে এবং পোস্ট ডিলিট হওয়ার পরেই "No post" টেক্সটটি দেখানো হয়েছে।

কিভাবে Axios এর এরর হ্যান্ডেল করবো

ধরুন রিকুয়েস্ট করার সময় একটি এরর দেখা দিল। উদাহরণ স্বরূপ, আপনি হয়তো ভুল ডেটা পাস করেছেন, ভুল এন্ডপয়েন্টে রিকুয়েস্ট করেছেন বা কোন নেটওয়ার্ক দেখা দিয়েছে। তাহলে কি করবেন?

একটি এরর কে অনুকরণ করার জন্য আপনি এমন একটি এন্ডপয়েন্টে রিকুয়েস্ট পাঠান যেটার কোন অস্তিত্ব নেইঃ /post/asdf

এই রিকুয়েস্টটি একটি 404 স্ট্যাটাস কোড রিটার্ন করবেঃ

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);
  
  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

Axios এক্ষেত্রে .then() কলব্যাক এক্সিকিউট করার পরিবর্তে একটি এরর থ্রো করবে এবং .catch() কলব্যাক এক্সিকিউট করবে।

ইউজারকে একটি এরর মেসেজ দেখানোর জন্য, আমরা এই ফাংশনের এরর ডেটাটি নিয়ে একটি স্টেটে রাখছি।  এই কোডটি চালালে আপনি "Error: Request failed with status code 404" টেক্সটটি দেখতে পারবেন।

কিভাবে Axios এর একটি ইন্সট্যান্স তৈরি করবো

আগের উদাহরণগুলোতে হয়তো আপনি দেখেছেন যে এন্ডপয়েন্টের অংশ হিসেবে একটি baseURL ব্যবহার করা হয়েছে। তবে প্রত্যেক রিকুয়েস্টে এই baseURL লেখাটা বেশ মুশকিল হয়ে পড়ে।

এক্ষেত্রে Axios এর .create() মেথড ব্যবহার করে আপনি Axios এর একটি ইন্সট্যান্স তৈরি করতে পারেন যা এই baseURL টিকে মনে রাখবে। baseURL ছাড়াও এমন যে কোন মান যা আপনি প্রত্যেক রিকুয়েস্টে চান যেমন হেডার, তাদের সবগুলোকে ইন্সট্যান্সে যুক্ত করতে পারবেন।

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

উপরোক্ত কনফিগ অবজেক্টে শুধুমাত্র baseURL যুক্ত করা হয়েছে যা আপনি আগে প্রত্যেক রিকুয়েস্টে ম্যানুয়ালি যুক্ত করতেন। .create() মেথডটি একটি ইন্সট্যান্স রিটার্ন করে যার নাম এক্ষেত্রে client দেওয়া হয়েছে।

এই ইন্সট্যান্সের সাথে আপনি আগের মতই সবগুলো মেথড ব্যবহার করতে পারবেন শুধু baseURL এর পরিবর্তে রাউটটি দিয়ে দিলেই হবে যেমন, /, /1, এবং আর যা কিছু আছে।

Axios এর সাথে কিভাবে Async-Await সিনট্যাক্স ব্যবহার করবো

জাভাস্ক্রিপ্টে প্রমিজ ব্যবহার করার একটি বড় সুবিধা হল async-await সিনট্যাক্স।

Async-await আপনাকে then এবং catch এর ব্যবহার ছাড়া অনেক সহজপঠ্য কোড লিখতে সহায়তা করে। কিন্তু আপনি কিচাবে Axios এর সাথে async-await সিনট্যাক্স ব্যবহার করবেন?

নিম্নোক্ত উদাহরণে, পোস্ট ফেচ করা হয়েছে এবং পোস্ট ডিলিট করার জন্য একটি বাটনও আছেঃ

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);

  async function deletePost() {
    await client.delete("/1");
    alert("Post deleted!");
    setPost(null);
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

তবে useEffect এর ভেতরে একটি async ফাংশন আছে যার নাম getPost। এই ফাংশনটিকে async করার কারণে আপনি then() ব্যবহার না করেই, await কীওয়ার্ডের মাধ্যমে GET রিকুয়েস্টটি করতে পারেন।

উল্লেখ্য, কম্পোনেন্ট তৈরি হওয়ার পরে পরেই getPost ফাংশনটি কল করা হয়। এছাড়াও deletePost ফাংশনটি এখন async। DELETE রিকুয়েস্টটির সাথে await কীওয়ার্ড ব্যবহার করার পরে, ইউজারকে জানানো হয় যে পোস্টটি ডিলিট হয়েছে এবং পোস্ট এর মান হিসেবে null সেট করা হয়।

যেমনটা আপনি দেখতে পাচ্ছেন, async-await আপনার কোডকে আরও সহজপঠ্য করে তোলে এবং আপনি খুব সহজেই Axios এর সাথে async-await ব্যবহার করতে পারেন।

কিভাবে একটি কাস্টম useAxios হুক তৈরি করবো

Async-await ব্যবহার করে আপনার কোডকে বেশ সহজপঠ্য করা যায় তবে এটাকে আরও সহজপঠ্য করার উপায় আছে।

কম্পোনেন্ট মাউন্ট হওয়ার সময় useEffect ব্যবহার না করে আপনি চাইলে Axios ব্যবহার করে একটি কাস্টম হুক বানিয়ে ফেলতে পারেন যেটাকে আপনি প্রয়োজন অনুযায়ী বার বার ব্যবহার করতে পারবেন।

যদিও আপনি নিজেই এই হুক তৈরি করে ফেলতে পারেন, একটি বেশ ভাল লাইব্রেরি আছে যা আপনাকে একটি কাস্টম useAxios হুক দেয়।

প্রথমে প্যাকেজটি ইন্সটল করুনঃ

npm install use-axios-client

হুকটি ব্যবহার করার জন্য প্রথমে use-axios-client থেকে useAxios  হুকটি ইম্পোর্ট করে নিন। যেহেতু আপনার আর useEffect দরকার নেই, আপনি ইম্পোর্টটি সরিয়ে ফেলতে পারেনঃ

import { useAxios } from "use-axios-client";

export default function App() {
  const { data, error, loading } = useAxios({
    url: "https://jsonplaceholder.typicode.com/posts/1"
  });

  if (loading || !data) return "Loading...";
  if (error) return "Error!";

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  ) 
}

এবার আপনি useAxios হুকে আপনার কাঙ্ক্ষিত URL টি পাস করে কল করতে পারেন। হুকটি রেসপন্সে স্টেটের জন্য বিভিন্ন ডেটা রিটার্ন করেঃ loading, error এবং রিকুয়েস্টটি শেষ হলে data

রিকুয়েস্টটি চলাকালীন loading প্রোপার্টিটি true হবে। যদি কোন এরর দেখা দেয় তাহলে আপনে এরর স্টেট দেখাবেন এবং যদি রিকুয়েস্টটি সফল হয় তাহলে UI এ রেসপন্সে পাওয়া ডেটা দেখাবেন।

এ ধরণের কাস্টম হুকের সুবিধা হল এগুলো আপনার কোডকে সংক্ষিপ্ত এবং সহজপঠ্য করে তোলে।

এরপর কি?

অভিনন্দন! আপনি এখন আপয়ানার React অ্যাপ্লিকেশনের সাথে Axios এর ব্যবহার শিখে গেছেন। আমি আশা করি গাইডডি আপনার কাজে এসেছে।

মনে রাখবেন, আপনি চাইলে এই গাইডটি PDF আকারেও ডাউনলোড করতে পারেন।