Kiến thức Hữu ích 😍

Axios là gì? Hướng dẫn cài đặt và dùng hiệu quả trong lập trình web

Kiến thức lập trình

Trong thế giới lập trình web hiện đại, việc tương tác với dữ liệu thông qua API là gì đã trở thành một phần không thể thiếu. Các ứng dụng từ nhỏ đến lớn đều cần gọi API để lấy thông tin, gửi dữ liệu hoặc thực hiện các tác vụ phía máy chủ. Tuy nhiên, việc lựa chọn một công cụ gọi HTTP vừa đơn giản, hiệu quả lại dễ quản lý không phải lúc nào cũng dễ dàng. Nhiều lập trình viên thường phân vân giữa các phương thức có sẵn như Fetch API là gì và các thư viện bên ngoài. Đây chính là lúc Axios xuất hiện như một giải pháp toàn diện. Axios là một thư viện HTTP client dựa trên Promise trong JavaScript, giúp xử lý các yêu cầu mạng một cách thông minh và gọn gàng. Trong bài viết này, chúng ta sẽ cùng khám phá Axios là gì, cách tích hợp vào dự án, những ưu điểm nổi bật, xem qua các ví dụ thực hành và học cách xử lý lỗi hiệu quả.

Axios là gì và vai trò trong lập trình web

Khái niệm cơ bản về Axios

Axios là một thư viện JavaScript là gì mã nguồn mở, được sử dụng để gửi các yêu cầu HTTP từ cả môi trường trình duyệt và Node.js là gì. Về cơ bản, nó giúp bạn “giao tiếp” với các máy chủ từ xa để lấy hoặc gửi dữ liệu. Điểm đặc biệt của Axios là nó hoạt động dựa trên Promise, một cơ chế xử lý bất đồng bộ hiện đại trong JavaScript. Điều này giúp mã nguồn của bạn trở nên sạch sẽ, dễ đọc và dễ bảo trì hơn rất nhiều so với các phương thức truyền thống.

Hình minh họa

Bạn có thể dùng Axios để thực hiện tất cả các phương thức HTTP phổ biến như GET (lấy dữ liệu), POST (tạo mới dữ liệu), PUT (cập nhật toàn bộ dữ liệu), PATCH (cập nhật một phần dữ liệu) và DELETE (xóa dữ liệu). Nhờ cú pháp đơn giản và các tính năng mạnh mẽ được tích hợp sẵn, Axios đã nhanh chóng trở thành lựa chọn hàng đầu của cộng đồng lập trình viên trên toàn thế giới.

Vai trò quan trọng trong phát triển web hiện đại

Trong các ứng dụng web ngày nay, đặc biệt là các Single Page Application (SPA) được xây dựng bằng React JS là gì, Angular hay Vue.js, việc tương tác với API diễn ra liên tục. Axios đóng vai trò như một cầu nối đáng tin cậy giữa giao diện người dùng (frontend) và hệ thống xử lý logic (backend). Nó giúp tăng tốc quá trình phát triển bằng cách đơn giản hóa việc gọi API và quản lý các luồng dữ liệu bất đồng bộ.

Thay vì phải tự viết các hàm phức tạp với Ajax là gì hoặc xử lý các trường hợp đặc biệt của fetch, lập trình viên có thể tin tưởng vào Axios. Thư viện này cung cấp một API nhất quán, dễ sử dụng cùng nhiều tính năng cao cấp như tự động chuyển đổi dữ liệu JSON, xử lý lỗi chi tiết và khả năng tùy biến yêu cầu mạnh mẽ. Nhờ đó, bạn có thể tập trung hơn vào việc xây dựng tính năng cho ứng dụng mà không cần quá lo lắng về các chi tiết kỹ thuật của việc gửi nhận yêu cầu HTTP.

Cách cài đặt và sử dụng Axios trong JavaScript

Hướng dẫn cài đặt Axios

Việc tích hợp Axios vào dự án của bạn vô cùng đơn giản và linh hoạt. Bạn có thể chọn một trong các phương pháp sau tùy thuộc vào môi trường và công cụ bạn đang sử dụng.

Cách phổ biến và được khuyên dùng nhất trong các dự án sử dụng Node.js hoặc các trình quản lý gói là cài đặt qua npm (Node Package Manager) hoặc yarn. Bạn chỉ cần mở terminal trong thư mục dự án và chạy lệnh: npm install axios Hoặc nếu bạn dùng yarn: yarn add axios

