Az Axios hibák kezelése a Spring Boot háttérrendszer használatakor az API adatok lekéréséhez azonosító alapján a Vite+React alkalmazásban

ID-alapú API lekérési hibák megoldása a Vite+React alkalmazásban a Spring Boot segítségével

Modern webalkalmazások készítésekor az adatok lekérése egy háttér API-ból kritikus feladat. A Vite+React előtérben a Spring Boot háttérrendszerrel való integráció a legtöbb esetben zökkenőmentes. Azonban bizonyos problémákba ütközhet az adatok azonosító alapján történő lekérésekor, különösen az Axios használatakor.

Gyakori probléma akkor merül fel, ha a böngészőben közvetlenül az URL-eken keresztül működő kérések meghiúsulnak, amikor a frontendről hívják őket. Egy ilyen hiba történik, amikor a termékadatokat azonosító alapján lekéri egy Spring Boot háttérrendszerről. Ez a helyzet hibákhoz vezethet, amelyek gyakran nem egyező adattípusokkal kapcsolatosak.

Ebben a cikkben egy gyakori hibára összpontosítunk, amely a termékek Axios használatával történő azonosító alapján történő lekérésekor tapasztalható. A hiba általában "400 hibás kérésként" jelenik meg a frontendben, és a háttérben meghiúsult adattípus-konverzióra utal. Megvizsgáljuk a probléma okát és megoldását is.

A probléma megoldásával mélyebben megértheti a típuskonverziók kezelését a frontend és a háttérrendszer között. Ez javítja az API-integrációt a Vite+React alkalmazásokban, miközben Spring Boot háttérrendszerekkel dolgozik.

Az Axios Fetch és a Spring Boot integráció megértése

Az általam megadott frontend kód használja Reagál és Axios termékadatok lekéréséhez a Spring Boot backend. A kritikus pont az adatok azonosító alapján történő lekérése, amely dinamikus útvonalkezelést foglal magában useParams a Reactban. A useParams hook rögzíti a termékazonosítót az URL-ből, amelyet aztán átad az összetevőnek, hogy elindítsa a lekérési műveletet. Ezt az azonosítót a segítségével egész számmá kell konvertálni parseInt az előtér és a háttér közötti eltérések elkerülése érdekében, biztosítva a megfelelő adattípust a Spring Boot háttérrendszernek.

Az Axios végrehajtja a GET kérést a háttér API-hoz a következő végpont használatával: http://localhost:8080/api/products/{id}. A háttérrendszer úgy van felépítve, hogy egész számot várjon a termékazonosítóhoz. Ha az azonosító nem konvertálódik megfelelően, a háttérrendszer típuskonverziós hibát dob, ami a „400 Bad Request” problémához vezet. A backend hibanaplója egyértelműen kijelenti, hogy nem sikerült a karakterlánc értékét egész számmá konvertálni, ezért elengedhetetlen az azonosító konvertálása az előtérben a kérelem benyújtása előtt.

A Spring Boot háttérprogramban a ProductController osztálynak van egy végpontja hozzárendelve /termékek/{id}. Ezt kezeli a @PathVariable annotáció, amely a path paramétert a metódus argumentumához köti. Ez biztosítja, hogy az URL-ben átadott termékazonosítót helyesen fogadja a vezérlő. A vezérlő pedig meghívja a szolgáltatási réteget, hogy lekérje a termék részleteit az adatbázisból a segítségével ProductService osztály. Megfelelő kezelése PathVariable és a szolgáltatási logika kulcsfontosságú a típushibák megelőzésében.

A teszteléshez mind a frontend, mind a háttérrendszer egységtesztet használ annak ellenőrzésére, hogy a megoldás különböző környezetekben működik-e. A frontendben, Tréfa Az Axios kérések gúnyolására szolgál, biztosítva, hogy az összetevő helyesen jelenítse meg a lekért termékadatokat. Hasonlóképpen a backend alkalmaz MockMvc az API-végpont viselkedésének teszteléséhez, ellenőrizve, hogy a megfelelő termékadatokat adják vissza az érvényes azonosítók átadásakor. A tesztek beépítésével a fejlesztők biztosíthatják, hogy a kód az elvárásoknak megfelelően működjön, csökkentve ezzel a hibák esélyét a gyártás során.

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

Az Axios és a Spring Boot azonosító alapú lekérési hibáinak leküzdése

Az adatok háttér API-ból való lekérésének másik kritikus szempontja a kezelés hibaválaszok kecsesen. Amikor azonosító alapú lekérdezéseket kezel egy Vite+React frontendben, előfordulhat, hogy a szerver hibát ad vissza, mint pl. 400 Rossz kérés vagy gyakori a típuseltérés. A zökkenőmentes felhasználói élmény érdekében elengedhetetlen annak megértése, hogyan lehet előre látni és kezelni ezeket a hibákat a frontendben. Példánkban a ID paraméter A JavaScript megfelelő használata kulcsfontosságú lépés, de további szempontok is vannak a kivételek globális kezeléséhez.

Bonyolultabb alkalmazásoknál beállítás hibahatárok a React segíthet az ilyen típusú hibák rögzítésében anélkül, hogy a teljes alkalmazás összeomlik. Ez magában foglalja a React használatát komponentDidCatch életciklus-módszer vagy hibahatár-horgok funkcióalapú komponensekben. A háttérhibák kezelése a felhasználónak szóló tájékoztató üzenetek megfelelő megjelenítésével megelőzheti a frusztrációt és a zavart, amikor az API-hívások meghiúsulnak. Ez a módszer különösen akkor hasznos, ha olyan problémákat észlel, mint az érvénytelen azonosítók vagy a nem elérhető termékek.

Ezenkívül a naplózás megvalósítása az előtérben és a háttérben egyaránt segíthet a fejlesztőknek az ismétlődő problémák azonosításában és a teljesítmény optimalizálásában. Például annak nyomon követése, hogy bizonyos hibák milyen gyakran fordulnak elő az API-lekérések során, felfedheti a mögöttes hibákat vagy a hatékonyságot. Ezen események nyomon követése olyan eszközzel, mint pl Őrszem vagy egyéni naplózási szolgáltatásokon keresztül biztosítja, hogy azonnal meg tudja oldani őket. Ez a gyakorlat idővel jelentősen javítja az alkalmazás megbízhatóságát és karbantarthatóságát.