Axios: bu nədir, HTTP sorğuları və API ilə işin əsasları

Axios nədir?

Axios brauzerdən və Node.js mühitindən HTTP sorğuları yerinə yetirmək üçün JavaScript kitabxanasıdır. Brauzerdə XMLHttpRequest və Node.js-də http modulu üzərində qurulmuşdur, hər iki platforma üçün vahid API təqdim edir.

Axios-un yerli fetch-dən əsas üstünlüyü avtomatik JSON emalı, interceptorların dəstəyi və xətalar ilə daha rahat işdir. Fetch-dən fərqli olaraq, Axios cavabın JSON gövdəsini almaq üçün iki .then çağırışı tələb etmir və HTTP xətalarında (4xx, 5xx) avtomatik olaraq istisna atır.

Kitabxana bütün əsas HTTP metodlarını dəstəkləyir: GET, POST, PUT, DELETE, PATCH və HEAD. Həm sadə layihələrdə, həm də gündəlik yüz minlərlə sorğu ilə böyük korporativ tətbiqlərdə istifadə edilə bilər.

Axios-un əsas xüsusiyyətləri

• Promise API — bütün əməliyyatlar Promise qaytarır, asinxron kodu sadələşdirir
• TypeScript dəstəyi — bütün metodlar və konfiqurasiyalar üçün tam tipləşdirmə
• Interceptorlar — sorğu və cavabların emalı üçün middleware
• Transformasiya — giriş və çıxışda məlumatların avtomatik çevrilməsi

Axios arxitekturası və iş prinsipi

Axios arxitekturası adapterlər konsepsiyasına əsaslanır. Kitabxana nəqliyyat qatını abstraksiya edir: brauzerdə XMLHttpRequest, Node.js-də http və ya https modulu istifadə olunur. Bu, icra mühitindən asılı olmayaraq vahid interfeys təmin edir.

Hər sorğu sorğu və ya cavab konfiqurasiyasını dəyişə bilən interceptorlar zəncirindən keçir. Interceptorlardan sonra sorğu real HTTP çağırışını yerinə yetirən adapterə ötürülür. Cavab daha sonra tətbiq koduna çatmazdan əvvəl cavab interceptorlarından keçir.

Axios sorğu həyat dövrü

1. Konfiqurasiyanın yaradılması — metod, URL, başlıqlar, sorğu gövdəsi
2. Sorğu interceptoru — konfiqurasiyanın dəyişdirilməsi, tokenlərin əlavə edilməsi
3. HTTP çağırışı — brauzer və ya Node.js adapteri vasitəsilə icra
4. Cavab interceptoru — cavabın transformasiyası, xətaların idarə edilməsi
5. Nəticənin qaytarılması — Promise məlumatlarla həll edilir və ya rədd edilir

Axios-un əsas imkanları

Axios mobil və veb tətbiqlərdə HTTP ilə iş üçün onu rahat seçim edən bir çox daxili imkanlar ehtiva edir. Onlardan əsaslarını nəzərdən keçirək.

Məlumatların avtomatik transformasiyası

Sorğu göndərərkən Axios avtomatik olaraq JavaScript obyektini JSON.stringify vasitəsilə JSON sətri çevirir. Cavab qəbul edərkən kitabxana JSON-u yenidən obyektə pars edir. Bu, proqramçını əl ilə serializasiya və deserializasiyadan azad edir.

CSRF-dən qorunma

Brauzer mühitində Axios avtomatik olaraq cookie-dən XSRF-TOKEN başlıqlarını əlavə edir, tətbiqi saytlararası sorğu saxtalaşdırmasından qoruyur. Bunun üçün serveri XSRF-TOKEN adlı cookie-də token göndərmək üçün konfiqurasiya etmək kifayətdir.

Timeout və sorğuların ləğvi

Kitabxana timeout parametri vasitəsilə vaxt məhdudiyyətinin təyin edilməsini və AbortController vasitəsilə sorğunun ləğvini dəstəkləyir. Bu, qeyri-sabit bağlantısı olan mobil tətbiqlərdə xüsusilə vacibdir, çünki dayanmış sorğular batareya və trafik sərf edir.

Axios-un quraşdırılması və konfiqurasiyası

Axios-un quraşdırılması istənilən paket meneceri vasitəsilə həyata keçirilir. Kitabxana npm reyestrində mövcuddur və həm Node.js, həm də brauzer layihələrində qoşula bilər. TypeScript üçün tiplər əsas paketə daxildir, əlavə asılılıqlar tələb olunmur.

