Axios: এটি কী, HTTP অনুরোধ এবং API নিয়ে কাজ করার মৌলিক বিষয়

Axios কী?

Axios হল একটি JavaScript লাইব্রেরি যা ব্রাউজার এবং Node.js পরিবেশ থেকে HTTP অনুরোধ করার জন্য ডিজাইন করা হয়েছে। এটি ব্রাউজারে XMLHttpRequest এবং Node.js-এ http মডিউলের উপর নির্মিত, উভয় প্ল্যাটফর্মের জন্য একটি ইউনিফাইড API প্রদান করে।

নেটিভ fetch-এর তুলনায় Axios-এর প্রধান সুবিধা হল স্বয়ংক্রিয় JSON হ্যান্ডলিং, ইন্টারসেপ্টর সমর্থন এবং আরও সুবিধাজনক ত্রুটি হ্যান্ডলিং। fetch-এর বিপরীতে, Axios-এর JSON প্রতিক্রিয়া বডি পেতে দুটি .then কলের প্রয়োজন হয় না এবং HTTP ত্রুটিতে (4xx, 5xx) স্বয়ংক্রিয়ভাবে ব্যতিক্রম নিক্ষেপ করে।

লাইব্রেরিটি সমস্ত প্রধান HTTP পদ্ধতি সমর্থন করে: GET, POST, PUT, DELETE, PATCH এবং HEAD। এটি সাধারণ প্রজেক্ট থেকে শুরু করে দৈনিক শত শত হাজার অনুরোধ সহ বড় কর্পোরেট অ্যাপ্লিকেশন পর্যন্ত ব্যবহার করা যেতে পারে।

Axios-এর মূল বৈশিষ্ট্য

• Promise API — সমস্ত অপারেশন Promise ফেরত দেয়, অ্যাসিঙ্ক্রোনাস কোড সহজ করে
• TypeScript সমর্থন — সমস্ত পদ্ধতি এবং কনফিগারেশনের জন্য পূর্ণ টাইপিং
• ইন্টারসেপ্টর — অনুরোধ এবং প্রতিক্রিয়া প্রক্রিয়াকরণের জন্য মিডলওয়্যার
• রূপান্তর — ইনপুট এবং আউটপুটে স্বয়ংক্রিয় ডেটা রূপান্তর

Axios-এর আর্কিটেকচার এবং কাজের নীতি

Axios-এর আর্কিটেকচার অ্যাডাপ্টারের ধারণার উপর ভিত্তি করে। লাইব্রেরি ট্রান্সপোর্ট লেয়ারকে অ্যাবস্ট্র্যাক্ট করে: এটি ব্রাউজারে XMLHttpRequest এবং Node.js-এ http বা https মডিউল ব্যবহার করে। এটি রানটাইম পরিবেশ নির্বিশেষে একটি একক ইন্টারফেস প্রদান করে।

প্রতিটি অনুরোধ ইন্টারসেপ্টরের একটি শৃঙ্খলের মধ্য দিয়ে যায় যা অনুরোধ কনফিগারেশন বা প্রতিক্রিয়া পরিবর্তন করতে পারে। ইন্টারসেপ্টরের পরে, অনুরোধটি অ্যাডাপ্টারে পাঠানো হয়, যা প্রকৃত HTTP কল সম্পাদন করে। প্রতিক্রিয়া তখন অ্যাপ্লিকেশন কোডে পৌঁছানোর আগে প্রতিক্রিয়া ইন্টারসেপ্টরের মধ্য দিয়ে যায়।

Axios অনুরোধ জীবনচক্র

1. কনফিগারেশন তৈরি — পদ্ধতি, URL, হেডার, অনুরোধ বডি
2. অনুরোধ ইন্টারসেপ্টর — কনফিগারেশন পরিবর্তন, টোকেন যোগ করা
3. HTTP কল — ব্রাউজার বা Node.js অ্যাডাপ্টারের মাধ্যমে নির্বাহ
4. প্রতিক্রিয়া ইন্টারসেপ্টর — প্রতিক্রিয়া রূপান্তর, ত্রুটি হ্যান্ডলিং
5. ফলাফল ফেরত — Promise ডেটা সহ সমাধান বা প্রত্যাখ্যান

Axios-এর প্রধান বৈশিষ্ট্য

Axios-এ অনেক বিল্ট-ইন বৈশিষ্ট্য রয়েছে যা এটিকে মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে HTTP নিয়ে কাজ করার জন্য একটি সুবিধাজনক পছন্দ করে তোলে। আসুন প্রধান বৈশিষ্ট্যগুলি দেখি।

স্বয়ংক্রিয় ডেটা রূপান্তর

