Axios: nó là gì, yêu cầu HTTP và kiến thức cơ bản về làm việc với API

Axios là gì?

Axios là một thư viện JavaScript được thiết kế để thực hiện các yêu cầu HTTP từ trình duyệt và môi trường Node.js. Nó được xây dựng trên XMLHttpRequest trong trình duyệt và mô-đun http trong Node.js, cung cấp một API thống nhất cho cả hai nền tảng.

Ưu điểm chính của Axios so với fetch gốc là xử lý JSON tự động, hỗ trợ interceptor và xử lý lỗi thuận tiện hơn. Không giống fetch, Axios không yêu cầu hai lần gọi .then để lấy nội dung phản hồi JSON và tự động ném ngoại lệ khi có lỗi HTTP (4xx, 5xx).

Thư viện hỗ trợ tất cả các phương thức HTTP chính: GET, POST, PUT, DELETE, PATCH và HEAD. Nó có thể được sử dụng cả trong các dự án đơn giản và các ứng dụng doanh nghiệp lớn với hàng trăm nghìn yêu cầu hàng ngày.

Đặc điểm chính của Axios

• Promise API — tất cả các thao tác trả về Promise, đơn giản hóa mã bất đồng bộ
• Hỗ trợ TypeScript — phân loại đầy đủ cho tất cả các phương thức và cấu hình
• Interceptor — middleware để xử lý yêu cầu và phản hồi
• Chuyển đổi — chuyển đổi dữ liệu tự động khi đầu vào và đầu ra

Kiến trúc Axios và nguyên lý hoạt động

Kiến trúc Axios dựa trên khái niệm bộ chuyển đổi (adapters). Thư viện trừu tượng hóa lớp truyền tải: nó sử dụng XMLHttpRequest trong trình duyệt và mô-đun http hoặc https trong Node.js. Điều này cung cấp một giao diện duy nhất bất kể môi trường thực thi.

Mỗi yêu cầu đi qua một chuỗi các interceptor có thể sửa đổi cấu hình yêu cầu hoặc phản hồi. Sau các interceptor, yêu cầu được chuyển đến bộ chuyển đổi, thực hiện cuộc gọi HTTP thực tế. Phản hồi sau đó đi qua các interceptor phản hồi trước khi đến mã ứng dụng.

Vòng đời yêu cầu Axios

1. Tạo cấu hình — phương thức, URL, tiêu đề, nội dung yêu cầu
2. Interceptor yêu cầu — sửa đổi cấu hình, thêm token
3. Cuộc gọi HTTP — thực thi qua bộ chuyển đổi trình duyệt hoặc Node.js
4. Interceptor phản hồi — chuyển đổi phản hồi, xử lý lỗi
5. Trả về kết quả — Promise được giải quyết với dữ liệu hoặc bị từ chối

Các tính năng chính của Axios

Axios bao gồm nhiều tính năng tích hợp sẵn giúp nó trở thành lựa chọn thuận tiện để làm việc với HTTP trong các ứng dụng di động và web. Hãy xem các tính năng chính.

Chuyển đổi dữ liệu tự động

Khi gửi yêu cầu, Axios tự động chuyển đổi đối tượng JavaScript thành chuỗi JSON bằng JSON.stringify. Khi nhận phản hồi, thư viện phân tích JSON trở lại thành đối tượng. Điều này giúp nhà phát triển không cần tuần tự hóa và giải tuần tự hóa dữ liệu thủ công.

Bảo vệ CSRF

Trong môi trường trình duyệt, Axios tự động thêm tiêu đề XSRF-TOKEN từ cookie, bảo vệ ứng dụng khỏi giả mạo yêu cầu chéo trang. Để làm điều này, chỉ cần cấu hình máy chủ gửi token trong cookie có tên XSRF-TOKEN.

Thời gian chờ và hủy yêu cầu

Thư viện hỗ trợ đặt thời gian chờ qua tham số timeout và hủy yêu cầu qua AbortController. Điều này đặc biệt quan trọng trong các ứng dụng di động có kết nối không ổn định, nơi các yêu cầu bị treo tiêu tốn pin và dữ liệu.

Cài đặt và cấu hình Axios

Cài đặt Axios được thực hiện qua bất kỳ trình quản lý gói nào. Thư viện có sẵn trong kho npm và có thể được sử dụng cả trong dự án Node.js và trình duyệt. Đối với TypeScript, các kiểu được bao gồm trong gói chính — không yêu cầu phụ thuộc bổ sung.

