Spring Boot 백엔드를 사용하여 Vite+React에서 ID로 API 데이터를 검색할 때 Axios 오류 관리

Spring Boot 백엔드를 사용하여 Vite+React의 Axios 오류 처리

이 스크립트는 Axios와 함께 React를 사용하여 Spring Boot 백엔드에서 ID로 제품 데이터를 가져옵니다. 여기서 문제는 가져오기 프로세스 중 오류를 방지하기 위해 경로 매개변수를 올바른 유형으로 변환하는 것과 관련됩니다.

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;

ID별 제품 가져오기를 위한 Spring Boot 백엔드 처리

이 Spring Boot 백엔드 코드는 데이터베이스에서 해당 ID로 제품을 가져옵니다. 정수 유형 변환을 처리하여 데이터가 올바르게 전달되고 검색되도록 합니다.

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);
  }
}

제품 가져오기 기능에 대한 단위 테스트 추가

단위 테스트는 React에서 Axios 가져오기 요청의 올바른 기능을 확인하기 위해 Jest를 사용하여 생성됩니다.

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());
});

MockMvc로 스프링 부트 백엔드 테스트하기

이 예제에서는 적절한 요청 및 응답 처리를 보장하기 위해 MockMvc 프레임워크를 사용하여 Spring Boot 백엔드를 테스트하는 방법을 보여줍니다.

@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"));
  }
}

Axios 및 Spring Boot에서 ID로 데이터를 가져오는 방법에 대해 자주 묻는 질문(FAQ)

1. ID로 가져올 때 Axios 요청이 400 오류를 반환하는 이유는 무엇입니까?
2. 이는 다음과 같은 경우에 발생합니다. URL parameter 문자열에서 정수로 등 예상되는 데이터 유형으로 올바르게 변환되지 않습니다. 사용 parseInt() 이 문제를 해결하려면.
3. Axios 요청의 오류를 어떻게 처리합니까?
4. 다음을 사용하여 오류를 처리할 수 있습니다. try-catch 비동기 함수의 블록. 또한, axios.interceptors 전역 오류 처리를 위해.
5. Spring Boot에서 @PathVariable의 역할은 무엇입니까?
6. 그만큼 @PathVariable 주석은 URL의 값을 백엔드의 메소드 매개변수에 바인딩하여 URL을 기반으로 데이터를 동적으로 검색하는 데 도움을 줍니다.
7. React에서 Axios API 호출을 어떻게 테스트할 수 있나요?
8. 다음과 같은 테스트 라이브러리를 사용하십시오. Jest 그리고 axios-mock-adapter API 응답을 시뮬레이션하고 Axios 요청의 동작을 테스트합니다.
9. Spring Boot에서 오류를 기록하는 좋은 방법은 무엇입니까?
10. 당신은 사용할 수 있습니다 SLF4J 또는 Logback Spring Boot의 백엔드 로깅용. 이를 통해 API 요청과 관련하여 반복되는 문제를 추적하고 해결할 수 있습니다.

Vite+React의 ID 가져오기 문제 해결

백엔드 API에서 ID로 데이터를 가져오는 것은 특히 백엔드에서 엄격한 데이터 유형을 요구하는 경우 고유한 문제를 야기할 수 있습니다. 이 예에서는 ID Axios로 요청을 보내기 전에 프런트엔드에서 "400 잘못된 요청" 오류와 같은 문제를 방지하는 데 도움이 되었습니다. 원활한 통신을 위해서는 프런트엔드와 백엔드 간의 데이터 유형 호환성을 보장하는 것이 중요합니다.

또한 프런트엔드와 백엔드 모두에서 적절한 오류 처리 전략을 구현하면 애플리케이션의 안정성이 더욱 향상됩니다. 로깅 프레임워크 및 오류 경계와 같은 도구를 사용하면 반복되는 문제를 식별하고 해결할 수 있어 사용자 경험과 시스템 안정성이 향상됩니다.