Hình minh họa

Sau khi cài đặt thành công, bạn có thể nhập và sử dụng Axios trong các file JavaScript của mình với cú pháp import axios from 'axios';.

Đối với các dự án không sử dụng trình quản lý gói hoặc muốn nhúng trực tiếp vào file HTML, bạn có thể sử dụng CDN (Content Delivery Network). Chỉ cần thêm thẻ <script> sau vào trong file HTML của bạn: <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> Với cách này, đối tượng axios sẽ có sẵn để bạn sử dụng trực tiếp trong các đoạn mã JavaScript của mình.

Ví dụ cơ bản sử dụng Axios

Sau khi cài đặt, hãy cùng xem qua một vài ví dụ để hiểu cách Axios hoạt động. Cú pháp của nó rất trực quan và dễ hiểu.

Gửi yêu cầu GET:
Yêu cầu GET được dùng để lấy dữ liệu từ một tài nguyên trên máy chủ. Giả sử chúng ta muốn lấy danh sách người dùng từ một API công khai.

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(function (response) {
    // Xử lý khi yêu cầu thành công
    console.log(response.data);
  })
  .catch(function (error) {
    // Xử lý khi yêu cầu thất bại
    console.log(error);
  });

Trong ví dụ trên, axios.get trả về một Promise. Chúng ta sử dụng .then() để xử lý dữ liệu khi yêu cầu thành công. Dữ liệu trả về từ server nằm trong response.data. Nếu có lỗi, khối .catch() sẽ được thực thi.

Gửi yêu cầu POST:
Yêu cầu POST được dùng để gửi dữ liệu lên máy chủ, thường là để tạo một tài nguyên mới.

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Bài viết mới của AZWEB',
    body: 'Đây là nội dung bài viết về Axios.',
    userId: 1
  })
  .then(function (response) {
    console.log('Bài viết đã được tạo thành công:');
    console.log(response.data);
  })
  .catch(function (error) {
    console.log('Có lỗi xảy ra:', error);
  });

Hình minh họa

Với yêu cầu POST, chúng ta truyền một đối tượng chứa dữ liệu làm tham số thứ hai. Axios sẽ tự động chuyển đổi đối tượng này thành chuỗi JSON và gửi đi với header Content-Type: application/json.

Ưu điểm và tính năng nổi bật của Axios

Ưu điểm của Axios so với các phương thức gọi HTTP khác

Axios không phải ngẫu nhiên mà trở thành thư viện được yêu thích. Nó sở hữu nhiều ưu điểm vượt trội so với các phương thức truyền thống như XMLHttpRequest hay cả fetch API là gì được tích hợp sẵn trong trình duyệt.

Một trong những ưu điểm lớn nhất là việc hỗ trợ Promise ngay từ đầu. Điều này giúp bạn viết mã bất đồng bộ một cách tường minh và dễ quản lý hơn, đặc biệt khi kết hợp với cú pháp async/await. Code của bạn sẽ trông gọn gàng, tránh được “callback hell” và dễ dàng theo dõi luồng thực thi.

Hình minh họa

Thứ hai, Axios tự động chuyển đổi dữ liệu JSON. Khi bạn nhận phản hồi, Axios tự động phân tích chuỗi JSON thành một đối tượng JavaScript, lưu trong response.data. Tương tự, khi bạn gửi yêu cầu POST hoặc PUT với một đối tượng JavaScript, nó cũng tự động chuyển đổi thành chuỗi JSON. Điều này giúp bạn tiết kiệm được vài dòng code so với fetch, nơi bạn phải tự gọi response.json() và JSON.stringify().

Cuối cùng, Axios cung cấp khả năng cấu hình yêu cầu rất linh hoạt. Bạn có thể dễ dàng thiết lập baseURL cho tất cả các yêu cầu, tùy chỉnh headers, đặt timeout để hủy yêu cầu nếu quá lâu, và nhiều tùy chọn khác. Điều này giúp quản lý các API call trong một dự án lớn trở nên nhất quán và hiệu quả hơn.

Các tính năng quan trọng khác

Ngoài những ưu điểm kể trên, Axios còn đi kèm với nhiều tính năng mạnh mẽ khác giúp cuộc sống của lập trình viên trở nên dễ dàng hơn.

