Sử dụng axios để gọi một API trong React Js

Sử dụng axios để gọi một API trong React Js

Giới thiệu về axios

Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng thư viện axios trong React JS để gọi một API từ máy chủ. Bạn sẽ được hướng dẫn từ cách cài đặt và sử dụng axios, đến cách xử lý và truyền dữ liệu trả về từ API vào React. Bài viết sẽ giúp bạn có được kiến thức cần thiết để xử lý các yêu cầu API trong ứng dụng React của bạn một cách dễ dàng và hiệu quả. đọc thêm về axios. bài viết 3949

Cách cài đặt axios

Để sử dụng axios trong ứng dụng React, chúng ta cần cài đặt thư viện axios vào project của mình. Có nhiều cách để cài đặt axios, nhưng phổ biến nhất là sử dụng npm hoặc yarn.

Để cài đặt axios bằng npm, hãy mở terminal và nhập lệnh sau:

 
				
					npm install axios

Để cài đặt axios bằng yarn, hãy mở terminal và nhập lệnh sau:

				
					yarn add axios

Ví dụ call một API bằng

Dưới đây là ví dụ về cách sử dụng axios để gọi một API bằng phương thức GET:

				
					import React, { <a href="https://nodemy.vn/useeffect-va-cach-su-dung-useeffect-reacthooks/">useEffect</a>, <a href="https://nodemy.vn/doi-chut-ve-usestate-trong-react-hooks/">useState</a> } from 'react';
import axios from 'axios';

<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => setData(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      <h1><span class="ez-toc-section" id="List_of_Users"></span>List of Users<span class="ez-toc-section-end"></span></h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

call sử dụng async, await

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        setData(response.data);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1><span class="ez-toc-section" id="List_of_Users-2"></span>List of Users<span class="ez-toc-section-end"></span></h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Trong ví dụ trên, chúng ta sử dụng phương thức useEffect để gọi API khi component được tải lên. Chúng ta sử dụng phương thức axios.get để gọi API tới địa chỉ https://jsonplaceholder.typicode.com/users. Khi server trả về dữ liệu, chúng ta lưu dữ liệu vào state của component bằng cách sử dụng phương thức setData. Cuối cùng, chúng ta hiển thị danh sách người dùng bằng cách map qua dữ liệu trong state data.

Lưu ý rằng trong ví dụ trên, chúng ta sử dụng trang web https://jsonplaceholder.typicode.com để mô phỏng API. Đối với các trường hợp thực tế, địa chỉ API cần phải được thay đổi tương ứng với API mà bạn muốn gọi.

Kết luận và bài viết có liên quan

kết luận:
Sử dụng Axios để gọi một API trong React JS là một cách tiện lợi và linh hoạt để lấy dữ liệu từ server. Axios cung cấp một cú pháp đơn giản để gọi API bằng các phương thức HTTP như GET, POST, PUT và DELETE. Ngoài ra, Axios cũng có thể xử lý các yêu cầu truyền tham số, header và body cho các yêu cầu. Với Axios, chúng ta có thể sử dụng cú pháp async/await để gọi API và đợi cho kết quả trả về, giúp mã của chúng ta trở nên dễ đọc hơn và dễ bảo trì hơn. Tuy nhiên, việc sử dụng Axios cũng cần cẩn thận để tránh các lỗ hổng bảo mật. Chúng ta cần xác nhận rằng các yêu cầu được gửi đến server từ địa chỉ tin cậy và đảm bảo rằng chúng ta không gửi thông tin nhạy cảm như mật khẩu hoặc thông tin tài khoản trên đường truyền.

Bài viết có liên quan: 

Leave a Reply

Your email address will not be published. Required fields are marked *