Håndtering af Axios-fejl ved brug af Spring Boot Backend til at hente API-data efter ID i Vite+React

Løsning af ID-baserede API-hentningsfejl i Vite+React med Spring Boot

Når du bygger moderne webapplikationer, er det en kritisk opgave at hente data fra en backend API. I en Vite+React-frontend er integration med en Spring Boot-backend i de fleste tilfælde problemfri. Du kan dog støde på specifikke problemer, når du henter data efter ID, især når du bruger Axios.

Et almindeligt problem opstår, når anmodninger, der fungerer direkte gennem URL'er i browseren, mislykkes, når de kaldes fra frontend. En sådan fejl opstår, mens produktdata hentes efter ID fra en Spring Boot-backend. Denne situation kan føre til fejl, ofte relateret til uoverensstemmende datatyper.

I denne artikel vil vi fokusere på en almindelig fejl, der opstår under hentning af produkter efter ID ved hjælp af Axios. Fejlen viser sig typisk som en "400 Bad Request" i frontend og peger på en mislykket datatypekonvertering i backend. Vi vil undersøge både årsagen til dette problem og dets løsning.

Ved at løse dette problem får du en dybere forståelse af håndtering af typekonverteringer mellem frontend og backend. Dette vil forbedre din API-integration i Vite+React-applikationer, mens du arbejder med Spring Boot-backends.

Forståelse af Axios Fetch og Spring Boot Integration

Den frontend-kode, jeg angav, bruger Reagere og Axios at hente produktdata fra en Fjederstøvle backend. Det kritiske punkt er at hente dataene efter ID, hvilket involverer dynamisk rutehåndtering med brug Params i React. De brug Params hook fanger produkt-id'et fra URL'en, som derefter sendes ind i komponenten for at udløse hentning. Dette ID skal konverteres til et heltal vha parseInt For at undgå uoverensstemmelser mellem frontend og backend, skal du sikre, at den korrekte datatype sendes til Spring Boot-backend.

Axios udfører GET-anmodningen til backend-API'en ved hjælp af slutpunktet: http://localhost:8080/api/products/{id}. Backend er struktureret til at forvente en heltalsværdi for produkt-id'et. Hvis ID'et ikke konverteres korrekt, sender backend'en en typekonverteringsfejl, hvilket fører til "400 Bad Request"-problemet. Backends fejllog angiver tydeligt, at det ikke lykkedes at konvertere strengværdien til et heltal, hvorfor det er vigtigt at konvertere ID'et på frontend'en, før du foretager anmodningen.

I Spring Boot-backend er ProductController klasse har et endepunkt knyttet til /produkter/{id}. Dette håndteres af @PathVariable annotation, som binder stiparameteren til metodeargumentet. Dette sikrer, at produkt-id'et, der sendes i URL'en, modtages korrekt af controlleren. Controlleren kalder til gengæld servicelaget for at hente produktdetaljerne fra databasen ved hjælp af ProduktService klasse. Korrekt håndtering af StiVariabel og servicelogik er afgørende for at forhindre typemismatch-fejl.

Til test bruger både frontend og backend enhedstest til at validere, at løsningen fungerer på tværs af forskellige miljøer. I frontenden, Spøg bruges til at håne Axios-anmodninger, hvilket sikrer, at komponenten gengiver de hentede produktdata korrekt. Tilsvarende anvender backend MockMvc for at teste API-endepunktets adfærd ved at kontrollere, at de korrekte produktdata returneres, når gyldige id'er sendes. Ved at inkorporere tests kan udviklere sikre, at koden fungerer som forventet, hvilket reducerer chancerne for fejl 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"));
  }
}

Overvindelse af ID-baserede hentefejl i Axios og Spring Boot

Et andet kritisk aspekt ved at hente data fra en backend API involverer håndtering fejlsvar yndefuldt. Når man håndterer ID-baserede forespørgsler i en Vite+React-frontend, er muligheden for, at serveren returnerer en fejl som f.eks. 400 Dårlig anmodning eller en type uoverensstemmelse er almindelig. Det er vigtigt at forstå, hvordan man kan forudse og håndtere disse fejl i frontend for at sikre en glat brugeroplevelse. I vores eksempel, parsing af ID-parameter korrekt brug af JavaScript er et vigtigt skridt, men der er også yderligere overvejelser til håndtering af undtagelser globalt.

I mere komplekse applikationer, opsætning fejlgrænser in React kan hjælpe med at fange disse typer fejl uden at ødelægge hele applikationen. Dette involverer brug af React's componentDidCatch livscyklusmetode eller fejlgrænsekroge i funktionsbaserede komponenter. Håndtering af backend-fejl ved korrekt visning af informative beskeder til brugeren kan forhindre frustration og forvirring, når API-kald mislykkes. Denne metode er især nyttig til at fange problemer som ugyldige id'er eller utilgængelige produkter.

Desuden kan implementering af logning på både frontend og backend hjælpe udviklere med at identificere tilbagevendende problemer og optimere ydeevnen. For eksempel kan sporing af, hvor ofte visse fejl opstår under API-hentningsanmodninger, afsløre underliggende fejl eller ineffektivitet. Overvågning af disse hændelser med et værktøj som Skildvagt eller gennem tilpassede logningstjenester sikrer, at du kan løse dem med det samme. Denne praksis forbedrer din applikations pålidelighed og vedligeholdelse betydeligt over tid.