Axios: bu nima, HTTP so'rovlari va API bilan ishlash asoslari

Axios nima?

Axios brauzerdan va Node.js muhitidan HTTP so'rovlarini bajarish uchun JavaScript kutubxonasidir. U brauzerda XMLHttpRequest va Node.js da http moduli asosida qurilgan bo'lib, ikkala platforma uchun yagona API taqdim etadi.

Axiosning mahalliy fetch-dan asosiy ustunligi avtomatik JSON qayta ishlash, interceptorlarni qo'llab-quvvatlash va xatolar bilan qulayroq ishlashdir. Fetch-dan farqli o'laroq, Axios javobning JSON tanasini olish uchun ikkita .then chaqiruvini talab qilmaydi va HTTP xatolarida (4xx, 5xx) avtomatik ravishda istisno tashlaydi.

Kutubxona barcha asosiy HTTP metodlarini qo'llab-quvvatlaydi: GET, POST, PUT, DELETE, PATCH va HEAD. Ham oddiy loyihalarda, ham kuniga yuz minglab so'rovlar bilan katta korporativ ilovalarda ishlatilishi mumkin.

Axiosning asosiy xususiyatlari

• Promise API — barcha operatsiyalar Promise qaytaradi, asinxron kodni soddalashtiradi
• TypeScript qo'llab-quvvatlashi — barcha metodlar va konfiguratsiyalar uchun to'liq tiplash
• Interceptorlar — so'rov va javoblarni qayta ishlash uchun middleware
• Transformatsiya — kirish va chiqishda ma'lumotlarni avtomatik o'zgartirish

Axios arxitekturasi va ishlash prinsipi

Axios arxitekturasi adapterlar (adapters) konsepsiyasiga asoslanadi. Kutubxona transport qatlamini abstraktsiyalaydi: brauzerda XMLHttpRequest, Node.js da http yoki https moduli ishlatiladi. Bu bajarish muhitidan qat'i nazar yagona interfeysni ta'minlaydi.

Har bir so'rov so'rov yoki javob konfiguratsiyasini o'zgartirishi mumkin bo'lgan interceptorlar zanjiridan o'tadi. Interceptorlardan so'ng so'rov haqiqiy HTTP chaqiruvini bajaradigan adapterga uzatiladi. Javob keyin ilova kodiga yetib borishdan oldin javob interceptorlaridan o'tadi.

Axios so'rov hayot tsikli

1. Konfiguratsiya yaratish — metod, URL, sarlavhalar, so'rov tanasi
2. So'rov interceptor — konfiguratsiyani o'zgartirish, tokenlarni qo'shish
3. HTTP chaqiruvi — brauzer yoki Node.js adapteri orqali bajarish
4. Javob interceptor — javobni transformatsiya qilish, xatolarni boshqarish
5. Natijani qaytarish — Promise ma'lumotlar bilan hal qilinadi yoki rad etiladi

Axiosning asosiy imkoniyatlari

Axios mobil va veb ilovalarda HTTP bilan ishlash uchun uni qulay tanlovga aylantiradigan ko'plab o'rnatilgan imkoniyatlarni o'z ichiga oladi. Keling, ulardan eng muhimlarini ko'rib chiqaylik.

Ma'lumotlarni avtomatik transformatsiya qilish

So'rov yuborishda Axios avtomatik ravishda JavaScript obyektini JSON.stringify yordamida JSON satriga aylantiradi. Javobni qabul qilishda kutubxona JSON-ni yana obyektga tahlil qiladi. Bu dasturchini qo'lda serializatsiya va deserializatsiyadan xalos qiladi.

CSRF dan himoya

Brauzer muhitida Axios avtomatik ravishda cookie-dan XSRF-TOKEN sarlavhalarini qo'shadi, ilovani saytlararo so'rov qalbakilashtirishdan himoya qiladi. Buning uchun serverdan XSRF-TOKEN nomli cookie-da token yuborishni sozlash kifoya.

Taymout va so'rovlarni bekor qilish

Kutubxona timeout parametri orqali vaqt cheklovini o'rnatishni va AbortController orqali so'rovni bekor qilishni qo'llab-quvvatlaydi. Bu, ayniqsa, beqaror ulanishga ega mobil ilovalarda muhim, chunki to'xtab qolgan so'rovlar batareya va trafikni sarflaydi.

Axiosni o'rnatish va sozlash

Axiosni o'rnatish har qanday paket menejeri orqali amalga oshiriladi. Kutubxona npm reestrida mavjud va Node.js da ham, brauzer loyihalarida ham ulanishi mumkin. TypeScript uchun tiplar asosiy paketga kiritilgan, qo'shimcha bog'liqliklar talab qilinmaydi.

