Axios: ano ito, mga HTTP request at mga batayan ng paggamit ng API

Ano ang Axios?

Axios ay isang JavaScript library para sa pagsasagawa ng mga HTTP request mula sa browser at Node.js environment. Ito ay binuo sa ibabaw ng XMLHttpRequest sa browser at http module sa Node.js, na nagbibigay ng pinag-isang API para sa parehong platform.

Ang pangunahing bentahe ng Axios kumpara sa native fetch ay awtomatikong pagproseso ng JSON, suporta para sa mga interceptor, at mas maginhawang paghawak ng error. Hindi tulad ng fetch, ang Axios ay hindi nangangailangan ng dalawang .then na tawag para makuha ang JSON body ng response at awtomatikong nagtatapon ng exception sa mga HTTP error (4xx, 5xx).

Sinusuportahan ng library ang lahat ng pangunahing HTTP method: GET, POST, PUT, DELETE, PATCH at HEAD. Maaari itong magamit sa mga simpleng proyekto at sa malalaking corporate application na may daan-daang libong request araw-araw.

Mga pangunahing katangian ng Axios

• Promise API — lahat ng operasyon ay nagbabalik ng Promise, pinapasimple ang asynchronous code
• Suporta sa TypeScript — kumpletong typing para sa lahat ng method at configuration
• Mga Interceptor — middleware para sa pagproseso ng mga request at response
• Transformasyon — awtomatikong conversion ng data sa input at output

Arkitektura ng Axios at prinsipyo ng paggana

Ang arkitektura ng Axios ay nakabatay sa konsepto ng mga adaptor (adapters). Ina-abstract ng library ang transport layer: sa browser ginagamit ang XMLHttpRequest, sa Node.js — ang http o https module. Ito ay nagbibigay-daan sa isang pinag-isang interface anuman ang execution environment.

Ang bawat request ay dumadaan sa isang chain ng mga interceptor na maaaring magbago ng configuration ng request o response. Pagkatapos ng mga interceptor, ang request ay ipinapasa sa adapter na nagsasagawa ng aktwal na HTTP call. Ang response pagkatapos ay dumadaan sa mga response interceptor bago makarating sa application code.

Lifecycle ng request ng Axios

1. Paglikha ng configuration — method, URL, headers, body ng request
2. Request interceptor — pagbabago ng configuration, pagdaragdag ng mga token
3. HTTP call — execution sa pamamagitan ng browser o Node.js adapter
4. Response interceptor — transformasyon ng response, paghawak ng error
5. Pagbabalik ng resulta — ang Promise ay na-resolve gamit ang data o nare-reject

Mga pangunahing kakayahan ng Axios

Axios ay may kasamang maraming built-in na kakayahan na ginagawa itong maginhawang pagpipilian para sa paggamit ng HTTP sa mobile at web application. Tingnan natin ang mga pinakamahalaga.

Awtomatikong transformasyon ng data

Kapag nagpapadala ng request, awtomatikong kino-convert ng Axios ang JavaScript object sa JSON string gamit ang JSON.stringify. Kapag tumatanggap ng response, nire-parse ng library ang JSON pabalik sa object. Ito ay nagliligtas sa developer mula sa manu-manong serialization at deserialization ng data.

Proteksyon laban sa CSRF

Sa browser environment, awtomatikong nagdaragdag ang Axios ng mga XSRF-TOKEN header mula sa cookie, na pinoprotektahan ang application laban sa cross-site request forgery. Para dito, sapat na i-configure ang server na magpadala ng token sa isang cookie na may pangalang XSRF-TOKEN.

Timeout at pagkansela ng mga request

Sinusuportahan ng library ang pagtatakda ng timeout sa pamamagitan ng parameter na timeout at pagkansela ng request sa pamamagitan ng AbortController. Ito ay lalong mahalaga sa mga mobile application na may hindi matatag na koneksyon, kung saan ang mga natigil na request ay kumokonsumo ng baterya at data.

Pag-install at configuration ng Axios

Ang pag-install ng Axios ay ginagawa sa pamamagitan ng anumang package manager. Ang library ay available sa npm registry at maaaring ikonekta pareho sa Node.js at sa mga browser project. Para sa TypeScript, ang mga type ay kasama sa pangunahing package, hindi kinakailangan ang mga karagdagang dependency.

