Giao tiếp với API bằng Axios trong React - Hướng dẫn từng bước

Trong ứng dụng React, giao tiếp với API là một yêu cầu phổ biến. Axios là một thư viện JavaScript phổ biến giúp đơn giản hóa quá trình gửi các yêu cầu HTTP và xử lý phản hồi. Hướng dẫn từng bước này sẽ hướng dẫn bạn sử dụng Axios trong ứng dụng React của bạn để giao tiếp với các API.

Cài đặt Axios

Mở thư mục dự án trong terminal và chạy lệnh sau để cài đặt Axios: npm install axios

Import Axios vào thành phần React của bạn bằng đoạn mã sau: import axios from 'axios'

Gửi yêu cầu GET

Để gửi yêu cầu GET và lấy dữ liệu từ một API, sử dụng phương thức axios.get().

Ví dụ:

axios.get('https://api.example.com/data')
  .then(response => {
    // Xử lý dữ liệu phản hồi
    console.log(response.data);
  })
  .catch(error => {
    // Xử lý lỗi
    console.error(error);
  });

Gửi yêu cầu POST

Để gửi yêu cầu POST và gửi dữ liệu đến một API, sử dụng phương thức axios.post().

Ví dụ:

axios.post('https://api.example.com/data', { name: 'John', age: 25 })
  .then(response => {
    // Xử lý dữ liệu phản hồi
    console.log(response.data);
  })
  .catch(error => {
    // Xử lý lỗi
    console.error(error);
  });

Xử lý lỗi

Axios cung cấp cơ chế xử lý lỗi tích hợp bằng cách sử dụng phương thức catch().

Ví dụ:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    // Xử lý lỗi
    if (error.response) {
      // Yêu cầu đã được gửi, nhưng máy chủ trả về mã lỗi
      console.error(error.response.data);
    } else if (error.request) {
      // Yêu cầu đã được gửi nhưng không nhận được phản hồi
      console.error(error.request);
    } else {
      // Xảy ra lỗi khác trong quá trình thiết lập yêu cầu
      console.error(error.message);
    }
  });

Tích hợp với các API RESTful

Axios hỗ trợ các API RESTful bằng cách cho phép bạn xác định các phương thức HTTP như GET, POST, PUT và DELETE.

Ví dụ:

// Yêu cầu GET với tham số truy vấn
axios.get('https://api.example.com/data', { params: { page: 1, limit: 10 } })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// Yêu cầu POST với dữ liệu
axios.post('https://api.example.com/data', { name: 'John', age: 25 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// Yêu cầu PUT để cập nhật dữ liệu hiện có
axios.put('https://api.example.com/data/1', { name: 'John Doe' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// Yêu cầu DELETE để xóa dữ liệu
axios.delete('https://api.example.com/data/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Bằng cách làm theo các bước và ví dụ này, bạn sẽ có thể giao tiếp hiệu quả với các API bằng cách sử dụng Axios trong ứng dụng React của mình.