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

製品フェッチ機能の単体テストの追加

単体テストは、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. 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 フェッチの問題の解決

ID によってバックエンド API からデータを取得することは、特にバックエンドが厳密なデータ型を期待している場合に、特有の課題を引き起こす可能性があります。この例では、 ID Axios でリクエストを送信する前にフロントエンドで「400 Bad Request」エラーなどの問題を防ぐことができました。スムーズな通信のためには、フロントエンドとバックエンドの間でデータ型の互換性を確保することが重要です。

さらに、フロントエンドとバックエンドの両方で適切なエラー処理戦略を実装すると、アプリケーションの安定性がさらに向上します。ログ フレームワークやエラー境界などのツールを使用すると、繰り返し発生する問題を確実に特定して修正できるため、ユーザー エクスペリエンスとシステムの信頼性が向上します。