Quản lý lỗi Axios khi sử dụng Spring Boot Backend để truy xuất dữ liệu API theo ID trong Vite+React

Giải quyết các lỗi tìm nạp API dựa trên ID trong Vite+React bằng Spring Boot

Khi xây dựng các ứng dụng web hiện đại, việc tìm nạp dữ liệu từ API phụ trợ là một nhiệm vụ quan trọng. Trong giao diện người dùng Vite+React, việc tích hợp với phần phụ trợ Spring Boot diễn ra liền mạch trong hầu hết các trường hợp. Tuy nhiên, bạn có thể gặp phải sự cố cụ thể khi tìm nạp dữ liệu theo ID, đặc biệt là khi sử dụng Axios.

Một vấn đề phổ biến phát sinh khi các yêu cầu hoạt động trực tiếp thông qua URL trong trình duyệt không thành công khi được gọi từ giao diện người dùng. Một lỗi như vậy xảy ra khi tìm nạp dữ liệu sản phẩm theo ID từ chương trình phụ trợ Spring Boot. Tình trạng này có thể dẫn đến sai sót, thường liên quan đến kiểu dữ liệu không khớp.

Trong bài viết này, chúng tôi sẽ tập trung vào một lỗi phổ biến gặp phải khi tìm nạp sản phẩm theo ID bằng Axios. Lỗi thường hiển thị dưới dạng "Yêu cầu không hợp lệ 400" ở giao diện người dùng và trỏ đến việc chuyển đổi loại dữ liệu không thành công ở phần phụ trợ. Chúng ta sẽ khám phá cả nguyên nhân của vấn đề này và giải pháp của nó.

Bằng cách giải quyết vấn đề này, bạn sẽ hiểu sâu hơn về cách xử lý chuyển đổi loại giữa giao diện người dùng và phụ trợ. Điều này sẽ cải thiện khả năng tích hợp API của bạn trong các ứng dụng Vite+React khi làm việc với các chương trình phụ trợ Spring Boot.

Tìm hiểu về tích hợp Axios Fetch và Spring Boot

Mã lối vào tôi đã cung cấp sử dụng Phản ứng Và Axios để lấy dữ liệu sản phẩm từ một Khởi động mùa xuân phụ trợ. Điểm quan trọng là tìm nạp dữ liệu theo ID, bao gồm việc xử lý tuyến đường động với sử dụngParams trong Phản ứng. các sử dụngParams hook lấy ID sản phẩm từ URL, sau đó được chuyển vào thành phần để kích hoạt thao tác tìm nạp. ID này phải được chuyển đổi thành số nguyên bằng cách sử dụng phân tích cú phápInt để tránh tình trạng không khớp giữa frontend và backend, đảm bảo gửi đúng kiểu dữ liệu đến backend Spring Boot.

Axios thực hiện yêu cầu GET tới API phụ trợ bằng điểm cuối: http://localhost:8080/api/products/{id}. Phần phụ trợ được cấu trúc để mong đợi một giá trị số nguyên cho ID sản phẩm. Nếu ID không được chuyển đổi chính xác, chương trình phụ trợ sẽ đưa ra lỗi chuyển đổi loại, dẫn đến sự cố "400 Yêu cầu Không hợp lệ". Nhật ký lỗi của phần phụ trợ nêu rõ rằng không thể chuyển đổi giá trị chuỗi thành số nguyên, đó là lý do tại sao việc chuyển đổi ID trên giao diện người dùng trước khi thực hiện yêu cầu là điều cần thiết.

Trong phần phụ trợ của Spring Boot, Bộ điều khiển sản phẩm lớp có điểm cuối được ánh xạ tới /sản phẩm/{id}. Việc này được xử lý bởi @PathVariable chú thích, liên kết tham số đường dẫn với đối số phương thức. Điều này đảm bảo rằng ID sản phẩm được chuyển trong URL được bộ điều khiển nhận chính xác. Đến lượt bộ điều khiển gọi lớp dịch vụ để lấy thông tin chi tiết về sản phẩm từ cơ sở dữ liệu bằng cách sử dụng Sản phẩmDịch vụ lớp học. Xử lý thích hợp Đường dẫnBiến và logic dịch vụ là rất quan trọng trong việc ngăn ngừa lỗi không khớp loại.

