Các Lỗi Thường Gặp Khi Sử Dụng Axios và Cách Khắc Phục

Axios là một thư viện JavaScript mạnh mẽ để làm việc với các API, nhưng dù tiện lợi và dễ sử dụng, vẫn có những lỗi thường gặp mà lập trình viên phải đối mặt. Bài viết này sẽ giúp bạn nhận diện các lỗi phổ biến khi sử dụng Axios và cung cấp cách khắc phục để giúp bạn làm việc hiệu quả hơn.

1. Lỗi “Network Error”

Nguyên nhân: Lỗi này xảy ra khi Axios không thể kết nối tới máy chủ, thường do vấn đề mạng, cấu hình CORS sai hoặc server không phản hồi.

Cách khắc phục:

• Kiểm tra lại URL bạn đang gọi, đảm bảo chính xác và có thể truy cập.
• Kiểm tra cấu hình CORS trên server nếu bạn đang phát triển frontend trên trình duyệt.

Ví dụ:

axios.get('https://api.vntalking.com/data')
  .catch(error => {
    if (error.message === 'Network Error') {
      console.error('Lỗi kết nối mạng, vui lòng kiểm tra lại.');
    }
  });

2. Lỗi “Request Timeout”

Nguyên nhân: Lỗi này xảy ra khi yêu cầu mất quá nhiều thời gian để hoàn thành, dẫn đến timeout.

Cách khắc phục:

• Bạn có thể thiết lập thời gian chờ (timeout) trong cấu hình yêu cầu của Axios để ngăn yêu cầu mất quá nhiều thời gian.

Ví dụ:

axios.get('https://api.vntalking.com/data', { timeout: 5000 })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('Yêu cầu mất quá nhiều thời gian, đã bị hủy.');
    }
  });

3. Lỗi 404 – Không Tìm Thấy Tài Nguyên

Nguyên nhân: Khi yêu cầu gửi đến một endpoint không tồn tại, server sẽ trả về mã trạng thái HTTP 404.

Cách khắc phục:

• Xác minh lại đường dẫn URL và đảm bảo API server đang hoạt động đúng.

Ví dụ:

axios.get('https://api.vntalking.com/invalid-endpoint')
  .catch(error => {
    if (error.response && error.response.status === 404) {
      console.error('Không tìm thấy tài nguyên, kiểm tra lại URL.');
    }
  });

4. Lỗi 500 – Lỗi Server

Nguyên nhân: Lỗi này thường đến từ phía server, có thể do lỗi logic trong backend hoặc server bị quá tải.

Cách khắc phục:

• Thử gửi lại yêu cầu sau một thời gian ngắn hoặc kiểm tra lại trạng thái của server.

Ví dụ:

axios.post('https://api.vntalking.com/data', { data: 'sample data' })
  .catch(error => {
    if (error.response && error.response.status === 500) {
      console.error('Server gặp lỗi, hãy thử lại sau.');
    }
  });

5. Lỗi Xử Lý Token Authentication

Nguyên nhân: Đôi khi khi làm việc với các API bảo mật, bạn cần gửi token xác thực trong header của mỗi yêu cầu. Quên thêm token có thể dẫn đến lỗi 401 (Unauthorized).

Cách khắc phục:

• Sử dụng các interceptors của Axios để tự động thêm token vào header của tất cả các yêu cầu.

Ví dụ:

axios.interceptors.request.use(config => {
  const token = 'Bearer token_vntalking';
  config.headers.Authorization = token;
  return config;
}, error => {
  return Promise.reject(error);
});

6. Xử Lý Dữ Liệu JSON

Nguyên nhân: Axios tự động chuyển đổi các dữ liệu JSON từ phản hồi, nhưng đôi khi có thể gặp lỗi khi phản hồi không phải là JSON hợp lệ.

Cách khắc phục:

• Kiểm tra cấu trúc dữ liệu của phản hồi trước khi xử lý. Bạn có thể kiểm tra kiểu dữ liệu bằng cách dùng typeof.

Ví dụ:

axios.get('https://api.vntalking.com/data')
  .then(response => {
    if (typeof response.data === 'object') {
      console.log('Dữ liệu JSON hợp lệ:', response.data);
    } else {
      console.error('Dữ liệu không phải JSON.');
    }
  });

Kết luận

Làm việc với Axios có thể trở nên dễ dàng hơn nếu bạn hiểu và biết cách khắc phục những lỗi thường gặp. Việc kiểm tra cẩn thận cấu hình yêu cầu và phản hồi, cũng như xử lý lỗi phù hợp, sẽ giúp bạn tránh được những sự cố không mong muốn.

Hãy thử nghiệm với các đoạn mã trên để làm chủ Axios và cải thiện hiệu suất làm việc với các API. Nếu bạn cần thêm tài liệu hoặc hướng dẫn chi tiết hơn, đừng quên ghé thăm VNTALKING, nơi có rất nhiều tài nguyên bổ ích!

​Miễn phí khóa học React Native

Bạn có muốn download toàn bộ video của khóa học rất nổi tiếng về React Native này không? Đăng kí để mình gửi link download nhé

DOWNLOAD