Axios kļūdu pārvaldība, izmantojot Spring Boot aizmugursistēmu, lai izgūtu API datus pēc ID programmā Vite+React

Uz ID balstītu API ielādes kļūdu risināšana programmā Vite+React ar Spring Boot

Veidojot modernas tīmekļa lietojumprogrammas, datu iegūšana no aizmugursistēmas API ir kritisks uzdevums. Vite+React priekšgalā vairumā gadījumu integrācija ar Spring Boot aizmugursistēmu ir nemanāma. Tomēr, ienesot datus pēc ID, var rasties specifiskas problēmas, īpaši, ja izmantojat Axios.

Izplatīta problēma rodas, ja pieprasījumi, kas darbojas tieši caur vietrāžiem URL pārlūkprogrammā, neizdodas, kad tie tiek izsaukti no priekšgala. Viena šāda kļūda rodas, ienesot produkta datus pēc ID no Spring Boot aizmugursistēmas. Šī situācija var izraisīt kļūdas, kas bieži ir saistītas ar neatbilstošiem datu tipiem.

Šajā rakstā mēs pievērsīsimies bieži sastopamai kļūdai, kas radusies, ienesot produktus pēc ID, izmantojot Axios. Kļūda parasti tiek parādīta kā “400 slikts pieprasījums” priekšgalā un norāda uz neveiksmīgu datu tipa konvertēšanu aizmugursistēmā. Mēs izpētīsim gan šīs problēmas cēloni, gan tās risinājumu.

Risinot šo problēmu, jūs iegūsit dziļāku izpratni par veidu reklāmguvumu apstrādi starp priekšgalu un aizmugursistēmu. Tas uzlabos jūsu API integrāciju Vite+React lietojumprogrammās, strādājot ar Spring Boot aizmugursistēmām.

Izpratne par Axios Fetch un Spring Boot integrāciju

Manis sniegtais priekšgala kods tiek izmantots Reaģēt un Axios lai iegūtu produkta datus no a Pavasara zābaki aizmugure. Kritiskais punkts ir datu iegūšana pēc ID, kas ietver dinamisku maršruta apstrādi useParams sadaļā Reakt. The useParams hook tver produkta ID no URL, kas pēc tam tiek nodots komponentam, lai aktivizētu izgūšanas darbību. Šis ID ir jāpārvērš par veselu skaitli, izmantojot parseInt lai izvairītos no nesakritības starp priekšgalu un aizmugursistēmu, nodrošinot, ka Spring Boot aizmugursistēmai tiek nosūtīts pareizais datu tips.

Axios izpilda GET pieprasījumu aizmugursistēmas API, izmantojot galapunktu: http://localhost:8080/api/products/{id}. Aizmugursistēma ir strukturēta tā, lai sagaidāma produkta ID vesela skaitļa vērtība. Ja ID netiek konvertēts pareizi, aizmugurprogramma rada tipa konvertēšanas kļūdu, kā rezultātā rodas problēma “400 Bad Request”. Aizmugursistēmas kļūdu žurnālā ir skaidri norādīts, ka virknes vērtību neizdevās pārvērst par veselu skaitli, tāpēc pirms pieprasījuma veikšanas ir svarīgi pārveidot ID priekšgalā.

Spring Boot aizmugurprogrammā ProductController klasei ir piesaistīts beigu punkts /produkti/{id}. To risina @PathVariable anotācija, kas saista ceļa parametru ar metodes argumentu. Tas nodrošina, ka pārzinis pareizi saņem vietrādī URL nodoto produkta ID. Kontrolieris savukārt izsauc pakalpojumu slāni, lai izgūtu produkta informāciju no datu bāzes, izmantojot ProductService klasē. Pareiza apstrāde ar PathVariable un pakalpojumu loģikai ir izšķiroša nozīme, lai novērstu veidu neatbilstības kļūdas.

Testēšanai gan priekšgals, gan aizmugursistēma izmanto vienības testēšanu, lai pārbaudītu, vai risinājums darbojas dažādās vidēs. Priekšgalā, Joks tiek izmantots, lai izsmietu Axios pieprasījumus, nodrošinot, ka komponents pareizi atveido ienestos produkta datus. Tāpat tiek izmantota aizmugure MockMvc lai pārbaudītu API galapunkta darbību, pārbaudot, vai tiek atgriezti pareizi produkta dati, kad tiek nodoti derīgi ID. Iekļaujot testus, izstrādātāji var nodrošināt, ka kods darbojas, kā paredzēts, samazinot kļūdu iespējamību ražošanas laikā.

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

Uz ID balstītu ielādes kļūdu novēršana programmās Axios un Spring Boot

Vēl viens būtisks aspekts datu iegūšanā no aizmugursistēmas API ir apstrāde kļūdu atbildes graciozi. Apstrādājot ar ID balstītus vaicājumus Vite+React priekšgalā, pastāv iespēja, ka serveris atgriezīs kļūdu, piemēram, 400 Slikts pieprasījums vai tipa neatbilstība ir izplatīta. Ir svarīgi saprast, kā paredzēt un pārvaldīt šīs kļūdas priekšgalā, lai nodrošinātu vienmērīgu lietotāja pieredzi. Mūsu piemērā parsējot ID parametrs Pareiza JavaScript lietošana ir galvenais solis, taču ir arī papildu apsvērumi, kas jāņem vērā, lai globāli apstrādātu izņēmumus.

Sarežģītākos lietojumos iestatīšana kļūdu robežas React var palīdzēt fiksēt šāda veida kļūdas, neavarējot visu lietojumprogrammu. Tas ietver React izmantošanu komponentsDidCatch dzīves cikla metode vai kļūdu robežu āķi uz funkcijām balstītos komponentos. Aizmugursistēmas kļūdu apstrāde, pareizi parādot lietotājam informatīvus ziņojumus, var novērst neapmierinātību un apjukumu, kad API izsaukumi neizdodas. Šī metode ir īpaši noderīga, lai atklātu tādas problēmas kā nederīgi ID vai nepieejami produkti.

Turklāt reģistrēšanas ieviešana gan priekšgalā, gan aizmugursistēmā var palīdzēt izstrādātājiem identificēt atkārtotas problēmas un optimizēt veiktspēju. Piemēram, izsekojot, cik bieži API ielādes pieprasījumu laikā rodas noteiktas kļūdas, var tikt atklātas kļūdas vai neefektivitāte. Šo notikumu uzraudzība ar tādu rīku kā Sentry vai izmantojot pielāgotus reģistrēšanas pakalpojumus, nodrošina, ka varat tos nekavējoties risināt. Šī prakse laika gaitā ievērojami uzlabo jūsu lietojumprogrammas uzticamību un apkopi.