Verwalten von Axios-Fehlern bei Verwendung des Spring Boot-Backends zum Abrufen von API-Daten nach ID in Vite+React

Beheben von ID-basierten API-Abruffehlern in Vite+React mit Spring Boot

Beim Erstellen moderner Webanwendungen ist das Abrufen von Daten von einer Backend-API eine wichtige Aufgabe. In einem Vite+React-Frontend verläuft die Integration mit einem Spring Boot-Backend in den meisten Fällen nahtlos. Beim Abrufen von Daten anhand der ID können jedoch bestimmte Probleme auftreten, insbesondere bei Verwendung von Axios.

Ein häufiges Problem entsteht, wenn Anfragen, die direkt über URLs im Browser funktionieren, beim Aufruf vom Frontend fehlschlagen. Ein solcher Fehler tritt beim Abrufen von Produktdaten nach ID aus einem Spring Boot-Backend auf. Diese Situation kann zu Fehlern führen, die häufig auf nicht übereinstimmende Datentypen zurückzuführen sind.

In diesem Artikel konzentrieren wir uns auf einen häufigen Fehler, der beim Abrufen von Produkten per ID mit Axios auftritt. Der Fehler wird typischerweise als „400 Bad Request“ im Frontend angezeigt und weist auf eine fehlgeschlagene Datentypkonvertierung im Backend hin. Wir werden sowohl die Ursache dieses Problems als auch seine Lösung untersuchen.

Wenn Sie dieses Problem angehen, erhalten Sie ein tieferes Verständnis für die Handhabung von Typkonvertierungen zwischen Frontend und Backend. Dies verbessert Ihre API-Integration in Vite+React-Anwendungen bei der Arbeit mit Spring Boot-Backends.

Axios Fetch und Spring Boot-Integration verstehen

Der von mir bereitgestellte Frontend-Code verwendet Reagieren Und Axios um Produktdaten von einem abzurufen Frühlingsstiefel Backend. Der kritische Punkt ist das Abrufen der Daten nach ID, was eine dynamische Routenbehandlung mit beinhaltet useParams in Reagieren. Der useParams Der Hook erfasst die Produkt-ID aus der URL, die dann an die Komponente übergeben wird, um den Abrufvorgang auszulösen. Diese ID muss mit in eine Ganzzahl umgewandelt werden parseInt Um Diskrepanzen zwischen Frontend und Backend zu vermeiden, stellen Sie sicher, dass der richtige Datentyp an das Spring Boot-Backend gesendet wird.

Axios führt die GET-Anfrage an die Backend-API über den Endpunkt aus: http://localhost:8080/api/products/{id}. Das Backend ist so strukturiert, dass es einen ganzzahligen Wert für die Produkt-ID erwartet. Wenn die ID nicht korrekt konvertiert wird, gibt das Backend einen Typkonvertierungsfehler aus, der zum Problem „400 Bad Request“ führt. Aus dem Fehlerprotokoll des Backends geht eindeutig hervor, dass die Konvertierung des String-Werts in eine Ganzzahl fehlgeschlagen ist. Daher ist es wichtig, die ID im Frontend umzuwandeln, bevor die Anfrage gestellt wird.

Im Spring Boot-Backend ist die ProduktController Der Klasse ist ein Endpunkt zugeordnet /products/{id}. Dies wird von der erledigt @PathVariable Annotation, die den Pfadparameter an das Methodenargument bindet. Dadurch wird sichergestellt, dass die in der URL übergebene Produkt-ID korrekt vom Controller empfangen wird. Der Controller wiederum ruft die Serviceschicht auf, um mithilfe von die Produktdetails aus der Datenbank abzurufen ProduktService Klasse. Richtiger Umgang mit Pfadvariable und die Servicelogik ist entscheidend, um Typkonfliktfehler zu verhindern.

Zum Testen nutzen sowohl das Frontend als auch das Backend Unit-Tests, um zu überprüfen, ob die Lösung in verschiedenen Umgebungen funktioniert. Im Frontend, Scherz wird verwendet, um Axios-Anfragen zu verspotten und sicherzustellen, dass die Komponente die abgerufenen Produktdaten korrekt wiedergibt. Ebenso arbeitet das Backend MockMvc um das Verhalten des API-Endpunkts zu testen und zu prüfen, ob die richtigen Produktdaten zurückgegeben werden, wenn gültige IDs übergeben werden. Durch die Integration von Tests können Entwickler sicherstellen, dass der Code wie erwartet funktioniert, wodurch die Wahrscheinlichkeit von Fehlern während der Produktion verringert wird.

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

Überwindung von ID-basierten Abruffehlern in Axios und Spring Boot

Ein weiterer wichtiger Aspekt beim Abrufen von Daten von einer Backend-API ist die Handhabung Fehlerantworten anmutig. Beim Umgang mit ID-basierten Abfragen in einem Vite+React-Frontend besteht die Möglichkeit, dass der Server einen Fehler wie z 400 Ungültige Anfrage oder eine Typinkongruenz ist häufig. Es ist wichtig zu verstehen, wie diese Fehler im Frontend vorhergesehen und behoben werden können, um ein reibungsloses Benutzererlebnis zu gewährleisten. In unserem Beispiel wird das Parsen der ID-Parameter Die ordnungsgemäße Verwendung von JavaScript ist ein wichtiger Schritt, es gibt jedoch auch zusätzliche Überlegungen zur globalen Behandlung von Ausnahmen.

Bei komplexeren Anwendungen das Einrichten Fehlergrenzen in React kann dabei helfen, diese Art von Fehlern zu erfassen, ohne die gesamte Anwendung zum Absturz zu bringen. Dies beinhaltet die Verwendung von Reacts ComponentDidCatch Lebenszyklusmethode oder Fehlergrenzen-Hooks in funktionsbasierten Komponenten. Der Umgang mit Backend-Fehlern durch die ordnungsgemäße Anzeige informativer Nachrichten für den Benutzer kann Frustration und Verwirrung verhindern, wenn API-Aufrufe fehlschlagen. Diese Methode ist besonders nützlich, um Probleme wie ungültige IDs oder nicht verfügbare Produkte zu erkennen.

Darüber hinaus kann die Implementierung der Protokollierung sowohl im Frontend als auch im Backend Entwicklern dabei helfen, wiederkehrende Probleme zu erkennen und die Leistung zu optimieren. Wenn Sie beispielsweise nachverfolgen, wie häufig bestimmte Fehler bei API-Abrufanforderungen auftreten, können zugrunde liegende Fehler oder Ineffizienzen aufgedeckt werden. Überwachen Sie diese Ereignisse mit einem Tool wie Posten oder durch benutzerdefinierte Protokollierungsdienste stellt sicher, dass Sie sie umgehend beheben können. Diese Vorgehensweise verbessert die Zuverlässigkeit und Wartbarkeit Ihrer Anwendung im Laufe der Zeit erheblich.