Axios-fouten beheren bij gebruik van de Spring Boot Backend om API-gegevens op ID op te halen in Vite+React

Op ID gebaseerde API-ophaalfouten oplossen in Vite+React met Spring Boot

Bij het bouwen van moderne webapplicaties is het ophalen van gegevens uit een backend-API een cruciale taak. In een Vite+React frontend is de integratie met een Spring Boot backend in de meeste gevallen naadloos. U kunt echter specifieke problemen tegenkomen bij het ophalen van gegevens op basis van ID, vooral wanneer u Axios gebruikt.

Een veelvoorkomend probleem doet zich voor wanneer verzoeken die rechtstreeks via URL's in de browser werken, mislukken wanneer ze vanaf de frontend worden aangeroepen. Een dergelijke fout treedt op tijdens het ophalen van productgegevens op ID van een Spring Boot-backend. Deze situatie kan tot fouten leiden, vaak gerelateerd aan niet-overeenkomende gegevenstypen.

In dit artikel zullen we ons concentreren op een veelvoorkomende fout die optreedt bij het ophalen van producten op ID met behulp van Axios. De fout wordt doorgaans weergegeven als een '400 Bad Request' in de frontend en wijst op een mislukte gegevenstypeconversie in de backend. We zullen zowel de oorzaak van dit probleem als de oplossing ervan onderzoeken.

Door dit probleem aan te pakken, krijgt u een beter inzicht in de afhandeling van typeconversies tussen de frontend en de backend. Dit verbetert uw API-integratie in Vite+React-applicaties terwijl u met Spring Boot-backends werkt.

Axios Fetch en Spring Boot-integratie begrijpen

De frontend-code die ik heb verstrekt, gebruikt Reageren En Axios om productgegevens op te halen uit a Lente laars backend. Het kritieke punt is het ophalen van de gegevens op basis van ID, wat een dynamische routeafhandeling met zich meebrengt gebruikParams in Reageer. De gebruikParams hook vangt de product-ID op van de URL, die vervolgens wordt doorgegeven aan de component om de ophaalbewerking te activeren. Deze ID moet worden omgezet in een geheel getal met behulp van parseInt om discrepanties tussen de frontend en de backend te voorkomen, zorgt u ervoor dat het juiste gegevenstype naar de Spring Boot-backend wordt verzonden.

Axios voert het GET-verzoek uit naar de backend-API met behulp van het eindpunt: http://localhost:8080/api/products/{id}. De backend is zo gestructureerd dat er een gehele waarde voor de product-ID wordt verwacht. Als de ID niet correct wordt geconverteerd, genereert de backend een typeconversiefout, wat leidt tot het probleem "400 Bad Request". In het foutenlogboek van de backend wordt duidelijk vermeld dat de tekenreekswaarde niet naar een geheel getal is geconverteerd. Daarom is het essentieel om de ID op de frontend te converteren voordat u het verzoek indient.

In de Spring Boot-backend is de Productcontroller klasse heeft een eindpunt toegewezen /producten/{id}. Dit wordt verzorgd door de @PathVariabele annotatie, die de padparameter aan het methodeargument bindt. Dit zorgt ervoor dat de product-ID die in de URL wordt doorgegeven, correct wordt ontvangen door de controller. De controller roept op zijn beurt de servicelaag op om de productgegevens uit de database op te halen met behulp van de ProductService klas. Correcte afhandeling van Padvariabele en servicelogica is cruciaal bij het voorkomen van type-mismatch-fouten.

Voor het testen maken zowel de frontend als de backend gebruik van unit-tests om te valideren dat de oplossing in verschillende omgevingen werkt. In de frontend, Grap wordt gebruikt om Axios-verzoeken te imiteren en ervoor te zorgen dat de component de opgehaalde productgegevens correct weergeeft. Op dezelfde manier maakt de backend gebruik van MockMvc om het gedrag van het API-eindpunt te testen, waarbij wordt gecontroleerd of de juiste productgegevens worden geretourneerd wanneer geldige ID's worden doorgegeven. Door tests op te nemen, kunnen ontwikkelaars ervoor zorgen dat de code naar verwachting functioneert, waardoor de kans op bugs tijdens de productie wordt verkleind.

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

Op ID gebaseerde ophaalfouten overwinnen in Axios en Spring Boot

Een ander cruciaal aspect bij het ophalen van gegevens uit een backend-API is de verwerking ervan fout reacties sierlijk. Bij het omgaan met op ID gebaseerde zoekopdrachten in een Vite+React frontend is de mogelijkheid dat de server een fout retourneert zoals 400 Slecht verzoek of een type-mismatch is gebruikelijk. Het is essentieel om te begrijpen hoe u op deze fouten in de frontend kunt anticiperen en hoe u deze kunt beheren om een ​​soepele gebruikerservaring te garanderen. In ons voorbeeld wordt het parseren van de ID-parameter Het correct gebruiken van JavaScript is een belangrijke stap, maar er zijn ook aanvullende overwegingen bij het wereldwijd omgaan met uitzonderingen.

Bij complexere toepassingen is het instellen van foutgrenzen in React kan helpen dit soort fouten vast te leggen zonder de hele applicatie te laten crashen. Dit omvat het gebruik van React's onderdeelDidCatch levenscyclusmethode of foutgrenshaken in op functies gebaseerde componenten. Het afhandelen van backend-fouten door informatieve berichten correct weer te geven aan de gebruiker kan frustratie en verwarring voorkomen wanneer API-aanroepen mislukken. Deze methode is vooral handig voor het opsporen van problemen zoals ongeldige ID's of niet-beschikbare producten.

Bovendien kan het implementeren van logboekregistratie op zowel de frontend als de backend ontwikkelaars helpen terugkerende problemen te identificeren en de prestaties te optimaliseren. Als u bijvoorbeeld bijhoudt hoe vaak bepaalde fouten optreden tijdens API-ophaalverzoeken, kunnen onderliggende bugs of inefficiënties aan het licht komen. Het monitoren van deze gebeurtenissen met een tool als Schildwacht of via aangepaste logservices zorgt ervoor dat u ze snel kunt aanpakken. Deze praktijk verbetert de betrouwbaarheid en onderhoudbaarheid van uw toepassing in de loop van de tijd aanzienlijk.