অনুরোধ পাঠানোর সময়, Axios স্বয়ংক্রিয়ভাবে JSON.stringify ব্যবহার করে একটি JavaScript অবজেক্টকে JSON স্ট্রিংয়ে রূপান্তর করে। প্রতিক্রিয়া পাওয়ার সময়, লাইব্রেরি JSON পুনরায় অবজেক্টে পার্স করে। এটি ডেভেলপারকে ম্যানুয়াল সিরিয়ালাইজেশন এবং ডি-সিরিয়ালাইজেশন থেকে বাঁচায়।

CSRF সুরক্ষা

ব্রাউজার পরিবেশে, Axios স্বয়ংক্রিয়ভাবে কুকি থেকে XSRF-TOKEN হেডার যোগ করে, অ্যাপ্লিকেশনকে ক্রস-সাইট অনুরোধ জালিয়াতি থেকে রক্ষা করে। এটি করার জন্য, সার্ভারকে XSRF-TOKEN নামে একটি কুকিতে টোকেন পাঠাতে কনফিগার করাই যথেষ্ট।

টাইমআউট এবং অনুরোধ বাতিল

লাইব্রেরি timeout প্যারামিটারের মাধ্যমে টাইমআউট সেট করা এবং AbortController-এর মাধ্যমে অনুরোধ বাতিল সমর্থন করে। এটি অস্থির সংযোগযুক্ত মোবাইল অ্যাপ্লিকেশনে বিশেষভাবে গুরুত্বপূর্ণ, যেখানে আটকে থাকা অনুরোধ ব্যাটারি এবং ডেটা খরচ করে।

Axios ইনস্টল এবং কনফিগারেশন

Axios ইনস্টল যেকোনো প্যাকেজ ম্যানেজারের মাধ্যমে করা হয়। লাইব্রেরিটি npm রেজিস্ট্রিতে উপলব্ধ এবং Node.js এবং ব্রাউজার উভয় প্রজেক্টেই ব্যবহার করা যেতে পারে। TypeScript-এর জন্য, টাইপগুলি মূল প্যাকেজে অন্তর্ভুক্ত — অতিরিক্ত নির্ভরতার প্রয়োজন নেই।

ইনস্টলের পরে, আপনি বেস কনফিগারেশন সহ একটি ইনস্ট্যান্স তৈরি করতে পারেন: বেস URL, ডিফল্ট টাইমআউট, সাধারণ হেডার। এটি প্রতিটি অনুরোধে একই প্যারামিটার পুনরাবৃত্তি এড়াতে এবং HTTP ক্লায়েন্ট সেটিংস কেন্দ্রীয়ভাবে পরিচালনা করতে দেয়।

# npm-এর মাধ্যমে ইনস্টল করুন
npm install axios

# yarn-এর মাধ্যমে ইনস্টল করুন
yarn add axios

# pnpm-এর মাধ্যমে ইনস্টল করুন
pnpm add axios

কনফিগারেশন সহ ইনস্ট্যান্স তৈরি

প্রতিটি API পরিষেবার জন্য একটি পৃথক Axios ইনস্ট্যান্স তৈরি করার পরামর্শ দেওয়া হয়। এটি একটি বেস URL, স্ট্যান্ডার্ড হেডার এবং টাইমআউট সেট করতে দেয় যা প্রতিটি কলিতে পুনরাবৃত্তি না করেই এই ইনস্ট্যান্সের সমস্ত অনুরোধে প্রয়োগ হবে।

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Axios সহ কোড উদাহরণ

অনুরোধের উদাহরণ Axios ব্যবহারের প্রধান প্যাটার্ন দেখায়। সমস্ত উদাহরণ async/await সিনট্যাক্স ব্যবহার করে, যা .then() চেইনের তুলনায় অ্যাসিঙ্ক্রোনাস কোডকে আরও পঠনযোগ্য করে তোলে।

প্যারামিটার সহ GET অনুরোধ

সার্ভার থেকে ডেটা পেতে axios.get পদ্ধতি ব্যবহার করা হয়। অনুরোধের প্যারামিটারগুলি params অবজেক্টের মাধ্যমে পাঠানো হয়, যা স্বয়ংক্রিয়ভাবে কোয়েরি স্ট্রিংয়ে রূপান্তরিত হয়। প্রতিক্রিয়ায় data ফিল্ডে ডেটা, status-এ অবস্থা এবং headers-এ হেডার থাকে।

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('ব্যবহারকারীদের লোড করতে ত্রুটি', error);
    throw error;
  }
}

বডি সহ POST অনুরোধ

