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 آبجیکٹ کے ذریعے بھیجے جاتے ہیں، جو خود بخود query string میں تبدیل ہو جاتا ہے۔ جواب میں 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('ترتیب کی خرابی');
      }
    }
  }
}

Axios کا Fetch API سے موازنہ

Axios کا نیٹوو Fetch API سے موازنہ یہ سمجھنے میں مدد دیتا ہے کہ ہر ٹیکنالوجی کب موزوں ہے۔ Fetch براؤزر میں built-in API ہے جسے انسٹال کرنے کی ضرورت نہیں ہے۔ Axios اضافی خصوصیات والی تیسری پارٹی کی لائبریری ہے۔ سادہ درخواستوں کے لیے fetch کافی ہے؛ انٹرسیپٹرز اور مرکزی ایرر ہینڈلنگ والی پیچیدہ ایپلیکیشنز کے لیے Axios زیادہ آسان ہے۔

Fetch HTTP ایررز (4xx, 5xx) کو استثنا نہیں مانتا — آپ کو response.ok چیک کرنا ہوگا۔ Fetch کو JSON حاصل کرنے کے لیے دو .then() کالز کی ضرورت ہوتی ہے: response.json() پھر ڈیٹا کے ساتھ Promise لوٹاتا ہے۔ Axios یہ خود بخود کرتا ہے۔ Fetch اضافی polyfills کے بغیر فائل اپ لوڈ پیش رفت کو سپورٹ نہیں کرتا۔ Axios میں built-in onUploadProgress اور onDownloadProgress ہیں۔

Node.js میں، Fetch ورژن 18 سے ایک تجرباتی فیچر کے طور پر دستیاب ہے، جبکہ Axios Node.js 10 سے مستحکم طور پر کام کرتا ہے۔ پرانے Node.js ورژنز کو سپورٹ کرنے والے پروجیکٹس کے لیے، انتخاب واضح طور پر Axios کے حق میں ہے۔ جدید براؤزر پروجیکٹس کے لیے پیچیدہ درخواست پروسیسنگ کے بغیر، fetch کافی ہو سکتا ہے۔