„Axios“ klaidų valdymas naudojant „Spring Boot Backend“, norint gauti API duomenis pagal ID „Vite+React“

ID pagrįsto API gavimo klaidų sprendimas „Vite+React“ naudojant „Spring Boot“.

Kuriant šiuolaikines žiniatinklio programas, duomenų gavimas iš užpakalinės programos API yra labai svarbi užduotis. „Vite+React“ sąsajoje daugeliu atvejų integravimas su „Spring Boot“ galine dalimi yra sklandus. Tačiau galite susidurti su specifinėmis problemomis gaudami duomenis pagal ID, ypač kai naudojate „Axios“.

Dažna problema kyla, kai užklausos, veikiančios tiesiogiai per naršyklės URL, nepavyksta, kai iškviečiamos iš sąsajos. Viena iš tokių klaidų įvyksta gaunant produkto duomenis pagal ID iš „Spring Boot“ užpakalinės programos. Dėl šios situacijos gali atsirasti klaidų, dažnai susijusių su nesutampančių duomenų tipais.

Šiame straipsnyje mes sutelksime dėmesį į dažną klaidą, su kuria susiduriama gaunant produktus pagal ID naudojant „Axios“. Klaida paprastai rodoma kaip „400 netinkama užklausa“ sąsajoje ir nurodo nepavykusią duomenų tipo konvertavimą vidinėje sistemoje. Išnagrinėsime ir šios problemos priežastį, ir jos sprendimą.

Išspręsdami šią problemą, įgysite gilesnį supratimą apie tipų konvertavimo tarp sąsajos ir užpakalinės sistemos tvarkymą. Tai pagerins jūsų API integraciją į Vite+React programas dirbant su Spring Boot sistemomis.

„Axios Fetch“ ir „Spring Boot“ integravimo supratimas

Naudojamas mano pateiktas frontend kodas Reaguoti ir Axios gauti produkto duomenis iš a Pavasariniai batai backend. Kritinis taškas yra duomenų gavimas pagal ID, kuris apima dinaminį maršruto valdymą naudotiParams Reakcijoje. The naudotiParams „hook“ užfiksuoja produkto ID iš URL, kuris vėliau perduodamas komponentui, kad būtų suaktyvinta gavimo operacija. Šis ID turi būti konvertuotas į sveikąjį skaičių naudojant parseInt kad būtų išvengta sąsajos ir užpakalinės sistemos neatitikimų, užtikrinant, kad į „Spring Boot“ vidinę sistemą būtų siunčiamas teisingas duomenų tipas.

„Axios“ atlieka GET užklausą užpakalinei API naudodama galutinį tašką: http://localhost:8080/api/products/{id}. Užpakalinė programa sukurta taip, kad tikimasi sveiko skaičiaus produkto ID. Jei ID konvertuojamas netinkamai, užpakalinė programa pateikia tipo konvertavimo klaidą, dėl kurios atsiranda „400 netinkamos užklausos“ problema. Užpakalinės programos klaidų žurnale aiškiai nurodyta, kad nepavyko konvertuoti eilutės reikšmės į sveikąjį skaičių, todėl prieš pateikiant užklausą būtina konvertuoti ID sąsajoje.

„Spring Boot“ užpakalinėje programoje „ ProductController klasė turi galinį tašką, susietą su /products/{id}. Tai tvarko @PathVariable anotacija, kuri susieja kelio parametrą su metodo argumentu. Taip užtikrinama, kad valdiklis tinkamai gautų produkto ID, perduotą URL. Valdiklis, savo ruožtu, iškviečia paslaugų lygmenį, kad gautų išsamią produkto informaciją iš duomenų bazės, naudodamas ProductService klasė. Tinkamas tvarkymas PathVariable ir paslaugų logika yra labai svarbi siekiant užkirsti kelią tipo neatitikimo klaidoms.

Bandymui tiek priekinėje, tiek užpakalinėje programoje naudojamas vienetų testavimas, siekiant patvirtinti, kad sprendimas veikia skirtingose ​​aplinkose. Priekinėje dalyje, Juokas naudojamas tyčiotis iš Axios užklausų, užtikrinant, kad komponentas teisingai atvaizduotų gautus produkto duomenis. Panašiai veikia ir užpakalinė dalis MockMvc išbandyti API galutinio taško elgseną ir patikrinti, ar perduodami teisingi produkto duomenys, kai perduodami galiojantys ID. Įtraukdami testus, kūrėjai gali užtikrinti, kad kodas veiktų taip, kaip tikėtasi, sumažinant klaidų tikimybę gamybos metu.

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

ID pagrįstų gavimo klaidų įveikimas „Axios“ ir „Spring Boot“.

Kitas svarbus duomenų gavimo iš užpakalinės API aspektas yra tvarkymas klaidų atsakymai grakščiai. Kai dirbate su ID pagrįstomis užklausomis Vite+React sąsajoje, serveris gali grąžinti klaidą, pvz. 400 Blogas prašymas arba tipo neatitikimas yra dažnas. Labai svarbu suprasti, kaip numatyti ir valdyti šias klaidas sąsajoje, kad būtų užtikrinta sklandi vartotojo patirtis. Mūsų pavyzdyje analizuojama ID parametras Tinkamas „JavaScript“ naudojimas yra pagrindinis veiksmas, tačiau yra ir papildomų svarstymų, susijusių su išimtimis visame pasaulyje.

Sudėtingesnėse programose nustatymas klaidų ribos React gali padėti užfiksuoti tokio tipo klaidas nesugriuvus visos programos. Tai apima „React“ naudojimą komponentasDidCatch gyvavimo ciklo metodas arba klaidų ribų kabliukai funkcijomis pagrįstuose komponentuose. Apdorodami pagrindines klaidas tinkamai rodydami informatyvius pranešimus vartotojui, galite išvengti nusivylimo ir painiavos, kai nepavyksta iškviesti API. Šis metodas ypač naudingas sprendžiant tokias problemas kaip netinkami ID arba nepasiekiami produktai.

Be to, registravimo įdiegimas tiek priekinėje, tiek užpakalinėje sistemoje gali padėti kūrėjams nustatyti pasikartojančias problemas ir optimizuoti našumą. Pavyzdžiui, stebint, kaip dažnai API gavimo užklausose įvyksta tam tikros klaidos, gali būti atskleistos pagrindinės klaidos arba neveiksmingumas. Stebėti šiuos įvykius naudojant tokį įrankį kaip Sentry arba naudodamiesi pasirinktinėmis registravimo paslaugomis, užtikrina, kad galite greitai juos išspręsti. Ši praktika laikui bėgant žymiai pagerina jūsų programos patikimumą ir priežiūrą.