সার্ভারে ডেটা পাঠাতে axios.post ব্যবহার করা হয়। দ্বিতীয় আর্গুমেন্ট হল ডেটা সহ একটি অবজেক্ট, যা Axios স্বয়ংক্রিয়ভাবে JSON-এ সিরিয়ালাইজ করে। Content-Type ডিফল্টরূপে application/json-এ সেট করা হয়।

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

ইন্টারসেপ্টর

ইন্টারসেপ্টর হল মিডলওয়্যার ফাংশন যা প্রতিটি অনুরোধ বা প্রতিক্রিয়ার জন্য কার্যকর হয়। এগুলি প্রমাণীকরণ টোকেন যোগ করা, অনুরোধ লগ করা এবং ত্রুটিগুলি কেন্দ্রীয়ভাবে পরিচালনা করার অনুমতি দেয়। অনুরোধ ইন্টারসেপ্টর স্টোরেজ থেকে প্রাপ্ত টোকেন সহ Authorization হেডার যোগ করে।

// অনুরোধ ইন্টারসেপ্টর — প্রমাণীকরণ টোকেন যোগ করে
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// প্রতিক্রিয়া ইন্টারসেপ্টর — 401 ত্রুটিগুলি হ্যান্ডল করে
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Axios-এ ত্রুটি হ্যান্ডলিং

ত্রুটি হ্যান্ডলিং Axios-এ ব্যতিক্রম প্রক্রিয়ার উপর ভিত্তি করে। fetch-এর বিপরীতে, Axios স্বয়ংক্রিয়ভাবে HTTP ত্রুটিগুলি (4xx, 5xx) ধরে এবং সেগুলি catch ব্লকে পাঠায়। ত্রুটি অবজেক্টে সার্ভার প্রতিক্রিয়া, অনুরোধ এবং নির্বাহ প্রসঙ্গ সম্পর্কে তথ্য থাকে।

তিন ধরনের ত্রুটির মধ্যে পার্থক্য করা গুরুত্বপূর্ণ: সার্ভার প্রতিক্রিয়া ত্রুটি (response), অনুরোধ ত্রুটি (request) এবং কনফিগারেশন ত্রুটি (config)। প্রথমটি ঘটে যখন HTTP কল সফলভাবে কার্যকর হয় কিন্তু ত্রুটি কোড ফেরত দেয়, দ্বিতীয়টি ঘটে যখন সার্ভার থেকে কোনো প্রতিক্রিয়া নেই, এবং তৃতীয়টি ঘটে যখন অনুরোধ কনফিগারেশন ভুল হয়।

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('প্রতিক্রিয়া ত্রুটি', error.response.status);
      } else if (error.request) {
        console.warn('সার্ভার থেকে কোনো প্রতিক্রিয়া নেই');
      } else {
        console.warn('কনফিগারেশন ত্রুটি');
      }
    }
  }
}

Fetch API-এর সাথে Axios-এর তুলনা

Axios-এর তুলনা নেটিভ Fetch API-এর সাথে বুঝতে সাহায্য করে কখন প্রতিটি প্রযুক্তি উপযুক্ত। Fetch ব্রাউজারে নির্মিত API যার ইনস্টলেশনের প্রয়োজন নেই। Axios অতিরিক্ত বৈশিষ্ট্য সহ একটি থার্ড-পার্টি লাইব্রেরি। সাধারণ অনুরোধের জন্য fetch যথেষ্ট; ইন্টারসেপ্টর এবং কেন্দ্রীভূত ত্রুটি হ্যান্ডলিং সহ জটিল অ্যাপ্লিকেশনের জন্য Axios বেশি সুবিধাজনক।

Fetch HTTP ত্রুটিগুলিকে (4xx, 5xx) ব্যতিক্রম হিসাবে গণ্য করে না — response.ok চেক করতে হয়। Fetch-এ JSON পেতে দুটি .then() কল প্রয়োজন: response.json() তারপর ডেটা সহ Promise ফেরত দেয়। Axios এটি স্বয়ংক্রিয়ভাবে করে। Fetch অতিরিক্ত পলিফিল ছাড়া ফাইল আপলোড অগ্রগতি সমর্থন করে না। Axios-এ বিল্ট-ইন onUploadProgress এবং onDownloadProgress রয়েছে।

Node.js-এ, Fetch সংস্করণ 18 থেকে একটি পরীক্ষামূলক বৈশিষ্ট্য হিসাবে উপলব্ধ, যখন Axios Node.js 10 থেকে স্থিরভাবে কাজ করে। পুরানো Node.js সংস্করণ সমর্থন করে এমন প্রজেক্টের জন্য, পছন্দ Axios-এর পক্ষে স্পষ্ট। জটিল অনুরোধ প্রক্রিয়াকরণ ছাড়া আধুনিক ব্রাউজার প্রজেক্টের জন্য, fetch যথেষ্ট হতে পারে।