Hantera Axios-fel när du använder Spring Boot Backend för att hämta API-data efter ID i Vite+React

Löser ID-baserade API-hämtningsfel i Vite+React med Spring Boot

När du bygger moderna webbapplikationer är det en kritisk uppgift att hämta data från ett backend-API. I en Vite+React-frontend är integration med en Spring Boot-backend sömlös i de flesta fall. Du kan dock stöta på specifika problem när du hämtar data via ID, särskilt när du använder Axios.

Ett vanligt problem uppstår när förfrågningar som fungerar direkt via webbadresser i webbläsaren misslyckas när de anropas från frontend. Ett sådant fel uppstår när produktdata hämtas efter ID från en Spring Boot-backend. Denna situation kan leda till fel, ofta relaterade till felaktiga datatyper.

I den här artikeln kommer vi att fokusera på ett vanligt fel som uppstår vid hämtning av produkter med ID med Axios. Felet visas vanligtvis som en "400 Bad Request" i frontend och pekar på en misslyckad datatypkonvertering i backend. Vi kommer att utforska både orsaken till detta problem och dess lösning.

Genom att ta itu med det här problemet får du en djupare förståelse för hantering av typkonverteringar mellan frontend och backend. Detta kommer att förbättra din API-integrering i Vite+React-applikationer medan du arbetar med Spring Boot-backends.

Förstå Axios Fetch och Spring Boot Integration

Frontend-koden jag angav använder Reagera och Axios för att hämta produktdata från en Fjäderkänga backend. Den kritiska punkten är att hämta data med ID, vilket involverar dynamisk rutthantering med använd Params i React. De använd Params hook fångar produkt-ID:t från URL:en, som sedan skickas in i komponenten för att utlösa hämtningsoperationen. Detta ID måste konverteras till ett heltal med hjälp av parseInt För att undvika felmatchningar mellan frontend och backend, se till att rätt datatyp skickas till Spring Boot-backend.

Axios utför GET-begäran till backend-API:et med hjälp av slutpunkten: http://localhost:8080/api/products/{id}. Backend är strukturerad för att förvänta sig ett heltalsvärde för produkt-ID:t. Om ID:t inte konverteras korrekt, ger backend ett typkonverteringsfel, vilket leder till problemet "400 Bad Request". Backendens fellogg anger tydligt att den misslyckades med att konvertera strängvärdet till ett heltal, varför det är viktigt att konvertera ID:t på frontend innan begäran.

I Spring Boot-backend, den ProductController klass har en slutpunkt mappad till /produkter/{id}. Detta hanteras av @PathVariable annotation, som binder sökvägsparametern till metodargumentet. Detta säkerställer att produkt-ID:t som skickas i URL:en tas emot korrekt av kontrollanten. Styrenheten anropar i sin tur servicelagret för att hämta produktinformationen från databasen med hjälp av Produktservice klass. Korrekt hantering av PathVariable och servicelogik är avgörande för att förhindra typfel överensstämmelse.

För testning använder både frontend och backend enhetstestning för att validera att lösningen fungerar i olika miljöer. I fronten, Skoj används för att håna Axios-förfrågningar, vilket säkerställer att komponenten återger den hämtade produktdatan korrekt. På liknande sätt använder backend MockMvc för att testa API-slutpunktens beteende och kontrollera att korrekt produktdata returneras när giltiga ID:n skickas. Genom att införliva tester kan utvecklare säkerställa att koden fungerar som förväntat, vilket minskar risken för buggar under produktionen.

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

Att övervinna ID-baserade hämtningsfel i Axios och Spring Boot

En annan kritisk aspekt av att hämta data från ett backend-API involverar hantering felsvar graciöst. När man hanterar ID-baserade frågor i ett Vite+React-gränssnitt kan servern returnera ett fel som t.ex. 400 Dålig begäran eller så är det vanligt med typfel. Det är viktigt att förstå hur man kan förutse och hantera dessa fel i frontend för att säkerställa en smidig användarupplevelse. I vårt exempel analyserar du ID-parameter korrekt användning av JavaScript är ett viktigt steg, men det finns också ytterligare överväganden för att hantera undantag globalt.

I mer komplexa applikationer, installation felgränser in React kan hjälpa till att fånga dessa typer av fel utan att krascha hela applikationen. Detta innebär att man använder Reacts componentDidCatch livscykelmetod eller felgränskrokar i funktionsbaserade komponenter. Att hantera backend-fel genom att korrekt visa informativa meddelanden för användaren kan förhindra frustration och förvirring när API-anrop misslyckas. Den här metoden är särskilt användbar för att fånga problem som ogiltiga ID:n eller otillgängliga produkter.

Dessutom kan implementering av loggning på både frontend och backend hjälpa utvecklare att identifiera återkommande problem och optimera prestanda. Att spåra hur ofta vissa fel inträffar under API-hämtningsförfrågningar kan till exempel avslöja underliggande buggar eller ineffektivitet. Övervaka dessa händelser med ett verktyg som Vakt eller genom anpassade loggningstjänster säkerställer att du kan ta itu med dem snabbt. Denna praxis förbättrar avsevärt tillförlitligheten och underhållsbarheten för din applikation över tid.