Written By: Nguyễn Văn Hiếu (Web 25)
Gmail: hieunguyenyt173@gmail.com
Bài viết gốc: https://www.freecodecamp.org/news/axios-react-how-to-make-get-post-and-delete-api-requests/

Axios là một thư viện máy khách HTTP dựa trên các Promise. Nó làm cho việc gửi các yêu cầu HTTP không đồng bộ đến các điểm cuối REST dễ dàng hơn và giúp bạn thực hiện các hoạt động CRUD.

Điểm cuối / API REST này có thể là một API bên ngoài như API Google, API GitHub, v.v. - hoặc nó có thể là máy chủ Node.js phụ trợ của riêng bạn.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thực hiện các yêu cầu API Axios GET, POST và DELETE trong React. Điều này chỉ đơn giản là đề cập đến cách chúng tôi truy xuất dữ liệu từ một API, thêm dữ liệu vào API và sau đó xóa dữ liệu khỏi API của chúng tôi.

Các yêu cầu API Nhận, Đăng và Xóa là một trong những yêu cầu phổ biến nhất hàng ngày do các nhà phát triển thực hiện. Sau tất cả, chúng tôi sẽ luôn cần tìm nạp dữ liệu để hiển thị trên ứng dụng của mình hoặc thực hiện các hoạt động nhất định, cũng như thêm và xóa dữ liệu vào / khỏi API của chúng tôi.

Tại sao chúng ta dùng Axios?

Câu hỏi tiếp theo mà bạn có thể đặt ra là tại sao chúng tôi lại sử dụng Axios, vì chúng tôi sẽ cần cài đặt thêm một thư viện. Đây là một số lý do:

  • Axios sử dụng XMLHttpRequest ẩn và nó được hỗ trợ rộng rãi bởi hầu hết các trình duyệt, bao gồm cả những trình duyệt cũ hơn như Internet Explorer 11. Mặt khác, Fetch () chỉ tương thích với Chrome 42+, Firefox 39+, Edge 14+ và Safari 10.3+ (bạn có thể xem bảng tương thích đầy đủ trên CanIUse.com).

  • Khi gửi yêu cầu, Axios tự động biểu thị dữ liệu, không giống như fetch (), yêu cầu chúng tôi thực hiện thủ công.

  • Không giống như API Tìm nạp, yêu cầu bạn kiểm tra mã trạng thái và tự xử lý lỗi, Axios có khả năng xử lý lỗi tốt hơn và có thể tạo ra các lỗi phạm vi 400 và 500.

Cách bắt đầu với Axios trong React

Để bắt đầu với Axios trong ứng dụng React của bạn, trước tiên hãy cài đặt React vào dự án của bạn bằng lệnh sau:

npm install axios

Sau khi hoàn tất, chúng tôi sẽ sử dụng API bài viết JSONPlacholder để tìm hiểu cách tìm nạp các bài đăng này vào ứng dụng React của chúng tôi, thêm các bài đăng mới và cuối cùng là xóa một bài đăng cụ thể bằng Axios.

Vì đây là một ứng dụng React, chúng tôi sẽ sử dụng React hooks để có quyền truy cập vào các trạng thái và các tính năng khác. Các hook mà chúng ta sẽ sử dụng là useEffect ()useState ()

Về cơ bản, chúng ta sẽ sử dụng hook useEffect () để tìm nạp các bài đăng ngay sau khi ứng dụng hiển thị / mount, trong khi hook useState () sẽ giúp chúng ta tạo bộ nhớ cục bộ cho dữ liệu của mình.

anh minh hoa

Cách tạo phiên bản Axios

Khi bạn đã cài đặt Axios thành công, bạn nên tạo một phiên bản Axios. Nó không bắt buộc, nhưng nó giúp chúng tôi tiết kiệm thời gian.

Để tạo một phiên bản, chúng tôi sẽ sử dụng phương thức .create (), cho phép chúng tôi chỉ định thông tin như URL và có thể là các tiêu đề:

import axios from "axios";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

Cách thực hiện yêu cầu GET với Axios trong React

Bạn có thể sử dụng các yêu cầu GET để lấy dữ liệu từ một điểm cuối và nó sẽ xảy ra ngay sau khi ứng dụng hiển thị nhờ hook useEffect ().

Chúng tôi sẽ sử dụng biến và sau đó đính kèm phương thức .get () để thực hiện yêu cầu GET tới điểm cuối / API của chúng tôi. Sau đó, chúng tôi sẽ sử dụng một lệnh gọi lại .then () để lấy lại tất cả dữ liệu phản hồi, bởi vì chúng tôi đã có một cá thể Axios chứa baseURL được gán cho một biến (máy khách).

Sử dụng thuộc tính .data,
chúng tôi nhận được dữ liệu phản hồi, là dữ liệu thực tế từ đối tượng phản hồi.

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      client.get('?_limit=10').then((response) => {
         setPosts(response.data);
      });
   }, []);

   return (
      // ...
   );
};

export default App;

Chúng tôi đặt dữ liệu về trạng thái chúng tôi đã tạo, vì vậy nó có thể được sử dụng trong ứng dụng của chúng tôi.

Làm thế nào để sử dụng một yêu cầu GET

Sau khi thực hiện thành công yêu cầu GET, bước tiếp theo là sử dụng dữ liệu được lưu trữ trong trạng thái post.

Bởi vì chúng tôi đang truy vấn một mảng gồm mười bài đăng, chúng tôi sẽ phải lặp qua trạng thái này để đưa mười bài đăng này vào ứng dụng của chúng tôi:

// ...