Quraşdırmadan sonra əsas konfiqurasiya ilə nümunə yaradıla bilər: əsas URL, standart timeout, ümumi başlıqlar. Bu, hər sorğuda eyni parametrləri təkrarlamamağa və HTTP-klientinin parametrlərini mərkəzləşdirilmiş şəkildə idarə etməyə imkan verir.

# npm vasitəsilə quraşdırma
npm install axios

# yarn vasitəsilə quraşdırma
yarn add axios

# pnpm vasitəsilə quraşdırma
pnpm add axios

Konfiqurasiya ilə nümunənin yaradılması

Hər API xidməti üçün ayrıca Axios nümunəsi yaratmaq tövsiyə olunur. Bu, həmin nümunənin bütün sorğularına tətbiq ediləcək əsas URL, standart başlıqlar və timeout təyin etməyə imkan verir.

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 ilə kod nümunələri

Sorğu nümunələri Axios-un əsas istifadə nümunələrini göstərir. Bütün nümunələr async/await sintaksisindən istifadə edir ki, bu da asinxron kodu .then() zəncirləri ilə müqayisədə daha oxunaqlı edir.

Parametrlərlə GET sorğusu

Serverdən məlumat almaq üçün axios.get metodu istifadə olunur. Sorğu parametrləri params obyekti vasitəsilə ötürülür, avtomatik olaraq query-string-ə çevrilir. Cavab data sahəsində məlumatları, status sahəsində statusu və headers sahəsində başlıqları ehtiva edir.

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('İstifadəçilərin yüklənməsi xətası', error);
    throw error;
  }
}

Gövdə ilə POST sorğusu

Serverə məlumat göndərmək üçün axios.post istifadə olunur. İkinci arqument olaraq Axios-un avtomatik JSON-a serializasiya etdiyi məlumat obyekti ötürülür. Content-Type varsayılan olaraq application/json təyin edilir.

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 hər sorğu və ya cavab üçün icra olunan middleware funksiyalarıdır. Onlar avtorizasiya tokenləri əlavə etməyə, sorğuları loglamağa, xətaları mərkəzləşdirilmiş şəkildə idarə etməyə imkan verir. Sorğu interceptoru depodan götürülmüş token ilə Authorization başlığını əlavə edir.

// Sorğu interceptoru — avtorizasiya tokeni əlavə edir
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Cavab interceptoru — 401 xətalarını idarə edir
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Axios-da xətaların idarə edilməsi

Xətaların idarə edilməsi Axios-da istisna mexanizminə əsaslanır. Fetch-dən fərqli olaraq, Axios avtomatik olaraq HTTP xətalarını (4xx, 5xx) tutur və onları catch blokuna ötürür. Xəta obyekti server cavabı, sorğu və icra konteksti haqqında məlumat ehtiva edir.

Üç növ xətanı fərqləndirmək vacibdir: server cavab xətası (response), sorğu xətası (request) və konfiqurasiya xətası (config). Birincisi xəta kodu ilə uğurlu HTTP çağırışı zamanı, ikincisi serverdən cavab olmadıqda, üçüncüsü sorğunun səhv konfiqurasiyası zamanı baş verir.

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('Cavab xətası', error.response.status);
      } else if (error.request) {
        console.warn('Serverdən cavab yoxdur');
      } else {
        console.warn('Konfiqurasiya xətası');
      }
    }
  }
}

Axios-un Fetch API ilə müqayisəsi

Axios-un müqayisəsi yerli Fetch API ilə hər texnologiyanın nə vaxt uyğun olduğunu anlamağa kömək edir. Fetch quraşdırma tələb etməyən brauzerə daxili API-dir. Axios əlavə imkanları olan üçüncü tərəf kitabxanasıdır. Sadə sorğular üçün fetch kifayətdir, mürəkkəb tətbiqlər üçün interceptorlar və mərkəzləşdirilmiş xəta idarəetməsi ilə Axios daha rahatdır.

Fetch HTTP xətalarını (4xx, 5xx) istisna hesab etmir — response.ok yoxlanılmalıdır. Fetch JSON əldə etmək üçün iki .then() çağırışı tələb edir: response.json() daha sonra məlumatlarla Promise qaytarır. Axios bunu avtomatik edir. Fetch əlavə polyfill olmadan fayl yükləmə gedişatını dəstəkləmir. Axios-un daxili onUploadProgress və onDownloadProgress funksiyaları var.

Node.js-də Fetch 18-ci versiyadan etibarən eksperimental funksiya kimi mövcuddur, Axios isə Node.js 10-dan etibarən sabit işləyir. Köhnə Node.js versiyalarını dəstəkləyən layihələr üçün seçim Axios-un lehinə aşkardır. Mürəkkəb sorğu emalı olmayan müasir brauzer layihələri üçün fetch kifayət edə bilər.