Xử lý lỗi chi tiết và đồng nhất: Khi một yêu cầu thất bại, đối tượng error mà Axios trả về chứa rất nhiều thông tin hữu ích như error.response (thông tin phản hồi từ server như status code), error.request (yêu cầu đã được gửi đi) và error.message. Điều này giúp bạn xác định nguyên nhân lỗi một cách chính xác, dù đó là lỗi mạng, lỗi từ server (5xx) hay lỗi từ client (4xx).

Hỗ trợ hủy yêu cầu (Cancel Request): Trong các ứng dụng phức tạp, đôi khi người dùng thực hiện một hành động khác trước khi yêu cầu API cũ hoàn tất. Axios cho phép bạn hủy các yêu cầu đang chờ xử lý để tránh lãng phí tài nguyên và các xung đột dữ liệu không cần thiết.

Interceptors (Bộ đánh chặn): Đây là một trong những tính năng mạnh mẽ nhất của Axios. Interceptors cho phép bạn “đánh chặn” các yêu cầu trước khi chúng được gửi đi (request interceptor) hoặc các phản hồi trước khi chúng được xử lý (response interceptor). Ứng dụng phổ biến nhất là tự động đính kèm token xác thực vào header của mọi yêu cầu, hoặc xử lý lỗi tập trung cho toàn bộ ứng dụng.

Hình minh họa

Ví dụ thực hành gửi yêu cầu GET, POST bằng Axios

Lý thuyết là vậy, nhưng cách tốt nhất để hiểu rõ Axios là thông qua các ví dụ thực tế. Chúng ta sẽ sử dụng cú pháp async/await hiện đại để mã nguồn trông sạch sẽ hơn.

Ví dụ gửi yêu cầu GET

Giả sử chúng ta đang xây dựng một trang blog và cần lấy danh sách bài viết từ một API giả lập (JSONPlaceholder).

Đầu tiên, hãy tạo một hàm bất đồng bộ để thực hiện việc này:

async function fetchPosts() {
  try {
    // Gửi yêu cầu GET đến API
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    
    // Lấy dữ liệu từ phản hồi
    const posts = response.data;
    
    console.log('Lấy danh sách bài viết thành công!');
    
    // Hiển thị 5 bài viết đầu tiên
    posts.slice(0, 5).forEach(post => {
      console.log(`- ${post.title}`);
    });
    
  } catch (error) {
    // Xử lý nếu có lỗi xảy ra
    console.error('Không thể lấy danh sách bài viết:', error.message);
  }
}

// Gọi hàm để thực thi
fetchPosts();

Trong ví dụ này, await axios.get(...) sẽ tạm dừng hàm cho đến khi Promise được giải quyết (hoặc bị từ chối). Nếu thành công, response sẽ chứa dữ liệu từ API. Chúng ta dùng khối try...catch để bắt lỗi một cách an toàn. Nếu API không khả dụng hoặc có lỗi mạng, thông báo lỗi sẽ được in ra console.

Hình minh họa

Ví dụ gửi yêu cầu POST

Tiếp theo, hãy thử gửi dữ liệu để tạo một người dùng mới. Kịch bản này rất phổ biến trong các form đăng ký hoặc liên hệ.

Chúng ta sẽ tạo một hàm để gửi thông tin người dùng mới lên server:

async function createUser(userData) {
  try {
    console.log('Đang gửi dữ liệu người dùng mới...');
    
    // Gửi yêu cầu POST với dữ liệu người dùng
    const response = await axios.post('https://jsonplaceholder.typicode.com/users', userData);
    
    // Kiểm tra mã trạng thái HTTP (201 Created)
    if (response.status === 201) {
      console.log('Tạo người dùng thành công!');
      console.log('Dữ liệu trả về từ server:', response.data);
    } else {
      console.warn('Server phản hồi nhưng có gì đó không đúng.');
    }
    
  } catch (error) {
    // Xử lý lỗi
    console.error('Tạo người dùng thất bại:', error.message);
  }
}

// Dữ liệu người dùng mẫu
const newUser = {
  name: 'AZWEB User',
  username: 'azweb.vn',
  email: 'contact@azweb.vn'
};

// Gọi hàm để thực thi
createUser(newUser);

Ở đây, chúng ta truyền đối tượng userData làm tham số thứ hai cho axios.post. Axios sẽ đảm nhận việc chuyển đổi nó thành JSON. Sau khi nhận được phản hồi, chúng ta có thể kiểm tra response.status để chắc chắn rằng tài nguyên đã được tạo thành công (mã 201 thường được dùng cho việc tạo mới).

