Zarządzanie błędami Axios podczas korzystania z backendu Spring Boot do pobierania danych API według identyfikatora w Vite+React

Rozwiązywanie błędów pobierania interfejsu API w oparciu o identyfikator w Vite+React przy użyciu Spring Boot

Podczas tworzenia nowoczesnych aplikacji internetowych pobieranie danych z interfejsu API zaplecza jest zadaniem krytycznym. W interfejsie Vite+React integracja z backendem Spring Boot w większości przypadków przebiega bezproblemowo. Jednakże możesz napotkać specyficzne problemy podczas pobierania danych według identyfikatora, zwłaszcza podczas korzystania z Axios.

Częstym problemem jest sytuacja, gdy żądania działające bezpośrednio poprzez adresy URL w przeglądarce kończą się niepowodzeniem po wywołaniu z interfejsu użytkownika. Jeden z takich błędów pojawia się podczas pobierania danych produktu według identyfikatora z backendu Spring Boot. Taka sytuacja może prowadzić do błędów, często związanych z niedopasowanymi typami danych.

W tym artykule skupimy się na częstym błędzie występującym podczas pobierania produktów według identyfikatora za pomocą Axios. Błąd zazwyczaj pojawia się w interfejsie jako „400 Bad Request” i wskazuje na nieudaną konwersję typu danych w backendie. Zbadamy zarówno przyczynę tego problemu, jak i jego rozwiązanie.

Rozwiązując ten problem, zyskasz głębsze zrozumienie obsługi konwersji typów pomiędzy frontendem i backendem. Poprawi to integrację API w aplikacjach Vite+React podczas pracy z backendami Spring Boot.

Zrozumienie integracji Axios Fetch i Spring Boot

Kod frontendu, który podałem, wykorzystuje Zareagować I Osie aby pobrać dane produktu z Wiosenne buty zaplecze. Punktem krytycznym jest pobranie danych według identyfikatora, co wiąże się z dynamiczną obsługą tras użyjParamów w Reagowaniu. The użyjParamów hook przechwytuje identyfikator produktu z adresu URL, który jest następnie przekazywany do komponentu w celu uruchomienia operacji pobierania. Ten identyfikator należy przekonwertować na liczbę całkowitą za pomocą parseInt aby uniknąć rozbieżności między frontendem a backendem, upewniając się, że do backendu Spring Boot wysyłany jest poprawny typ danych.

Axios wykonuje żądanie GET do interfejsu API zaplecza, korzystając z punktu końcowego: http://localhost:8080/api/products/{id}. Struktura backendu przewiduje oczekiwanie wartości całkowitej dla identyfikatora produktu. Jeśli identyfikator nie zostanie poprawnie przekonwertowany, backend zgłosi błąd konwersji typu, co prowadzi do problemu „400 Bad Request”. Dziennik błędów backendu wyraźnie stwierdza, że ​​nie udało się przekonwertować wartości ciągu na liczbę całkowitą, dlatego tak ważne jest przekonwertowanie identyfikatora na interfejsie przed wykonaniem żądania.

W zapleczu Spring Boot plik Kontroler Produktu klasa ma zamapowany punkt końcowy /produkty/{id}. Zajmuje się tym @Zmienna ścieżki adnotacja, która wiąże parametr ścieżki z argumentem metody. Dzięki temu mamy pewność, że identyfikator produktu przekazany w adresie URL zostanie poprawnie odebrany przez kontroler. Kontroler z kolei wywołuje warstwę usług w celu pobrania szczegółów produktu z bazy danych za pomocą metody Usługa produktu klasa. Właściwe obchodzenie się z Zmienna ścieżki a logika usług ma kluczowe znaczenie w zapobieganiu błędom niezgodności typów.

Do testowania zarówno frontend, jak i backend wykorzystują testy jednostkowe w celu sprawdzenia, czy rozwiązanie działa w różnych środowiskach. W interfejsie, Żart służy do kpiny z żądań Axios, zapewniając, że komponent poprawnie renderuje pobrane dane produktu. Podobnie wykorzystuje backend MockMvc w celu przetestowania zachowania punktu końcowego API, sprawdzając, czy po przekazaniu prawidłowych identyfikatorów zwracane są prawidłowe dane produktu. Włączając testy, programiści mogą zapewnić, że kod działa zgodnie z oczekiwaniami, zmniejszając ryzyko wystąpienia błędów podczas produkcji.

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

Pokonywanie błędów pobierania opartych na identyfikatorach w Axios i Spring Boot

Kolejnym krytycznym aspektem pobierania danych z interfejsu API zaplecza jest obsługa odpowiedzi na błędy wdzięcznie. W przypadku zapytań opartych na identyfikatorach w interfejsie Vite+React istnieje możliwość zwrócenia przez serwer błędu typu 400 Złych żądań lub często występuje niezgodność typu. Aby zapewnić płynną obsługę użytkownika, konieczne jest zrozumienie, jak przewidywać i zarządzać tymi błędami w interfejsie użytkownika. W naszym przykładzie parsowanie pliku Parametr identyfikacyjny prawidłowe użycie JavaScriptu jest kluczowym krokiem, ale istnieją również dodatkowe uwagi dotyczące globalnej obsługi wyjątków.

W bardziej złożonych aplikacjach konfiguracja granice błędów w React może pomóc w wychwytywaniu tego typu błędów bez zawieszania całej aplikacji. Wiąże się to z użyciem Reacta komponentDidCatch metoda cyklu życia lub punkty zaczepienia granicy błędów w komponentach opartych na funkcjach. Obsługa błędów backendu poprzez prawidłowe wyświetlanie komunikatów informacyjnych użytkownikowi może zapobiec frustracji i zamieszaniu w przypadku niepowodzenia wywołań API. Ta metoda jest szczególnie przydatna do wychwytywania problemów, takich jak nieprawidłowe identyfikatory lub niedostępne produkty.

Co więcej, wdrożenie rejestrowania zarówno w interfejsie, jak i zapleczu może pomóc programistom w identyfikowaniu powtarzających się problemów i optymalizacji wydajności. Na przykład śledzenie częstotliwości występowania określonych błędów podczas żądań pobrania interfejsu API może ujawnić podstawowe błędy lub nieefektywności. Monitorowanie tych zdarzeń za pomocą narzędzia takiego jak Wartownik lub za pośrednictwem niestandardowych usług rejestrowania, dzięki czemu możesz szybko się nimi zająć. Praktyka ta znacznie poprawia niezawodność i łatwość konserwacji aplikacji w miarę upływu czasu.