Để thử nghiệm, cả giao diện người dùng và phụ trợ đều sử dụng thử nghiệm đơn vị để xác thực rằng giải pháp hoạt động trên các môi trường khác nhau. Ở mặt trước, trò đùa được sử dụng để mô phỏng các yêu cầu của Axios, đảm bảo rằng thành phần này hiển thị chính xác dữ liệu sản phẩm được tìm nạp. Tương tự, phần phụ trợ sử dụng MockMvc để kiểm tra hành vi của điểm cuối API, kiểm tra xem dữ liệu sản phẩm chính xác có được trả về khi chuyển ID hợp lệ hay không. Bằng cách kết hợp các thử nghiệm, nhà phát triển có thể đảm bảo rằng mã hoạt động như mong đợi, giảm nguy cơ xảy ra lỗi trong quá trình sản xuất.

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "../axios";
const Product = () => {
  const { id } = useParams();
  const [product, setProduct] = useState(null);
  useEffect(() => {
    const fetchProduct = async () => {
      try {
        // Parse id to an integer to avoid "NaN" errors
        const productId = parseInt(id, 10);
        const response = await axios.get(`http://localhost:8080/api/products/${productId}`);
        setProduct(response.data);
      } catch (error) {
        console.error("Error fetching product:", error);
      }
    };
    fetchProduct();
  }, [id]);
  if (!product) {
    return <h2 className="text-center">Loading...</h2>;
  }
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
};
export default Product;

import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api")
public class ProductController {
  @Autowired
  private ProductService productService;
  @GetMapping("/products/{id}")
  public Product getProduct(@PathVariable int id) {
    return productService.getProductById(id);
  }
}

import { render, screen, waitFor } from '@testing-library/react';
import axios from 'axios';
import Product from './Product';
jest.mock('axios');
test('fetches and displays product', async () => {
  axios.get.mockResolvedValue({ data: { name: 'Product1', description: 'A sample product' } });
  render(<Product />);
  await waitFor(() => expect(screen.getByText('Product1')).toBeInTheDocument());
});

@RunWith(SpringRunner.class)
@WebMvcTest(ProductController.class)
public class ProductControllerTest {
  @Autowired
  private MockMvc mockMvc;
  @Test
  public void testGetProductById() throws Exception {
    mockMvc.perform(get("/api/products/1"))
      .andExpect(status().isOk())
      .andExpect(jsonPath("$.name").value("Product1"));
  }
}

Khắc phục lỗi tìm nạp dựa trên ID trong Axios và Spring Boot

Một khía cạnh quan trọng khác của việc tìm nạp dữ liệu từ API phụ trợ liên quan đến việc xử lý phản hồi lỗi một cách duyên dáng. Khi xử lý các truy vấn dựa trên ID trong giao diện người dùng Vite+React, có khả năng máy chủ trả về lỗi như 400 yêu cầu xấu hoặc một loại không phù hợp là phổ biến. Điều cần thiết là phải hiểu cách dự đoán và quản lý những lỗi này ở giao diện người dùng để đảm bảo trải nghiệm người dùng suôn sẻ. Trong ví dụ của chúng tôi, phân tích cú pháp tham số ID sử dụng JavaScript đúng cách là một bước quan trọng, nhưng cũng có những cân nhắc bổ sung để xử lý các ngoại lệ trên toàn cầu.

Trong các ứng dụng phức tạp hơn, việc thiết lập ranh giới lỗi trong React có thể giúp nắm bắt các loại lỗi này mà không làm hỏng toàn bộ ứng dụng. Điều này liên quan đến việc sử dụng React's thành phầnDidCatch phương pháp vòng đời hoặc các móc nối ranh giới lỗi trong các thành phần dựa trên chức năng. Xử lý lỗi phụ trợ bằng cách hiển thị chính xác các thông báo mang tính thông tin cho người dùng có thể ngăn ngừa sự thất vọng và nhầm lẫn khi lệnh gọi API không thành công. Phương pháp này đặc biệt hữu ích để phát hiện các vấn đề như ID không hợp lệ hoặc sản phẩm không có sẵn.

Hơn nữa, việc triển khai ghi nhật ký trên cả giao diện người dùng và phụ trợ có thể giúp nhà phát triển xác định các sự cố định kỳ và tối ưu hóa hiệu suất. Ví dụ: việc theo dõi tần suất xảy ra một số lỗi nhất định trong các yêu cầu tìm nạp API có thể tiết lộ các lỗi cơ bản hoặc sự kém hiệu quả. Theo dõi những sự kiện này bằng một công cụ như lính gác hoặc thông qua các dịch vụ ghi nhật ký tùy chỉnh để đảm bảo bạn có thể giải quyết chúng kịp thời. Cách thực hành này cải thiện đáng kể độ tin cậy và khả năng bảo trì của ứng dụng của bạn theo thời gian.