Upravljanje Axios pogreškama kada se koristi Spring Boot Backend za dohvaćanje API podataka prema ID-u u Vite+Reactu

Rješavanje grešaka u dohvaćanju API-ja temeljenih na ID-u u Vite+Reactu uz Spring Boot

Prilikom izrade modernih web aplikacija, dohvaćanje podataka iz pozadinskog API-ja kritičan je zadatak. U Vite+React sučelju, integracija s Spring Boot pozadinom je u većini slučajeva besprijekorna. Međutim, možete naići na određene probleme prilikom dohvaćanja podataka prema ID-u, osobito kada koristite Axios.

Čest problem nastaje kada zahtjevi koji rade izravno preko URL-ova u pregledniku ne uspiju kada se pozovu iz sučelja. Jedna takva pogreška javlja se tijekom dohvaćanja podataka o proizvodu prema ID-u iz Spring Boot pozadine. Ova situacija može dovesti do pogrešaka, često povezanih s neusklađenim tipovima podataka.

U ovom ćemo se članku usredotočiti na uobičajenu pogrešku koja se javlja tijekom dohvaćanja proizvoda po ID-u pomoću Axios-a. Pogreška se obično prikazuje kao "400 Bad Request" u sučelju i ukazuje na neuspjelu konverziju tipa podataka u pozadini. Istražit ćemo uzrok ovog problema i njegovo rješenje.

Rješavanjem ovog problema steći ćete dublje razumijevanje rukovanja konverzijama tipa između sučelja i pozadine. Ovo će poboljšati vašu integraciju API-ja u Vite+React aplikacijama dok radite s Spring Boot pozadinama.

Razumijevanje Axios Fetch i Spring boot integracije

Sučelni kod koji sam dao koristi Reagiraj i Axios dohvatiti podatke o proizvodu od a Proljetna čizma pozadina. Kritična točka je dohvaćanje podataka prema ID-u, što uključuje dinamičko rukovanje rutom useParams u Reactu. The useParams hook hvata ID proizvoda iz URL-a, koji se zatim prosljeđuje u komponentu za pokretanje operacije dohvaćanja. Ovaj ID mora se pretvoriti u cijeli broj pomoću parseInt kako bi se izbjegle nepodudarnosti između sučelja i pozadine, osiguravajući slanje ispravne vrste podataka u pozadinu Spring Boot.

Axios izvodi GET zahtjev pozadinskom API-ju koristeći krajnju točku: http://localhost:8080/api/products/{id}. Pozadina je strukturirana tako da očekuje cjelobrojnu vrijednost za ID proizvoda. Ako ID nije pravilno pretvoren, pozadina izbacuje pogrešku pretvorbe tipa, što dovodi do problema "400 Bad Request". Zapisnik pogrešaka pozadine jasno navodi da nije uspio pretvoriti vrijednost niza u cijeli broj, zbog čega je ključno pretvoriti ID na sučelju prije podnošenja zahtjeva.

U pozadini Spring Boot-a, Kontrolor proizvoda klasa ima mapiranu krajnju točku /proizvodi/{id}. Time se bavi @Varijabla puta anotacija, koja povezuje parametar staze s argumentom metode. Time se osigurava da kontroler ispravno primi ID proizvoda proslijeđen u URL-u. Kontrolor, zauzvrat, poziva sloj usluge da dohvati pojedinosti o proizvodu iz baze podataka pomoću ProductService razreda. Ispravno rukovanje Varijabla putanje a servisna logika ključna je u sprječavanju pogrešaka neusklađenosti tipa.

Za testiranje, i frontend i backend koriste jedinično testiranje kako bi potvrdili da rješenje radi u različitim okruženjima. U sučelju, šala koristi se za ismijavanje Axios zahtjeva, osiguravajući da komponenta ispravno prikazuje dohvaćene podatke o proizvodu. Slično, backend zapošljava MockMvc za testiranje ponašanja krajnje točke API-ja, provjeravajući vraćaju li se točni podaci o proizvodu kada se proslijede valjani ID-ovi. Uključivanjem testova programeri mogu osigurati da kod funkcionira prema očekivanjima, smanjujući šanse za greške tijekom proizvodnje.

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

Prevladavanje pogrešaka dohvaćanja temeljenih na ID-u u Axios i Spring Boot

Drugi kritični aspekt dohvaćanja podataka iz backend API-ja uključuje rukovanje odgovori na pogreške graciozno. Kada se radi s upitima temeljenim na ID-u u Vite+React sučelju, mogućnost da poslužitelj vrati pogrešku kao 400 Loš zahtjev ili je neslaganje tipa uobičajeno. Bitno je razumjeti kako predvidjeti i upravljati ovim pogreškama u sučelju kako bi se osiguralo glatko korisničko iskustvo. U našem primjeru, analiziranje ID parametar pravilna upotreba JavaScripta ključni je korak, ali postoje i dodatna razmatranja za globalno rukovanje iznimkama.

U složenijim primjenama postavljanje granice pogreške u Reactu može pomoći u hvatanju ovih vrsta pogrešaka bez rušenja cijele aplikacije. To uključuje korištenje React-a komponentaDidCatch metoda životnog ciklusa ili kuke s granicama pogreške u komponentama koje se temelje na funkcijama. Rukovanje pozadinskim pogreškama pravilnim prikazivanjem informativnih poruka korisniku može spriječiti frustraciju i zbunjenost kada API pozivi ne uspiju. Ova je metoda posebno korisna za otkrivanje problema kao što su nevažeći ID-ovi ili nedostupni proizvodi.

Nadalje, implementacija bilježenja i na sučelju i na pozadini može pomoći programerima da identificiraju ponavljajuće probleme i optimiziraju performanse. Na primjer, praćenje koliko se često pojavljuju određene pogreške tijekom zahtjeva za dohvaćanje API-ja može otkriti temeljne greške ili neučinkovitosti. Praćenje tih događaja pomoću alata poput Stražar ili putem prilagođenih usluga bilježenja osigurava da im se možete odmah obratiti. Ova praksa značajno poboljšava pouzdanost i mogućnost održavanja vaše aplikacije tijekom vremena.