Axios: Hướng Dẫn Toàn Diện Cho Người Mới Bắt Đầu (Cập Nhật 2024)

Axios là một HTTP client dựa trên Promise, mạnh mẽ và linh hoạt, hỗ trợ xây dựng các ứng dụng API từ đơn giản đến phức tạp, có thể sử dụng cả ở trình duyệt và Node.js. Việc tạo HTTP request để lấy hoặc lưu trữ dữ liệu là một trong những nhiệm vụ phổ biến của ứng dụng Javascript khi giao tiếp với server.

Trước đây, jQuery là một thư viện phổ biến để tương tác với các browser API, giúp code rõ ràng và mạch lạc hơn, đồng thời giảm thiểu sự khác biệt giữa các trình duyệt. Tuy nhiên, khi các native DOM API ngày càng được cải thiện, cùng với sự phổ biến của các thư viện front-end như React, việc sử dụng toàn bộ jQuery chỉ để dùng hàm $.ajax trở nên không hiệu quả.

Bài viết này sẽ hướng dẫn bạn cách bắt đầu sử dụng Axios, đồng thời khám phá những tính năng nổi bật giúp nó trở nên phổ biến với các lập trình viên Javascript.

Vậy tại sao không sử dụng Fetch API, vốn đã được tích hợp sẵn trong các trình duyệt hiện đại? Có một số khác biệt quan trọng giữa Axios và Fetch, khiến nhiều người vẫn ưu tiên sử dụng Axios.

Một trong những điểm khác biệt lớn nhất là cách xử lý HTTP error code. Với Fetch, nếu server trả về các mã lỗi 4xx hoặc 5xx, hàm catch() sẽ không được gọi, và lập trình viên phải tự kiểm tra trạng thái của mã trả về để xác định request có thành công hay không. Trong khi đó, Axios sẽ reject tất cả các promise của request nếu nhận được các mã lỗi tương tự.

Một điểm khác biệt nhỏ khác là Fetch không tự động gửi cookies về server khi tạo request. Bạn cần phải truyền trực tiếp các option để include cookies. Với Axios, bạn không cần lo lắng về vấn đề này.

Một tính năng quan trọng khác là khả năng cập nhật tiến độ upload/download. Vì Axios được xây dựng dựa trên các XHR API cũ, bạn có thể khai báo các hàm callback cho onUploadProgress và onDownloadProgress để hiển thị phần trăm hoàn thành trên giao diện ứng dụng. Fetch hiện tại chưa hỗ trợ tính năng này.

Cuối cùng, Axios có thể được sử dụng cả ở trình duyệt và Node.js, cho phép chia sẻ code Javascript giữa front-end và back-end, hoặc thực hiện server-side rendering cho ứng dụng front-end.

Mục Lục

1 Cài Đặt Axios
2 Hỗ Trợ Trình Duyệt
3 Tạo Request
4 Các Option Cho Request
5 Các Hàm Tiện Lợi
6 Response Object
7 Error Object
8 Transforms
9 Interceptors
10 Hệ Sinh Thái Axios
11 Kết Luận

Cài Đặt Axios

Cách phổ biến nhất để cài đặt Axios là thông qua npm:

npm i axios

Sau đó, import vào code của bạn:

// ES2015 style import
import axios from 'axios';

// Node.js style require
const axios = require('axios');

Hoặc, nếu bạn không sử dụng module bundler, bạn có thể kéo thư viện từ CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Hỗ Trợ Trình Duyệt

Axios hoạt động trên tất cả các trình duyệt web hiện đại và Internet Explorer phiên bản 8 trở lên.

Tạo Request

Tương tự như $.ajax của jQuery, bạn có thể tạo bất kỳ HTTP request nào bằng cách truyền object option cho Axios:

axios({
  method: 'post',
  url: '/login',
  data: {
    user: 'test',
    lastName: 'test1'
  }
});

Trong ví dụ này, chúng ta chỉ định phương thức HTTP (POST) và URL để gửi request. Đồng thời, chúng ta cung cấp dữ liệu gửi kèm dưới dạng object Javascript. Mặc định, Axios sẽ serialize object này thành JSON và đặt trong body của request.

Các Option Cho Request

Dưới đây là một số option phổ biến bạn có thể truyền vào khi tạo request:

baseURL: Base URL, được thêm vào trước bất kỳ URL tương đối nào.
headers: Object chứa các cặp key/value cho header của request.
params: Object chứa các cặp key/value được serialize và thêm vào URL dưới dạng query string.
responseType: Định dạng dữ liệu trả về mong muốn (arraybuffer, blob, document, text, stream). Mặc định là JSON.
auth: Object chứa username và password cho HTTP Basic authentication.
timeout: Thời gian chờ tối đa cho request (tính bằng mili giây). Nếu request vượt quá thời gian này, promise sẽ bị reject.
cancelToken: Cho phép hủy bỏ request đang chờ xử lý.