return (
  <div className="app">
    <h2>All Posts 📫</h2>
    {posts.map((post) => {
       return (
          <div className="post-card" key={post.id}>
             <h2 className="post-title">{post.title}</h2>
             <p className="post-body">{post.body}</p>
             <div className="button">
                <div className="delete-btn">Delete</div>
             </div>
          </div>
       );
    })}
  </div>
);

// ...

Cách thực hiện yêu cầu POST với Axios trong React

Bạn sử dụng một yêu cầu POST để gửi dữ liệu đến một điểm cuối. Nó hoạt động tương tự như một yêu cầu GET, ngoại trừ việc hàm được tạo để thực hiện tác vụ này sẽ được kích hoạt khi biểu mẫu được gửi hoặc theo cách khác.

Thao tác này đưa một đối tượng để gửi dữ liệu vào và cũng thêm dữ liệu vào trạng thái bằng cách trải rộng dữ liệu trước đó và sau đó thêm dữ liệu mới:

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // ...

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   const addPosts = (title, body) => {
      client
         .post('', {
            title: title,
            body: body,
         })
         .then((response) => {
            setPosts([response.data, ...posts]);
         });
      setTitle('');
      setBody('');
   };
   
   return (
      // ...
   );
};

export default App;

Khi biểu mẫu được gửi, chúng tôi gọi hàm handleSubmit () để ngăn trang tải lại. Nó cũng gọi hàm chính addPosts () bằng cách chuyển dữ liệu đã nhập vào biểu mẫu dưới dạng tham số.

Cách thực hiện yêu cầu DELETE trong React

Như tên của nó, bạn sử dụng quyền này để xóa dữ liệu cụ thể khỏi điểm cuối / API cũng như giao diện người dùng của bạn - DELETE có thể xử lý cả hai.

Đối với điều này, chúng tôi sẽ sử dụng phương thức DELETE kết hợp với biến khách hàng mà chúng tôi đã khởi tạo Axios. Đây là cách yêu cầu sẽ trông như thế nào:

const App = () => {
   const [posts, setPosts] = useState([]);

   // ...

   const deletePost = (id) => {
      client.delete(`${id}`);
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   };

   return (
      // ...
   );
};

export default App;

Về cơ bản, có một phương thức onClick "= () =>" deletePost "(" post. "Id) trên nút xóa để kích hoạt phương thức deletePost (). Chúng tôi đã chuyển nó làmID
của bài đăng cụ thể mà chúng tôi đang cố gắng xóa. chúng tôi có thể xác định bài đăng.

Chúng tôi xóa nó khỏi giao diện người dùng sau khi chúng tôi xóa nó khỏi điểm cuối / API bằng cách sử dụng phương thức bộ lọc để trả về một mảng không chứa phần tử đó.

Cách thực hiện yêu cầu trong React với Async / Await

Cho đến nay, chúng ta đã thấy cách thực hiện các yêu cầu Axios với cú pháp lời hứa. Bây giờ, hãy xem cách chúng ta có thể sử dụngasync / await
để viết ít mã hơn và tránh chuỗi .then, khó hiểu hơn nhiều

Để sử dụng async / await, trước tiên hãy gọi async trong hàm. Sau đó, thêm cú pháp await vào trước hàm khi thực hiện yêu cầu và mong đợi phản hồi để đợi cho đến khi lời hứa giải quyết với kết quả.

Khi chúng tôi sử dụng async / await, tất cả các yêu cầu Axios của chúng tôi sẽ giống như sau:

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

    // GET with Axios
   useEffect(() => {
      const fetchPost = async () => {
         let response = await client.get('?_limit=10');
         setPosts(response.data);
      };
      fetchPost();
   }, []);

   // DELETE with Axios
   const deletePost = async (id) => {
      await client.delete(`${id}`);
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   };
    
   // handle form submission
   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   // POST with Axios
   const addPosts = async (title, body) => {
      let response = await client.post('', {
         title: title,
         body: body,
      });
      setPosts([response.data, ...posts]);
      setTitle('');
      setBody('');
   };

   return (
      // ...
   );
};

Cách xử lý lỗi trong Axios

Khi sử dụng dữ liệu từ một API, chúng tôi luôn khuyến nghị chúng tôi xử lý lỗi để giúp hiển thị loại lỗi mà chúng tôi gặp phải. Những lỗi này có thể xảy ra do chúng tôi truyền dữ liệu không chính xác, đưa ra yêu cầu đối với API không chính xác hoặc gặp lỗi mạng.

Chúng tôi có thể xử lý lỗi trong Axios bằng cách sử dụng các phương thức .then ()
.catch () hoặc bằng cách sử dụng khối try ... catch cho các yêu cầu Axios không đồng bộ /await
.

Cách xử lý lỗi trong Axios bằng phương pháp .catch

Bạn có thể thực hiện điều này bằng cách đính kèm phương thức .catch ()
vào phương thức .then () để xử lý lỗi. Giả sử phương thức.then ()
không thành công:

useEffect(() => {
  client
     .get('?_limit=10')
     .then((response) => {
        setPosts(response.data);
     })
     .catch((error) => {
        console.log(error);
     });
}, []);

Cách xử lý lỗi trong Axios bằng try…catch

Đối với kịch bản async / await, khối try … catch sẽ giống như sau:

useEffect(() => {
  const fetchPost = async () => {
     try {
        let response = await client.get('?_limit=10');
        setPosts(response.data);
     } catch (error) {
        console.log(error);
     }
  };
  fetchPost();
}, []);

Bạn có thể đọc thêm về cách xử lý lỗi với Axios tại đây

Kết luận

Trong hướng dẫn này, bạn đã học cách sử dụng Axios, một trong những thư viện máy khách HTTP mạnh nhất, để thực hiện ba yêu cầu API cơ bản.