Sau khi cài đặt, bạn có thể tạo một thực thể với cấu hình cơ bản: URL gốc, thời gian chờ mặc định, tiêu đề chung. Điều này tránh phải lặp lại các tham số giống nhau trong mỗi yêu cầu và cho phép quản lý tập trung cài đặt HTTP client.

# Cài đặt qua npm
npm install axios

# Cài đặt qua yarn
yarn add axios

# Cài đặt qua pnpm
pnpm add axios

Tạo thực thể với cấu hình

Nên tạo một thực thể Axios riêng cho mỗi dịch vụ API. Điều này cho phép đặt URL gốc, tiêu đề chuẩn và thời gian chờ sẽ áp dụng cho tất cả các yêu cầu của thực thể này mà không cần lặp lại trong mỗi lần gọi.

import axios from 'axios';

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

Ví dụ mã với Axios

Các ví dụ yêu cầu cho thấy các mẫu sử dụng chính của Axios. Tất cả các ví dụ đều sử dụng cú pháp async/await, giúp mã bất đồng bộ dễ đọc hơn so với chuỗi .then().

Yêu cầu GET với tham số

Để lấy dữ liệu từ máy chủ, phương thức axios.get được sử dụng. Các tham số yêu cầu được truyền qua đối tượng params, tự động chuyển đổi thành chuỗi truy vấn. Phản hồi chứa dữ liệu trong trường data, trạng thái trong status và tiêu đề trong 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('Lỗi tải người dùng', error);
    throw error;
  }
}

Yêu cầu POST với nội dung

Để gửi dữ liệu đến máy chủ, axios.post được sử dụng. Đối số thứ hai là một đối tượng với dữ liệu, mà Axios tự động tuần tự hóa thành JSON. Content-Type được đặt thành application/json theo mặc định.

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

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

Interceptor

Interceptor là các hàm middleware thực thi cho mỗi yêu cầu hoặc phản hồi. Chúng cho phép thêm token xác thực, ghi log yêu cầu và xử lý lỗi tập trung. Một interceptor yêu cầu thêm tiêu đề Authorization với token được lấy từ bộ nhớ lưu trữ.

// Interceptor yêu cầu — thêm token xác thực
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Interceptor phản hồi — xử lý lỗi 401
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Xử lý lỗi trong Axios

Xử lý lỗi trong Axios dựa trên cơ chế ngoại lệ. Không giống fetch, Axios tự động bắt các lỗi HTTP (4xx, 5xx) và chuyển chúng đến khối catch. Đối tượng lỗi chứa thông tin về phản hồi của máy chủ, yêu cầu và ngữ cảnh thực thi.

Quan trọng là phân biệt ba loại lỗi: lỗi phản hồi máy chủ (response), lỗi yêu cầu (request) và lỗi cấu hình (config). Loại đầu tiên xảy ra khi cuộc gọi HTTP được thực thi thành công nhưng trả về mã lỗi, loại thứ hai khi không có phản hồi từ máy chủ, và loại thứ ba khi cấu hình yêu cầu không đúng.

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('Lỗi phản hồi', error.response.status);
      } else if (error.request) {
        console.warn('Không có phản hồi từ máy chủ');
      } else {
        console.warn('Lỗi cấu hình');
      }
    }
  }
}

So sánh Axios với Fetch API

So sánh Axios với Fetch API gốc giúp xác định khi nào mỗi công nghệ phù hợp. Fetch là API tích hợp trong trình duyệt không cần cài đặt. Axios là thư viện bên thứ ba với các tính năng bổ sung. Đối với các yêu cầu đơn giản, fetch là đủ; đối với các ứng dụng phức tạp với interceptor và xử lý lỗi tập trung, Axios thuận tiện hơn.

Fetch không coi lỗi HTTP (4xx, 5xx) là ngoại lệ — bạn cần kiểm tra response.ok. Fetch yêu cầu hai lần gọi .then() để lấy JSON: response.json() sau đó trả về Promise với dữ liệu. Axios thực hiện điều này tự động. Fetch không hỗ trợ tiến trình tải tệp lên mà không có polyfill bổ sung. Axios có onUploadProgress và onDownloadProgress tích hợp sẵn.

Trong Node.js, Fetch có sẵn từ phiên bản 18 như một tính năng thử nghiệm, trong khi Axios hoạt động ổn định từ Node.js 10. Đối với các dự án hỗ trợ phiên bản Node.js cũ, lựa chọn rõ ràng là Axios. Đối với các dự án trình duyệt hiện đại không có xử lý yêu cầu phức tạp, fetch có thể đủ.