Axios: τι είναι, αιτήματα HTTP και βασικές αρχές εργασίας με API

Τι είναι το Axios;

Το Axios είναι μια βιβλιοθήκη JavaScript για την εκτέλεση αιτημάτων HTTP από το πρόγραμμα περιήγησης και το περιβάλλον Node.js. Είναι χτισμένο πάνω από το XMLHttpRequest στο πρόγραμμα περιήγησης και το http module στο Node.js, παρέχοντας ένα ενοποιημένο API και για τις δύο πλατφόρμες.

Το κύριο πλεονέκτημα του Axios έναντι του native fetch είναι η αυτόματη επεξεργασία JSON, η υποστήριξη για ενδιάμεσους και η πιο βολική διαχείριση σφαλμάτων. Σε αντίθεση με το fetch, το Axios δεν απαιτεί δύο κλήσεις .then για να λάβει το JSON σώμα της απάντησης και πετάει αυτόματα εξαίρεση σε σφάλματα HTTP (4xx, 5xx).

Η βιβλιοθήκη υποστηρίζει όλες τις κύριες μεθόδους HTTP: GET, POST, PUT, DELETE, PATCH και HEAD. Μπορεί να χρησιμοποιηθεί τόσο σε απλά έργα όσο και σε μεγάλες επιχειρησιακές εφαρμογές με εκατοντάδες χιλιάδες αιτήματα καθημερινά.

Κύρια χαρακτηριστικά του Axios

• Promise API — όλες οι λειτουργίες επιστρέφουν Promise, απλοποιώντας τον ασύγχρονο κώδικα
• Υποστήριξη TypeScript — πλήρης τυποποίηση για όλες τις μεθόδους και διαμορφώσεις
• Ενδιάμεσοι — middleware για την επεξεργασία αιτημάτων και απαντήσεων
• Μετασχηματισμός — αυτόματη μετατροπή δεδομένων στην είσοδο και έξοδο

Αρχιτεκτονική του Axios και αρχή λειτουργίας

Η αρχιτεκτονική του Axios βασίζεται στην έννοια των προσαρμογέων (adapters). Η βιβλιοθήκη αφαιρεί το επίπεδο μεταφοράς: στο πρόγραμμα περιήγησης χρησιμοποιείται XMLHttpRequest, στο Node.js — το http ή https module. Αυτό επιτρέπει μια ενοποιημένη διεπαφή ανεξάρτητα από το περιβάλλον εκτέλεσης.

Κάθε αίτημα περνά μέσα από μια αλυσίδα ενδιάμεσων (interceptors) που μπορούν να τροποποιήσουν τη διαμόρφωση του αιτήματος ή της απάντησης. Μετά τους ενδιάμεσους, το αίτημα μεταβιβάζεται στον προσαρμογέα που εκτελεί την πραγματική κλήση HTTP. Η απάντηση στη συνέχεια περνά μέσα από τους ενδιάμεσους απάντησης προτού φτάσει στον κώδικα της εφαρμογής.

Κύκλος ζωής αιτήματος Axios

1. Δημιουργία διαμόρφωσης — μέθοδος, URL, κεφαλίδες, σώμα αιτήματος
2. Ενδιάμεσος αιτήματος — τροποποίηση διαμόρφωσης, προσθήκη token
3. Κλήση HTTP — εκτέλεση μέσω προσαρμογέα προγράμματος περιήγησης ή Node.js
4. Ενδιάμεσος απάντησης — μετασχηματισμός απάντησης, διαχείριση σφαλμάτων
5. Επιστροφή αποτελέσματος — το Promise επιλύεται με δεδομένα ή απορρίπτεται

Κύριες δυνατότητες του Axios

Το Axios περιλαμβάνει πολλές ενσωματωμένες δυνατότητες που το καθιστούν βολική επιλογή για εργασία με HTTP σε εφαρμογές κινητών και web. Ας εξετάσουμε τις σημαντικότερες.

Αυτόματος μετασχηματισμός δεδομένων

Κατά την αποστολή αιτήματος, το Axios μετατρέπει αυτόματα το αντικείμενο JavaScript σε συμβολοσειρά JSON χρησιμοποιώντας JSON.stringify. Κατά τη λήψη απάντησης, η βιβλιοθήκη αναλύει το JSON πίσω σε αντικείμενο. Αυτό απαλλάσσει τον προγραμματιστή από τη μη αυτόματη σειριοποίηση και αποσειριοποίηση δεδομένων.

Προστασία από CSRF

