Axios-virheiden hallinta käytettäessä Spring Boot -taustaa API-tietojen hakemiseen tunnuksen perusteella Vite+Reactissa

ID-pohjaisten API-hakuvirheiden ratkaiseminen Vite+Reactissa Spring Bootin avulla

Kun rakennetaan nykyaikaisia ​​verkkosovelluksia, tietojen hakeminen taustasovellusliittymästä on kriittinen tehtävä. Vite+React-käyttöliittymässä integrointi Spring Boot -taustaohjelmaan on useimmissa tapauksissa saumatonta. Saatat kuitenkin kohdata erityisongelmia haetessasi tietoja tunnuksen perusteella, erityisesti käytettäessä Axiosta.

Yleinen ongelma ilmenee, kun suoraan selaimen URL-osoitteiden kautta toimivat pyynnöt epäonnistuvat, kun niitä kutsutaan käyttöliittymästä. Yksi tällainen virhe tapahtuu haettaessa tuotetietoja ID:n perusteella Spring Boot -taustajärjestelmästä. Tämä tilanne voi johtaa virheisiin, jotka liittyvät usein yhteensopimattomiin tietotyyppeihin.

Tässä artikkelissa keskitymme yleiseen virheeseen, joka havaittiin haettaessa tuotteita tunnuksella Axiosin avulla. Virhe näkyy tyypillisesti "400 Bad Request" -pyynnönä käyttöliittymässä ja viittaa epäonnistuneeseen tietotyypin muunnokseen taustajärjestelmässä. Tutkimme sekä tämän ongelman syytä että sen ratkaisua.

Käsittelemällä tämän ongelman saat syvemmän käsityksen käyttöliittymän ja taustajärjestelmän välisten tyyppimuunnosten käsittelystä. Tämä parantaa API-integraatiotasi Vite+React-sovelluksissa, kun työskentelet Spring Boot -taustaohjelmien kanssa.

Axios Fetch- ja Spring Boot -integroinnin ymmärtäminen

Antamani käyttöliittymäkoodi käyttää Reagoi ja Axios noutaaksesi tuotetiedot osoitteesta a Kevät Boot tausta. Kriittinen kohta on tietojen hakeminen tunnuksella, joka sisältää dynaamisen reitinkäsittelyn useParams Reactissa. The useParams koukku kaappaa tuotetunnuksen URL-osoitteesta, joka siirretään sitten komponenttiin hakutoiminnon käynnistämiseksi. Tämä tunnus on muutettava kokonaisluvuksi käyttämällä parseInt välttääksesi käyttöliittymän ja taustajärjestelmän väliset ristiriidat varmistamalla, että oikea tietotyyppi lähetetään Spring Boot -taustajärjestelmään.

Axios suorittaa GET-pyynnön tausta-API:lle päätepisteen avulla: http://localhost:8080/api/products/{id}. Taustajärjestelmä on rakennettu siten, että tuotetunnukselle odotetaan kokonaislukuarvoa. Jos tunnusta ei muunneta oikein, taustaohjelma antaa tyyppimuunnosvirheen, mikä johtaa "400 Bad Request" -ongelmaan. Taustaohjelman virheloki ilmoittaa selvästi, että se ei onnistunut muuttamaan merkkijonoarvoa kokonaisluvuksi, minkä vuoksi on välttämätöntä muuntaa käyttöliittymän tunnus ennen pyynnön tekemistä.

Spring Boot -taustaohjelmassa ProductController luokassa on päätepiste, johon on kartoitettu /tuotteet/{id}. Tämän hoitaa @PathVariable huomautus, joka sitoo polkuparametrin metodi-argumenttiin. Tämä varmistaa, että ohjain vastaanottaa oikein URL-osoitteessa välitetyn tuotetunnuksen. Ohjain puolestaan ​​kutsuu palvelukerrosta hakemaan tuotetiedot tietokannasta käyttämällä ProductService luokkaa. Asianmukainen käsittely Polkumuuttuja ja palvelulogiikka on ratkaisevan tärkeä tyyppivirheiden estämisessä.

Testauksessa sekä käyttöliittymä että taustaosa käyttävät yksikkötestausta varmistaakseen, että ratkaisu toimii eri ympäristöissä. etuosassa, Jest käytetään pilkkaamaan Axios-pyyntöjä ja varmistamaan, että komponentti hahmontaa haetut tuotetiedot oikein. Vastaavasti backend työllistää MockMvc testata API-päätepisteen toimintaa ja tarkistaa, että oikeat tuotetiedot palautetaan, kun kelvolliset tunnukset välitetään. Testejä sisällyttämällä kehittäjät voivat varmistaa, että koodi toimii odotetulla tavalla, mikä vähentää virheiden mahdollisuuksia tuotannon aikana.

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-pohjaisten hakuvirheiden voittaminen Axiosissa ja Spring Bootissa

Toinen kriittinen näkökohta tietojen hakemisessa taustasovellusliittymästä on käsittely virhevastauksia kauniisti. Käsiteltäessä ID-pohjaisia ​​kyselyitä Vite+React-käyttöliittymässä, palvelin voi palauttaa virheen, kuten 400 Huono pyyntö tai tyyppiristiriita on yleistä. On olennaista ymmärtää, kuinka ennakoida ja hallita nämä virheet käyttöliittymässä, jotta käyttökokemus sujuu sujuvasti. Esimerkissämme jäsennetään ID-parametri JavaScriptin oikea käyttö on keskeinen vaihe, mutta poikkeuksien maailmanlaajuiseen käsittelyyn on myös muita näkökohtia.

Monimutkaisemmissa sovelluksissa määrittäminen virheen rajat React voi auttaa kaappaamaan tämäntyyppiset virheet kaatumatta koko sovellusta. Tämä edellyttää Reactin käyttöä komponenttiDidCatch elinkaarimenetelmä tai virherajakoukut toimintopohjaisissa komponenteissa. Taustavirheiden käsitteleminen näyttämällä informatiiviset viestit oikein käyttäjälle voi estää turhautumisen ja hämmennyksen API-kutsujen epäonnistuessa. Tämä menetelmä on erityisen hyödyllinen havaittaessa ongelmia, kuten virheellisiä tunnuksia tai tuotteita, joita ei ole saatavilla.

Lisäksi kirjaamisen käyttöönotto sekä käyttöliittymässä että taustajärjestelmässä voi auttaa kehittäjiä tunnistamaan toistuvia ongelmia ja optimoimaan suorituskykyä. Esimerkiksi seuraamalla, kuinka usein tiettyjä virheitä tapahtuu API-hakupyyntöjen aikana, voi paljastaa taustalla olevia virheitä tai tehottomuutta. Seuraa näitä tapahtumia työkalulla, kuten Vartiomies tai mukautettujen lokipalveluiden kautta varmistaa, että voit korjata ne nopeasti. Tämä käytäntö parantaa merkittävästi sovelluksesi luotettavuutta ja ylläpidettävyyttä ajan myötä.