Administrere Axios-feil ved bruk av Spring Boot Backend for å hente API-data etter ID i Vite+React

Løser ID-baserte API-hentingsfeil i Vite+React med Spring Boot

Når du bygger moderne nettapplikasjoner, er det en kritisk oppgave å hente data fra et backend-API. I en Vite+React-frontend er integrering med en Spring Boot-backend sømløs i de fleste tilfeller. Du kan imidlertid støte på spesifikke problemer når du henter data etter ID, spesielt når du bruker Axios.

Et vanlig problem oppstår når forespørsler som fungerer direkte gjennom URL-er i nettleseren mislykkes når de påkalles fra frontend. En slik feil oppstår under henting av produktdata etter ID fra en Spring Boot-backend. Denne situasjonen kan føre til feil, ofte relatert til datatyper som ikke samsvarer.

I denne artikkelen vil vi fokusere på en vanlig feil som oppstår under henting av produkter etter ID ved hjelp av Axios. Feilen vises vanligvis som en "400 Bad Request" i frontend og peker på en mislykket datatypekonvertering i backend. Vi skal utforske både årsaken til dette problemet og løsningen.

Ved å løse dette problemet vil du få en dypere forståelse av håndtering av typekonverteringer mellom frontend og backend. Dette vil forbedre API-integrasjonen din i Vite+React-applikasjoner mens du arbeider med Spring Boot-backends.

Forstå Axios Fetch og Spring Boot Integration

Frontend-koden jeg ga bruker Reagere og Axios å hente produktdata fra en Fjærstøvel backend. Det kritiske punktet er å hente dataene etter ID, som involverer dynamisk rutehåndtering med bruk Params i React. De bruk Params hook fanger opp produkt-ID-en fra URL-en, som deretter sendes inn i komponenten for å utløse henteoperasjonen. Denne ID-en må konverteres til et heltall ved hjelp av parseInt for å unngå uoverensstemmelser mellom frontend og backend, og sørg for at riktig datatype sendes til Spring Boot-backend.

Axios utfører GET-forespørselen til backend API ved å bruke endepunktet: http://localhost:8080/api/products/{id}. Backend er strukturert for å forvente en heltallsverdi for produkt-ID-en. Hvis ID-en ikke konverteres riktig, sender backend-en en typekonverteringsfeil, som fører til "400 Bad Request"-problemet. Backends feillogg sier tydelig at den ikke klarte å konvertere strengverdien til et heltall, og det er derfor det er viktig å konvertere ID-en på frontend før du sender forespørselen.

I Spring Boot-backend, den Produktkontroller klasse har et endepunkt tilordnet /produkter/{id}. Dette håndteres av @PathVariable merknad, som binder baneparameteren til metodeargumentet. Dette sikrer at produkt-ID-en som sendes i URL-en mottas riktig av kontrolløren. Kontrolleren ringer på sin side servicelaget for å hente produktdetaljene fra databasen ved hjelp av Produktservice klasse. Riktig håndtering av PathVariable og tjenestelogikk er avgjørende for å forhindre typefeil.

For testing bruker både frontend og backend enhetstesting for å validere at løsningen fungerer på tvers av forskjellige miljøer. I frontend, Spøk brukes til å håne Axios-forespørsler, for å sikre at komponenten gjengir de hentede produktdataene riktig. Tilsvarende bruker backend MockMvc for å teste API-endepunktets virkemåte ved å kontrollere at riktig produktdata returneres når gyldige ID-er sendes. Ved å inkludere tester kan utviklere sikre at koden fungerer som forventet, noe som reduserer sjansene for feil under produksjonen.

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

Overvinne ID-baserte hentingsfeil i Axios og Spring Boot

Et annet kritisk aspekt ved å hente data fra en backend API involverer håndtering feilsvar grasiøst. Når du håndterer ID-baserte søk i en Vite+React-grensesnitt, er muligheten for at serveren returnerer en feil som 400 Dårlig forespørsel eller en type uoverensstemmelse er vanlig. Det er viktig å forstå hvordan man kan forutse og håndtere disse feilene i frontend for å sikre en jevn brukeropplevelse. I vårt eksempel, parsing av ID-parameter riktig bruk av JavaScript er et nøkkeltrinn, men det er også flere hensyn for å håndtere unntak globalt.

I mer komplekse applikasjoner, oppsett feilgrenser in React kan hjelpe med å fange opp denne typen feil uten å krasje hele applikasjonen. Dette innebærer å bruke React's componentDidCatch livssyklusmetode eller feilgrensekroker i funksjonsbaserte komponenter. Håndtering av backend-feil ved å vise informative meldinger på riktig måte til brukeren kan forhindre frustrasjon og forvirring når API-anrop mislykkes. Denne metoden er spesielt nyttig for å fange opp problemer som ugyldige ID-er eller utilgjengelige produkter.

Videre kan implementering av logging på både frontend og backend hjelpe utviklere med å identifisere tilbakevendende problemer og optimalisere ytelsen. For eksempel kan sporing av hvor ofte visse feil oppstår under API-hentingsforespørsler avsløre underliggende feil eller ineffektivitet. Overvåking av disse hendelsene med et verktøy som Sentry eller gjennom tilpassede loggingstjenester sikrer du at du kan adressere dem umiddelbart. Denne praksisen forbedrer applikasjonens pålitelighet og vedlikehold betydelig over tid.