Στο περιβάλλον προγράμματος περιήγησης, το Axios προσθέτει αυτόματα κεφαλίδες XSRF-TOKEN από το cookie, προστατεύοντας την εφαρμογή από πλαστογραφία αιτημάτων μεταξύ ιστοτόπων. Για αυτό, αρκεί να διαμορφώσετε τον διακομιστή να στέλνει το token σε ένα cookie με όνομα XSRF-TOKEN.

Timeouts και ακύρωση αιτημάτων

Η βιβλιοθήκη υποστηρίζει τον ορισμό timeout μέσω της παραμέτρου timeout και την ακύρωση αιτήματος μέσω AbortController. Αυτό είναι ιδιαίτερα σημαντικό σε εφαρμογές κινητών με ασταθή σύνδεση, όπου τα κολλημένα αιτήματα καταναλώνουν μπαταρία και δεδομένα.

Εγκατάσταση και διαμόρφωση του Axios

Η εγκατάσταση του Axios γίνεται μέσω οποιουδήποτε διαχειριστή πακέτων. Η βιβλιοθήκη είναι διαθέσιμη στο μητρώο npm και μπορεί να συνδεθεί τόσο σε Node.js όσο και σε έργα προγράμματος περιήγησης. Για TypeScript, οι τύποι περιλαμβάνονται στο κύριο πακέτο, δεν απαιτούνται πρόσθετες εξαρτήσεις.

Μετά την εγκατάσταση, μπορείτε να δημιουργήσετε μια παρουσία με βασική διαμόρφωση: βασικό URL, προεπιλεγμένο timeout, κοινές κεφαλίδες. Αυτό σας επιτρέπει να μην επαναλαμβάνετε τις ίδιες παραμέτρους σε κάθε αίτημα και να διαχειρίζεστε κεντρικά τις ρυθμίσεις του HTTP client.

# Εγκατάσταση μέσω npm
npm install axios

# Εγκατάσταση μέσω yarn
yarn add axios

# Εγκατάσταση μέσω pnpm
pnpm add axios

Δημιουργία παρουσίας με διαμόρφωση

Συνιστάται η δημιουργία ξεχωριστής παρουσίας Axios για κάθε υπηρεσία API. Αυτό επιτρέπει τον ορισμό βασικού URL, τυπικών κεφαλίδων και timeout που θα εφαρμόζονται σε όλα τα αιτήματα αυτής της παρουσίας χωρίς επανάληψη σε κάθε κλήση.

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;
}

Ενδιάμεσοι (Interceptors)

Οι ενδιάμεσοι είναι συναρτήσεις middleware που εκτελούνται για κάθε αίτημα ή απάντηση. Επιτρέπουν την προσθήκη token εξουσιοδότησης, την καταγραφή αιτημάτων, την κεντρική διαχείριση σφαλμάτων. Ο ενδιάμεσος αιτήματος προσθέτει την κεφαλίδα Authorization με token που λαμβάνεται από την αποθήκευση.

// Ενδιάμεσος αιτήματος — προσθέτει token εξουσιοδότησης
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 με το native Fetch API βοηθά να κατανοήσετε πότε κάθε τεχνολογία είναι κατάλληλη. Το Fetch είναι ένα ενσωματωμένο API προγράμματος περιήγησης που δεν απαιτεί εγκατάσταση. Το Axios είναι μια βιβλιοθήκη τρίτου μέρους με πρόσθετες δυνατότητες. Για απλά αιτήματα, το fetch είναι αρκετό, για σύνθετες εφαρμογές με ενδιάμεσους και κεντρική διαχείριση σφαλμάτων, το Axios είναι πιο βολικό.

Το Fetch δεν θεωρεί τα σφάλματα HTTP (4xx, 5xx) ως εξαιρέσεις — πρέπει να ελέγξετε το response.ok. Το Fetch απαιτεί δύο κλήσεις .then() για να λάβει JSON: το response.json() στη συνέχεια επιστρέφει Promise με δεδομένα. Το Axios το κάνει αυτόματα. Το Fetch δεν υποστηρίζει πρόοδο μεταφόρτωσης αρχείων χωρίς πρόσθετο polyfill. Το Axios έχει ενσωματωμένα onUploadProgress και onDownloadProgress.

Στο Node.js, το Fetch είναι διαθέσιμο από την έκδοση 18 ως πειραματική λειτουργία, ενώ το Axios λειτουργεί σταθερά από το Node.js 10. Για έργα που υποστηρίζουν παλαιότερες εκδόσεις Node.js, η επιλογή είναι προφανής υπέρ του Axios. Για σύγχρονα έργα προγράμματος περιήγησης χωρίς σύνθετη επεξεργασία αιτημάτων, το fetch μπορεί να είναι αρκετό.