Các Hàm Tiện Lợi

Giống như jQuery, Axios cung cấp các hàm ngắn gọn cho các loại request khác nhau:

axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Ví dụ:

axios.get('/products/5');

axios.post('/products', { name: 'Waffle Iron', price: 21.50 }, { options });

Khi tạo request, Axios trả về một promise sẽ resolve với một response object hoặc reject với một error object.

axios.get('/product/9')
  .then(response => console.log(response))
  .catch(error => console.log(error));

Response Object

Khi request thành công, hàm then() sẽ nhận được một response object với các thuộc tính sau:

data: Payload được trả về từ server. Axios mong chờ JSON và sẽ parse nó thành Javascript object.
status: Mã HTTP trả về từ server.
statusText: Message của HTTP status trả về bởi server.
headers: Tất cả các header được gửi về từ server.
config: Cấu hình ban đầu của request.
request: XMLHttpRequest object (trong trình duyệt).

Error Object

Nếu có lỗi xảy ra với request, promise sẽ bị reject với một error object chứa các thuộc tính sau:

message: Message của lỗi.
response: Response object (nếu có).
config: Cấu hình ban đầu của request.
request: XMLHttpRequest object (trong trình duyệt).
code: Mã lỗi, ví dụ như ECONNABORTED khi request timeout.

Transforms

Axios cho phép bạn cung cấp các function để biến đổi dữ liệu đến và đi, thông qua các config option transformRequest và transformResponse. Cả hai đều là mảng, cho phép tạo một chuỗi các function mà dữ liệu sẽ đi qua.

Các function trong transformRequest được áp dụng cho các request PUT, POST và PATCH. Chúng nhận dữ liệu request và object header làm tham số, và phải trả về object đã được chỉnh sửa.

const options = {
  transformRequest: [
    (data, headers) => {
      // do something with data
      return data;
    }
  ]
}

Các function trong transformResponse được gọi khi có response data từ server, trước khi response được truyền cho hàm then().

Ứng dụng của transform là gì? Ví dụ, khi API mong chờ dữ liệu ở định dạng XML hoặc CSV, bạn có thể set up các hàm transform để convert dữ liệu gửi đi và trả về. Mặc định, transformRequest và transformResponse biến đổi dữ liệu thành JSON.

Interceptors

Trong khi transform cho phép điều chỉnh dữ liệu gửi đi và trả về, Axios còn cho phép thêm các function gọi là interceptor. Giống như transform, các function này được gọi khi một request được tạo hoặc một response được trả về.

// Add a request interceptor
axios.interceptors.request.use((config) => {
  // Do something before request is sent
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, (error) => {
  // Do something with request error
  return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use((response) => {
  // Do something with response data
  return response;
}, (error) => {
  // Do something with response error
  if (error.response.status === 401) {
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

Như ví dụ trên, interceptor có những điểm khác biệt so với transform. Thay vì chỉ nhận dữ liệu hoặc headers, interceptor nhận toàn bộ config của request hoặc response object.

Khi tạo interceptor, bạn có thể cung cấp một hàm xử lý error để bắt và xử lý lỗi. Request interceptor có thể được sử dụng để lấy token từ localStorage và gửi kèm các request. Response interceptor có thể được dùng để bắt lỗi 401 và redirect đến trang login.

Hệ Sinh Thái Axios

Axios có một hệ sinh thái phong phú với nhiều thư viện bên thứ 3 mở rộng tính năng của nó:

axios-mock-adapter: Mock request để kiểm tra code dễ dàng.
axios-cache-plugin: Cache các GET request.
redux-axios-middleware: Middleware cho Redux, cung cấp cách gọn gàng để dispatch Ajax request với các actions.
axios-retry: Tự động retry các request bị lỗi.
axios-rate-limit: Giới hạn số lượng request được gửi đi trong một khoảng thời gian nhất định.

Kết Luận

Có rất nhiều lý do để chọn sử dụng Axios. Thư viện này có API rõ ràng, với các method quen thuộc. Sự phổ biến của nó và hệ sinh thái phong phú khiến Axios trở thành lựa chọn tốt cho ứng dụng của bạn, dù là front-end, back-end, hay cả hai. Axios giúp đơn giản hóa việc giao tiếp với server, xử lý lỗi hiệu quả, và cung cấp nhiều tính năng mạnh mẽ để xây dựng các ứng dụng web hiện đại.