Quản lý lỗi và tối ưu sử dụng Axios trong dự án thực tế

Xử lý lỗi trong Axios

Một trong những kỹ năng quan trọng nhất khi làm việc với API là xử lý lỗi. Axios cung cấp một cơ chế xử lý lỗi rất rõ ràng. Khi một yêu cầu thất bại, Promise sẽ bị “reject” và trả về một đối tượng error.

Cách tốt nhất để xử lý lỗi là sử dụng khối try...catch với cú pháp async/await.

async function getUser(userId) {
  try {
    const response = await axios.get(`https://api.example.com/users/${userId}`);
    console.log(response.data);
  } catch (error) {
    if (error.response) {
      // Yêu cầu đã được thực hiện và server đã phản hồi với mã trạng thái ngoài khoảng 2xx
      console.log('Lỗi dữ liệu từ server:', error.response.data);
      console.log('Mã trạng thái:', error.response.status);
    } else if (error.request) {
      // Yêu cầu đã được gửi đi nhưng không nhận được phản hồi
      console.log('Không nhận được phản hồi từ server:', error.request);
    } else {
      // Một lỗi khác đã xảy ra khi thiết lập yêu cầu
      console.log('Lỗi:', error.message);
    }
  }
}

Việc phân biệt các loại lỗi này rất quan trọng. error.response cho biết lỗi đến từ backend (ví dụ: 404 Not Found, 401 Unauthorized), trong khi error.request thường chỉ ra các vấn đề về mạng (mất kết nối, sai tên miền). Thông tin chi tiết về xử lý lỗi hiệu quả có thể xem thêm tại bài viết Error Handling trong JavaScript.

Hình minh họa

Tối ưu và lưu ý khi dùng Axios

Để sử dụng Axios hiệu quả trong các dự án lớn, bạn nên áp dụng một vài kỹ thuật tối ưu.

Tạo một instance (thể hiện) Axios: Thay vì gọi axios.get, axios.post trực tiếp, bạn có thể tạo một instance tùy chỉnh với axios.create(). Điều này cho phép bạn định cấu hình chung cho một nhóm các API.

const apiClient = axios.create({
  baseURL: 'https://api.azweb.vn/v1/',
  timeout: 5000, // Hủy yêu cầu sau 5 giây
  headers: {'X-Custom-Header': 'foobar'}
});

// Sử dụng instance
apiClient.get('/products');

Sử dụng Interceptors để quản lý token: Đây là ứng dụng thực tế và mạnh mẽ nhất của Interceptors. Bạn có thể tự động thêm token xác thực (ví dụ: JWT) vào mọi yêu cầu mà không cần lặp lại code.

apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('accessToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

Bằng cách này, mọi yêu cầu được gửi đi từ apiClient sẽ tự động được đính kèm token. Bạn cũng có thể dùng response interceptor để xử lý việc làm mới token khi nó hết hạn.

Các vấn đề phổ biến khi sử dụng Axios và cách khắc phục

Khi làm việc với Axios ở phía trình duyệt, có hai vấn đề mà hầu hết các lập trình viên đều sẽ gặp phải: lỗi CORS và quản lý token.

Lỗi CORS khi gọi API từ trình duyệt

CORS (Cross-Origin Resource Sharing) là một cơ chế bảo mật của trình duyệt, ngăn chặn các trang web gửi yêu cầu đến một domain khác với domain của trang web hiện tại. Nếu bạn đang phát triển trên localhost:3000 và gọi API ở api.example.com, bạn có thể sẽ gặp lỗi CORS.

Hình minh họa

Lỗi này không phải do Axios gây ra, mà là do chính sách bảo mật của trình duyệt. Cách giải quyết triệt để nhất là cấu hình phía server để cho phép domain của bạn truy cập. Người phát triển backend cần thêm header Access-Control-Allow-Origin: * hoặc Access-Control-Allow-Origin: http://localhost:3000 vào phản hồi của API.

Nếu bạn không thể thay đổi backend, một giải pháp tạm thời trong môi trường phát triển là sử dụng proxy. Các công cụ như Create React App hay Vite đều hỗ trợ cấu hình proxy để “chuyển tiếp” yêu cầu API thông qua server phát triển của chúng, qua đó tránh được lỗi CORS.

Quản lý token và bảo mật khi gọi API

Hầu hết các ứng dụng hiện đại đều yêu cầu xác thực để truy cập các API được bảo vệ. Thông thường, sau khi người dùng đăng nhập, server sẽ trả về một token (ví dụ: JWT). Token này cần được lưu trữ an toàn ở phía client và gửi kèm trong header của các yêu cầu tiếp theo.

Cách phổ biến là lưu token vào localStorage hoặc sessionStorage. Tuy nhiên, cần lưu ý rằng localStorage có thể bị tấn công qua XSS (Cross-Site Scripting). Một giải pháp an toàn hơn là lưu token trong cookie với cờ HttpOnly, nhưng cách này đòi hỏi sự phối hợp chặt chẽ với backend.

Như đã đề cập ở phần trước, cách tốt nhất để quản lý việc đính kèm token là sử dụng request interceptor của Axios. Nó giúp tập trung logic xác thực vào một nơi duy nhất, làm cho code của bạn sạch sẽ và an toàn hơn.

Best Practices với Axios

Để khai thác tối đa sức mạnh của Axios và đảm bảo dự án của bạn ổn định, dễ bảo trì, hãy tuân thủ các thực hành tốt nhất sau đây.

Luôn xử lý lỗi cho mọi yêu cầu: Đừng bao giờ gửi một yêu cầu Axios mà không có .catch() hoặc khối try-catch. API có thể thất bại vì nhiều lý do, và ứng dụng của bạn cần phải xử lý những tình huống đó một cách mượt mà thay vì bị “crash”. Xem thêm Error Handling trong JavaScript để hiểu chi tiết hơn về xử lý lỗi hiệu quả.
Sử dụng Interceptors cho các tác vụ lặp lại: Tận dụng interceptors để quản lý xác thực (authentication), ghi log (logging) hoặc xử lý lỗi tập trung. Điều này giúp tránh lặp lại code và giữ cho logic nghiệp vụ của bạn gọn gàng.
Tạo instance Axios cho các API khác nhau: Nếu ứng dụng của bạn kết nối với nhiều dịch vụ backend khác nhau (ví dụ: một cho người dùng, một cho sản phẩm), hãy tạo các instance riêng biệt với axios.create() cho mỗi dịch vụ. Mỗi instance có thể có baseURL và cấu hình riêng.
Tránh gọi API liên tục không cần thiết: Trong các tính năng như thanh tìm kiếm tự động hoàn thành, đừng gọi API sau mỗi lần người dùng gõ phím. Thay vào đó, hãy sử dụng kỹ thuật debounce hoặc throttle để giới hạn số lượng yêu cầu được gửi đi.
Không lưu trữ dữ liệu nhạy cảm ở client mà không mã hóa: Tránh lưu các thông tin như khóa API bí mật hay mật khẩu trong mã nguồn frontend. Các thông tin này nên được quản lý ở phía backend hoặc thông qua các biến môi trường an toàn.

Hình minh họa

Kết luận

Qua bài viết này, chúng ta đã cùng nhau tìm hiểu sâu về Axios, từ khái niệm cơ bản, cách cài đặt cho đến các kỹ thuật nâng cao và thực hành tốt nhất. Rõ ràng, Axios không chỉ là một công cụ để gửi yêu cầu HTTP. Nó là một thư viện mạnh mẽ, linh hoạt và thân thiện với lập trình viên, giúp tối ưu hóa quá trình làm việc với API, quản lý mã nguồn bất đồng bộ một cách hiệu quả và xử lý lỗi một cách chuyên nghiệp. Với các tính năng như tự động chuyển đổi JSON, Interceptors và khả năng cấu hình cao, Axios xứng đáng là lựa chọn hàng đầu cho bất kỳ dự án web hiện đại nào.

Bạn đã sẵn sàng để nâng cấp cách bạn tương tác với API chưa? Hãy thử ngay các ví dụ trong bài viết và bắt đầu tích hợp Axios vào dự án tiếp theo của mình. Bạn sẽ ngạc nhiên về sự đơn giản và hiệu quả mà nó mang lại. Để tìm hiểu sâu hơn, hãy khám phá thêm về cách sử dụng Interceptors để làm mới token tự động, các chiến lược bảo mật API, và các thư viện hỗ trợ đi kèm Axios để xây dựng những ứng dụng mạnh mẽ và đáng tin cậy.