Správa chyb Axios při použití backendu Spring Boot k načtení dat API podle ID ve Vite+React

Řešení chyb načítání API na základě ID ve Vite+React s Spring Boot

Při vytváření moderních webových aplikací je načítání dat z backendového API kritickým úkolem. Ve frontendu Vite+React je integrace s backendem Spring Boot ve většině případů bezproblémová. Při načítání dat podle ID však můžete narazit na specifické problémy, zejména při použití Axios.

Běžný problém nastává, když požadavky, které fungují přímo přes adresy URL v prohlížeči, selžou při vyvolání z frontendu. K jedné takové chybě dochází při načítání produktových dat podle ID z backendu Spring Boot. Tato situace může vést k chybám, které často souvisí s neodpovídajícími datovými typy.

V tomto článku se zaměříme na běžnou chybu, ke které dochází při načítání produktů podle ID pomocí Axios. Chyba se obvykle zobrazí jako „400 Bad Request“ na frontendu a ukazuje na neúspěšnou konverzi datového typu v backendu. Prozkoumáme jak příčinu tohoto problému, tak jeho řešení.

Vyřešením tohoto problému získáte hlubší porozumění zpracování převodů typů mezi frontendem a backendem. To zlepší vaši integraci API do aplikací Vite+React při práci s backendy Spring Boot.

Pochopení integrace Axios Fetch a Spring Boot

Kód frontendu, který jsem poskytl, používá Reagovat a Axios k načtení produktových dat z a Jarní bota backend. Kritickým bodem je načítání dat podle ID, což zahrnuje dynamickou manipulaci s trasami useParams v Reactu. The useParams hook zachytí ID produktu z adresy URL, které se pak předá komponentě, aby se spustila operace načtení. Toto ID musí být převedeno na celé číslo pomocí parseInt abyste se vyhnuli neshodám mezi frontendem a backendem, zajistěte, aby byl do backendu Spring Boot odeslán správný datový typ.

Axios provede požadavek GET na backend API pomocí koncového bodu: http://localhost:8080/api/products/{id}. Backend je strukturován tak, aby očekával celočíselnou hodnotu pro ID produktu. Pokud není ID převedeno správně, backend vyvolá chybu převodu typu, což vede k problému „400 Bad Request“. Protokol chyb backendu jasně uvádí, že se nepodařilo převést hodnotu řetězce na celé číslo, a proto je nezbytné před odesláním požadavku převést ID na frontendu.

V backendu Spring Boot je ProductController třída má namapován koncový bod /products/{id}. Toto řeší @PathVariable anotace, která spojuje parametr path s argumentem metody. Tím zajistíte, že řadič správně obdrží ID produktu předané v adrese URL. Řadič zase zavolá vrstvu služeb, aby načetl podrobnosti o produktu z databáze pomocí ProductService třída. Správné zacházení s PathVariable a servisní logika je klíčová pro prevenci chyb nesouladu typu.

Pro testování využívá frontend i backend testování jednotek k ověření, že řešení funguje v různých prostředích. ve frontendu, Žert se používá k zesměšňování požadavků Axios a zajišťuje, že komponenta správně vykresluje načtená produktová data. Podobně využívá backend MockMvc otestovat chování koncového bodu API a zkontrolovat, zda jsou při předání platných ID vrácena správná produktová data. Začleněním testů mohou vývojáři zajistit, že kód bude fungovat podle očekávání, čímž se sníží šance na chyby během výroby.

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

Překonání chyb načítání na základě ID v Axios a Spring Boot

Další kritický aspekt načítání dat z backendového API zahrnuje manipulaci chybové reakce elegantně. Při řešení dotazů založených na ID ve frontendu Vite+React je možné, že server vrátí chybu jako 400 špatný požadavek nebo je běžná neshoda typu. Je nezbytné porozumět tomu, jak předvídat a spravovat tyto chyby ve frontendu, abyste zajistili hladký uživatelský dojem. V našem příkladu analyzujeme Parametr ID správné používání JavaScriptu je klíčovým krokem, ale existují také další úvahy pro globální zpracování výjimek.

Ve složitějších aplikacích nastav hranice chyb v Reactu může pomoci zachytit tyto typy chyb bez zhroucení celé aplikace. To zahrnuje použití React's komponentDidCatch metoda životního cyklu nebo chybové háky v komponentách založených na funkcích. Řešení backendových chyb správným zobrazováním informativních zpráv uživateli může zabránit frustraci a zmatku, když volání API selžou. Tato metoda je zvláště užitečná pro zachycení problémů, jako jsou neplatná ID nebo nedostupné produkty.

Navíc implementace protokolování na frontendu i backendu může vývojářům pomoci identifikovat opakující se problémy a optimalizovat výkon. Například sledování frekvence výskytu určitých chyb během požadavků na načítání rozhraní API může odhalit základní chyby nebo neefektivitu. Sledování těchto událostí pomocí nástroje jako je Hlídka nebo prostřednictvím vlastních protokolovacích služeb zajistí, že je můžete rychle řešit. Tento postup výrazně zlepšuje spolehlivost a udržovatelnost vaší aplikace v průběhu času.