Správa chýb Axios pri použití backendu Spring Boot na načítanie údajov API podľa ID vo Vite+React

Riešenie chýb načítania API na základe ID vo Vite+React s Spring Boot

Pri vytváraní moderných webových aplikácií je načítanie údajov z backendového API kritickou úlohou. Vo frontende Vite+React je integrácia s backendom Spring Boot vo väčšine prípadov bezproblémová. Pri získavaní údajov podľa ID sa však môžete stretnúť so špecifickými problémami, najmä pri používaní Axios.

Bežný problém vzniká, keď požiadavky, ktoré fungujú priamo cez adresy URL v prehliadači, zlyhajú pri vyvolaní z frontendu. Jedna takáto chyba sa vyskytuje pri načítavaní údajov o produkte podľa ID z backendu Spring Boot. Táto situácia môže viesť k chybám, ktoré často súvisia s nezhodnými typmi údajov.

V tomto článku sa zameriame na bežnú chybu, ktorá sa vyskytuje pri načítavaní produktov podľa ID pomocou Axios. Chyba sa zvyčajne zobrazuje ako „400 Bad Request“ v klientskom rozhraní a poukazuje na neúspešnú konverziu typu údajov v backende. Preskúmame príčinu tohto problému a jeho riešenie.

Vyriešením tohto problému získate hlbšie pochopenie spracovania konverzií typov medzi frontendom a backendom. Toto zlepší vašu integráciu API v aplikáciách Vite+React pri práci s backendmi Spring Boot.

Pochopenie integrácie Axios Fetch a Spring Boot

Kód frontendu, ktorý som poskytol, používa Reagovať a Axios získať údaje o produkte z a Jarná čižma backend. Kritickým bodom je získavanie údajov podľa ID, ktoré zahŕňa dynamické spracovanie trasy useParams v React. The useParams hook zachytí ID produktu z adresy URL, ktoré sa potom odovzdá komponentu, aby sa spustila operácia načítania. Toto ID je potrebné previesť na celé číslo pomocou parseInt aby ste predišli nesúladu medzi frontendom a backendom, zabezpečte, aby bol do backendu Spring Boot odoslaný správny typ údajov.

Axios vykoná požiadavku GET na backend API pomocou koncového bodu: http://localhost:8080/api/products/{id}. Backend je štruktúrovaný tak, aby očakával celočíselné hodnoty pre ID produktu. Ak ID nie je skonvertované správne, backend vyvolá chybu konverzie typu, čo vedie k problému „400 Bad Request“. Protokol chýb backendu jasne uvádza, že sa nepodarilo konvertovať hodnotu reťazca na celé číslo, a preto je nevyhnutné previesť ID na frontende pred podaním požiadavky.

V backende Spring Boot je ProductController trieda má namapovaný koncový bod /products/{id}. Toto rieši @PathVariable anotácia, ktorá spája parameter cesty s argumentom metódy. To zaisťuje, že kontrolér správne prijme ID produktu odovzdané v adrese URL. Kontrolér zase zavolá vrstvu služieb, aby načítal podrobnosti o produkte z databázy pomocou ProductService trieda. Správna manipulácia s PathVariable a servisná logika je rozhodujúca pri predchádzaní chybám nesúladu typu.

Na testovanie využívajú frontend aj backend testovanie jednotiek na overenie, či riešenie funguje v rôznych prostrediach. Vo frontende Jest sa používa na zosmiešňovanie požiadaviek Axios, čím sa zabezpečuje, že komponent správne vykresľuje načítané produktové dáta. Podobne využíva backend MockMvc aby ste otestovali správanie koncového bodu API a skontrolovali, či sa po odovzdaní platných identifikátorov vrátia správne údaje o produkte. Začlenením testov môžu vývojári zabezpečiť, aby kód fungoval podľa očakávania, čím sa zníži pravdepodobnosť chýb počas 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"));
  }
}

Prekonávanie chýb načítania založených na ID v Axios a Spring Boot

Ďalším kritickým aspektom získavania údajov z backendového API je manipulácia chybové odpovede pôvabne. Pri riešení dotazov založených na ID v rozhraní Vite+React je možné, že server vráti chybu ako 400 Zlá požiadavka alebo nezhoda typu je bežná. Je dôležité pochopiť, ako predvídať a spravovať tieto chyby vo frontende, aby sa zabezpečila bezproblémová používateľská skúsenosť. V našom príklade analyzujeme ID parameter správne používanie JavaScriptu je kľúčovým krokom, no existujú aj ďalšie úvahy o globálnom spracovaní výnimiek.

V zložitejších aplikáciách nastavenie hranice chýb v React môže pomôcť zachytiť tieto typy chýb bez zrútenia celej aplikácie. To zahŕňa použitie React's komponentDidCatch metóda životného cyklu alebo háčiky na hraniciach chýb v komponentoch založených na funkciách. Spracovanie backend chýb správnym zobrazovaním informatívnych správ používateľovi môže zabrániť frustrácii a zmätku, keď volania API zlyhajú. Táto metóda je užitočná najmä na zachytenie problémov, ako sú neplatné ID alebo nedostupné produkty.

Okrem toho implementácia protokolovania na frontende aj backende môže pomôcť vývojárom identifikovať opakujúce sa problémy a optimalizovať výkon. Napríklad sledovanie frekvencie výskytu určitých chýb počas žiadostí o načítanie rozhrania API môže odhaliť základné chyby alebo neefektívnosť. Monitorovanie týchto udalostí pomocou nástroja, ako je Strážca alebo prostredníctvom vlastných protokolovacích služieb zaisťuje, že ich môžete okamžite riešiť. Tento postup výrazne zlepšuje spoľahlivosť a udržiavateľnosť vašej aplikácie v priebehu času.