O'rnatishdan so'ng asosiy konfiguratsiya bilan namuna yaratish mumkin: asosiy URL, standart taymout, umumiy sarlavhalar. Bu har bir so'rovda bir xil parametrlarni takrorlamaslik va HTTP-klient sozlamalarini markazlashtirilgan holda boshqarish imkonini beradi.

# npm orqali o'rnatish
npm install axios

# yarn orqali o'rnatish
yarn add axios

# pnpm orqali o'rnatish
pnpm add axios

Konfiguratsiya bilan namuna yaratish

Har bir API xizmati uchun alohida Axios namunasini yaratish tavsiya etiladi. Bu ushbu namunaning barcha so'rovlariga qo'llaniladigan asosiy URL, standart sarlavhalar va taymoutni o'rnatish imkonini beradi.

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 bilan kod namunalari

So'rov namunalari Axiosdan foydalanishning asosiy naqshlarini ko'rsatadi. Barcha namunalar async/await sintaksisidan foydalanadi, bu asinxron kodni .then() zanjirlariga nisbatan o'qish osonroq qiladi.

Parametrlar bilan GET so'rovi

Serverdan ma'lumot olish uchun axios.get metodi ishlatiladi. So'rov parametrlari params obyekti orqali uzatiladi, u avtomatik ravishda query-string ga aylantiriladi. Javob data maydonida ma'lumotlarni, status da holatni va headers da sarlavhalarni o'z ichiga oladi.

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('Foydalanuvchilarni yuklash xatosi', error);
    throw error;
  }
}

Tanali POST so'rovi

Serverga ma'lumot yuborish uchun axios.post ishlatiladi. Ikkinchi argument Axios avtomatik ravishda JSON ga serializatsiya qiladigan ma'lumotlar obyektidir. Content-Type turi sukut bo'yicha application/json ga o'rnatiladi.

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

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

Interceptorlar

Interceptorlar har bir so'rov yoki javob uchun bajariladigan middleware funksiyalardir. Ular avtorizatsiya tokenlarini qo'shish, so'rovlarni loglash, xatolarni markazlashtirilgan holda boshqarish imkonini beradi. So'rov interceptor saqlash joyidan olingan token bilan Authorization sarlavhasini qo'shadi.

// So'rov interceptor — avtorizatsiya tokenini qo'shadi
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Javob interceptor — 401 xatolarini boshqaradi
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Axiosda xatolarni boshqarish

Xatolarni boshqarish Axiosda istisno mexanizmiga asoslanadi. Fetch-dan farqli o'laroq, Axios avtomatik ravishda HTTP xatolarini (4xx, 5xx) ushlaydi va ularni catch blokiga uzatadi. Xato obyekti server javobi, so'rov va bajarish konteksti haqida ma'lumotni o'z ichiga oladi.

Uch turdagi xatolarni farqlash muhim: server javob xatosi (response), so'rov xatosi (request) va konfiguratsiya xatosi (config). Birinchisi xato kodi bilan muvaffaqiyatli HTTP chaqiruvi paytida, ikkinchisi serverdan javob bo'lmaganda, uchinchisi so'rovning noto'g'ri konfiguratsiyasi paytida yuz beradi.

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('Javob xatosi', error.response.status);
      } else if (error.request) {
        console.warn('Serverdan javob yo'q');
      } else {
        console.warn('Konfiguratsiya xatosi');
      }
    }
  }
}

Axiosni Fetch API bilan solishtirish

Axiosni solishtirish mahalliy Fetch API bilan har bir texnologiya qachon mos kelishini tushunishga yordam beradi. Fetch o'rnatishni talab qilmaydigan brauzerga o'rnatilgan API. Axios qo'shimcha imkoniyatlarga ega uchinchi tomon kutubxonasidir. Oddiy so'rovlar uchun fetch yetarli, murakkab ilovalar uchun interceptorlar va markazlashtirilgan xato boshqaruvi bilan Axios qulayroq.

Fetch HTTP xatolarini (4xx, 5xx) istisno deb hisoblamaydi — response.ok ni tekshirish kerak. Fetch JSON olish uchun ikkita .then() chaqiruvini talab qiladi: response.json() keyin ma'lumotlar bilan Promise qaytaradi. Axios buni avtomatik bajaradi. Fetch qo'shimcha polyfillsiz fayl yuklash jarayonini qo'llab-quvvatlamaydi. Axios o'rnatilgan onUploadProgress va onDownloadProgress ga ega.

Node.js da Fetch 18-versiyadan boshlab eksperimental funksiya sifatida mavjud, Axios esa Node.js 10 dan boshlab barqaror ishlaydi. Eski Node.js versiyalarini qo'llab-quvvatlaydigan loyihalar uchun tanlov Axios foydasiga aniq. Murakkab so'rovlarni qayta ishlashsiz zamonaviy brauzer loyihalari uchun fetch yetarli bo'lishi mumkin.