Vite+React中使用Spring Boot后端通过ID获取API数据时处理axios错误

使用 Spring Boot 后端处理 Vite+React 中的 Axios 错误

该脚本使用 React 和 Axios 从 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);
  }
}

添加产品获取功能的单元测试

使用 Jest 创建单元测试来验证 React 中 Axios 获取请求的正确功能。

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 测试 Spring Boot 后端

此示例演示如何使用 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获取数据的常见问题

1. 为什么我的 Axios 请求在通过 ID 获取时返回 400 错误？
2. 当 URL parameter 未正确转换为预期的数据类型，例如从字符串转换为整数。使用 parseInt() 解决这个问题。
3. 如何处理 Axios 请求中的错误？
4. 您可以使用处理错误 try-catch 异步函数中的块。另外，使用 axios.interceptors 用于全局错误处理。
5. @PathVariable在Spring Boot中的作用是什么？
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获取问题

通过 ID 从后端 API 获取数据可能会带来独特的挑战，尤其是当后端需要严格的数据类型时。在我们的示例中，正确转换 ID 在使用 Axios 发送请求之前在前端进行配置有助于防止出现“400 Bad Request”错误等问题。确保前端和后端之间的数据类型兼容对于顺利通信至关重要。

此外，在前端和后端实施适当的错误处理策略将进一步增强应用程序的稳定性。使用日志框架和错误边界等工具将确保可以识别和修复重复出现的问题，从而提高用户体验和系统可靠性。