Pagkatapos ng pag-install, maaari kang lumikha ng isang instance na may pangunahing configuration: base URL, default timeout, mga karaniwang header. Ito ay nagbibigay-daan na hindi mo na ulitin ang parehong mga parameter sa bawat request at pamahalaan ang mga setting ng HTTP client nang centralisado.

# Pag-install sa pamamagitan ng npm
npm install axios

# Pag-install sa pamamagitan ng yarn
yarn add axios

# Pag-install sa pamamagitan ng pnpm
pnpm add axios

Paglikha ng instance na may configuration

Inirerekomenda na gumawa ng hiwalay na Axios instance para sa bawat API service. Ito ay nagbibigay-daan sa pagtatakda ng base URL, karaniwang header, at timeout na ilalapat sa lahat ng request ng instance na ito nang hindi inuulit sa bawat tawag.

import axios from 'axios';

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

Mga halimbawa ng code gamit ang Axios

Mga halimbawa ng request ay nagpapakita ng mga pangunahing pattern ng paggamit ng Axios. Lahat ng halimbawa ay gumagamit ng async/await syntax na ginagawang mas nababasa ang asynchronous code kumpara sa .then() chains.

GET request na may mga parameter

Para sa pagkuha ng data mula sa server, ginagamit ang axios.get method. Ang mga parameter ng request ay ipinapasa sa pamamagitan ng params object, na awtomatikong nagiging query-string. Ang response ay naglalaman ng data sa field na data, status sa status, at headers sa 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 sa pag-load ng mga user', error);
    throw error;
  }
}

POST request na may body

Para sa pagpapadala ng data sa server, ginagamit ang axios.post. Ang pangalawang argumento ay isang object na may data na awtomatikong sine-serialize ng Axios sa JSON. Ang content type na Content-Type ay nakatakda bilang default sa 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;
}

Mga Interceptor

Ang mga interceptor ay mga middleware function na isinasagawa para sa bawat request o response. Pinapayagan nila ang pagdaragdag ng mga authorization token, pag-log ng mga request, centralisadong paghawak ng error. Ang request interceptor ay nagdaragdag ng Authorization header na may token na kinuha mula sa storage.

// Request interceptor — nagdaragdag ng authorization token
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

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

Paghawak ng error sa Axios

Ang paghawak ng error sa Axios ay nakabatay sa exception mechanism. Hindi tulad ng fetch, awtomatikong nahuhuli ng Axios ang mga HTTP error (4xx, 5xx) at ipinapasa ang mga ito sa catch block. Ang error object ay naglalaman ng impormasyon tungkol sa server response, request, at execution context.

Mahalagang makilala ang tatlong uri ng error: server response error (response), request error (request), at configuration error (config). Ang una ay nangyayari sa matagumpay na HTTP call na may error code, ang pangalawa — kapag walang response mula sa server, ang pangatlo — kapag mali ang configuration ng request.

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 sa response', error.response.status);
      } else if (error.request) {
        console.warn('Walang response mula sa server');
      } else {
        console.warn('Error sa configuration');
      }
    }
  }
}

Paghahambing ng Axios sa Fetch API

Ang paghahambing ng Axios sa native na Fetch API ay tumutulong na maunawaan kung kailan ang bawat teknolohiya ay angkop. Ang Fetch ay isang built-in na browser API na hindi nangangailangan ng pag-install. Ang Axios ay isang third-party library na may mga karagdagang kakayahan. Para sa mga simpleng request, sapat na ang fetch, para sa mga kumplikadong application na may mga interceptor at centralisadong paghawak ng error, mas maginhawa ang Axios.

Hindi itinuturing ng Fetch ang mga HTTP error (4xx, 5xx) bilang exceptions — kailangan mong suriin ang response.ok. Ang Fetch ay nangangailangan ng dalawang .then() na tawag para makakuha ng JSON: ang response.json() pagkatapos ay nagbabalik ng Promise na may data. Ginagawa ito ng Axios nang awtomatiko. Hindi sinusuportahan ng Fetch ang progreso ng pag-upload ng file nang walang karagdagang polyfill. Ang Axios ay may built-in na onUploadProgress at onDownloadProgress.

Sa Node.js, ang Fetch ay available mula sa bersyon 18 bilang isang experimental na feature, habang ang Axios ay gumagana nang matatag mula sa Node.js 10. Para sa mga proyektong sumusuporta sa mas lumang bersyon ng Node.js, ang pagpipilian ay malinaw na pabor sa Axios. Para sa mga modernong browser project na walang kumplikadong pagproseso ng request, maaaring sapat na ang fetch.