Axios: Gọi API Dễ Dàng Hơn trong React

Khi phát triển ứng dụng web với React, việc giao tiếp với các API là một phần không thể thiếu. Dù JavaScript cung cấp sẵn fetch để gọi API, nhưng trong thực tế, Axios thường được ưa chuộng hơn nhờ tính năng vượt trội và sự tiện lợi mà nó mang lại. Bài viết này sẽ giúp bạn hiểu tại sao Axios là lựa chọn tốt hơn và cách sử dụng nó trong các dự án React của bạn.

1. Axios là gì?

Axios là một thư viện JavaScript mạnh mẽ dùng để thực hiện các yêu cầu HTTP. Nó hỗ trợ cả trình duyệt và Node.js, giúp bạn dễ dàng giao tiếp với API RESTful. Axios hoạt động tương tự như fetch, nhưng cung cấp nhiều tính năng bổ sung, giúp việc gọi API trở nên hiệu quả và đơn giản hơn.

2. Tại sao chọn Axios thay vì fetch?

Dưới đây là một số lý do khiến Axios nổi bật hơn:

• Hỗ trợ JSON mặc định: Axios tự động chuyển đổi dữ liệu phản hồi sang JSON, không cần gọi response.json() như khi dùng fetch.
• Quản lý lỗi dễ dàng: Axios cung cấp hệ thống xử lý lỗi trực quan và rõ ràng hơn.
• Hỗ trợ timeout: Axios cho phép thiết lập thời gian chờ (timeout) khi gọi API.
• Tích hợp header dễ dàng: Việc thêm các thông tin xác thực, token, hoặc cấu hình header khác rất đơn giản với Axios.
• Hỗ trợ yêu cầu hủy bỏ: Với Axios, bạn có thể dễ dàng hủy bỏ một yêu cầu HTTP nếu không cần thiết nữa, điều này hữu ích khi làm việc với các ứng dụng thời gian thực.
• Tương thích với trình duyệt cũ: Axios hỗ trợ các trình duyệt cũ tốt hơn so với fetch.

3. Cài đặt Axios

Trước khi sử dụng Axios, bạn cần cài đặt nó vào dự án React của mình:

npm install axios

Hoặc nếu bạn dùng Yarn:

yarn add axios

4. Sử dụng Axios trong React

a) Gọi API đơn giản với Axios

Dưới đây là ví dụ minh họa cách gọi API đơn giản bằng Axios:

import React, { useEffect, useState } from "react";
import axios from "axios";

const App = () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
        setData(response.data);
      } catch (err) {
        setError("Lỗi khi gọi API");
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {error && <p>{error}</p>}
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

b) Gửi dữ liệu lên API

Ngoài việc lấy dữ liệu, Axios cũng hỗ trợ gửi dữ liệu thông qua POST hoặc các phương thức HTTP khác:

const postData = async () => {
	  try {
	    const response = await axios.post("https://jsonplaceholder.typicode.com/posts", {
	      title: "Hello World",
	      body: "This is a test post",
	      userId: 1,
	    });
	    console.log("Dữ liệu đã được gửi:", response.data);
	  } catch (err) {
	    console.error("Lỗi khi gửi dữ liệu:", err);
	  }
};

5. Cấu hình Axios

Bạn có thể thiết lập cấu hình toàn cục cho Axios để không phải lặp lại các tùy chọn trong mỗi lần gọi API:

import axios from "axios";

axios.defaults.baseURL = "https://jsonplaceholder.typicode.com";
axios.defaults.headers.common["Authorization"] = "Bearer YOUR_ACCESS_TOKEN";
axios.defaults.timeout = 5000; // 5 giây

6. Xử lý lỗi với Axios

Axios cung cấp cách xử lý lỗi rất linh hoạt bằng cách sử dụng try-catch hoặc phương thức .catch():

axios
  .get("https://jsonplaceholder.typicode.com/posts")
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (error.response) {
      // Lỗi phản hồi từ server
      console.error("Lỗi từ server:", error.response.status);
    } else if (error.request) {
      // Không nhận được phản hồi
      console.error("Không nhận được phản hồi:", error.request);
    } else {
      // Các lỗi khác
      console.error("Lỗi khác:", error.message);
    }
  });

7. Tích hợp Axios với React Context hoặc Redux

Trong các ứng dụng lớn, bạn có thể sử dụng Axios kết hợp với React Context hoặc Redux để quản lý trạng thái toàn cục, giúp việc gọi và sử dụng dữ liệu API trở nên mượt mà hơn.

8. Kết luận

Axios là một công cụ mạnh mẽ và tiện lợi, giúp việc gọi API trong React trở nên đơn giản và hiệu quả hơn. Với các tính năng nổi bật như quản lý lỗi, timeout, và khả năng hủy yêu cầu, Axios thực sự là một lựa chọn tuyệt vời để thay thế cho fetch. Hãy thử tích hợp Axios vào dự án của bạn để trải nghiệm những lợi ích mà nó mang lại!