AXIN8 – Xóa dữ liệu với DELETE request

Bước 1: Tạo Axios Instance

Đầu tiên, chúng ta tạo một file axiosInstance.js để tạo một instance của Axios.

import axios from 'axios';

// Tạo instance của Axios với base URL
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});

export default axiosInstance;

Bước 2: Sử dụng Axios Instance trong một React Component

Sau khi tạo instance của Axios, chúng ta sử dụng nó trong một component React để thực hiện yêu cầu DELETE và xử lý phản hồi.

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

const DeleteDataComponent = () => {
  const [items, setItems] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const response = await axios.get('/items');
        setItems(response.data);
      } catch (error) {
        setError(error);
      }
    };

    fetchItems();
  }, []);

  const handleDelete = async (itemId) => {
    try {
      await axios.delete(`/items/${itemId}`);
      setItems(items.filter(item => item.id !== itemId));
    } catch (error) {
      setError(error);
    }
  };

  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleDelete(item.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DeleteDataComponent;

Giải thích cấu trúc mã:

1. Tạo Axios Instance:
   • axios.create({ baseURL: 'https://api.example.com' }): Tạo một instance của Axios với URL cơ bản.
2. Sử dụng Axios Instance trong Component:
   • useState: Dùng để quản lý state cho items và error.
   • useEffect: Dùng để thực hiện hàm fetchItems ngay khi component được render.
   • axios.get('/items'): Thực hiện yêu cầu GET tới endpoint /items để lấy danh sách các mục.
   • setItems(response.data): Lưu danh sách các mục vào state items.
   • handleDelete: Hàm xử lý khi người dùng nhấn nút xóa. Nó gửi yêu cầu DELETE và cập nhật lại danh sách items.
   • axios.delete(/items/${itemId}): Thực hiện yêu cầu DELETE tới endpoint /items/${itemId} để xóa mục với itemId tương ứng.
   • setItems(items.filter(item => item.id !== itemId)): Loại bỏ mục đã bị xóa khỏi state items.
   • return <h1>Items</h1><ul>...</ul>: Hiển thị danh sách các mục và nút xóa tương ứng.
   • return <div>Error: {error.message}</div>: Hiển thị lỗi nếu có.

Nguồn tham khảo:

• Axios Documentation
• LogRocket Blog