Διαχείριση σφαλμάτων Axios κατά τη χρήση του Spring Boot Backend για ανάκτηση δεδομένων API κατά ID στο Vite+React

Επίλυση σφαλμάτων ανάκτησης API βάσει αναγνωριστικών στο Vite+React με Spring Boot

Κατά τη δημιουργία σύγχρονων εφαρμογών ιστού, η ανάκτηση δεδομένων από ένα backend API είναι μια κρίσιμη εργασία. Σε μια διεπαφή Vite+React, η ενσωμάτωση με μια βάση υποστήριξης Spring Boot είναι απρόσκοπτη στις περισσότερες περιπτώσεις. Ωστόσο, ενδέχεται να αντιμετωπίσετε συγκεκριμένα προβλήματα κατά τη λήψη δεδομένων με αναγνωριστικό, ειδικά όταν χρησιμοποιείτε το Axios.

Ένα κοινό πρόβλημα προκύπτει όταν τα αιτήματα που λειτουργούν απευθείας μέσω διευθύνσεων URL στο πρόγραμμα περιήγησης αποτυγχάνουν όταν καλούνται από τη διεπαφή. Ένα τέτοιο σφάλμα παρουσιάζεται κατά την ανάκτηση δεδομένων προϊόντος με αναγνωριστικό από ένα σύστημα υποστήριξης Spring Boot. Αυτή η κατάσταση μπορεί να οδηγήσει σε σφάλματα, τα οποία συχνά σχετίζονται με μη αντιστοιχισμένους τύπους δεδομένων.

Σε αυτό το άρθρο, θα εστιάσουμε σε ένα κοινό σφάλμα που παρουσιάζεται κατά τη λήψη προϊόντων με αναγνωριστικό χρησιμοποιώντας το Axios. Το σφάλμα εμφανίζεται συνήθως ως "400 Bad Request" στη διεπαφή και υποδεικνύει μια αποτυχημένη μετατροπή τύπου δεδομένων στο backend. Θα διερευνήσουμε τόσο την αιτία αυτού του ζητήματος όσο και τη λύση του.

Αντιμετωπίζοντας αυτό το πρόβλημα, θα αποκτήσετε μια βαθύτερη κατανόηση του χειρισμού των μετατροπών τύπων μεταξύ του frontend και του backend. Αυτό θα βελτιώσει την ενσωμάτωση του API στις εφαρμογές Vite+React ενώ εργάζεστε με backends Spring Boot.

Κατανόηση της ενσωμάτωσης Axios Fetch και Spring Boot

Ο κώδικας διεπαφής που έδωσα χρησιμοποιεί Αντιδρώ και Αξιος για ανάκτηση δεδομένων προϊόντος από α Ανοιξιάτικο Μποτάκι backend. Το κρίσιμο σημείο είναι η ανάκτηση των δεδομένων με ID, η οποία περιλαμβάνει δυναμικό χειρισμό διαδρομής με χρήση Params στο React. Ο χρήση Params Το hook καταγράφει το αναγνωριστικό προϊόντος από τη διεύθυνση URL, το οποίο στη συνέχεια μεταβιβάζεται στο στοιχείο για να ενεργοποιήσει τη λειτουργία ανάκτησης. Αυτό το αναγνωριστικό πρέπει να μετατραπεί σε ακέραιο χρησιμοποιώντας parseInt για να αποφύγετε αναντιστοιχίες μεταξύ του frontend και του backend, διασφαλίζοντας ότι ο σωστός τύπος δεδομένων αποστέλλεται στο Spring Boot backend.

Το Axios εκτελεί το αίτημα GET στο API υποστήριξης χρησιμοποιώντας το τελικό σημείο: http://localhost:8080/api/products/{id}. Το backend είναι δομημένο έτσι ώστε να αναμένει μια ακέραια τιμή για το αναγνωριστικό προϊόντος. Εάν το αναγνωριστικό δεν μετατραπεί σωστά, το backend παρουσιάζει ένα σφάλμα μετατροπής τύπου, που οδηγεί στο ζήτημα "400 Bad Request". Το αρχείο καταγραφής σφαλμάτων του backend δηλώνει ξεκάθαρα ότι απέτυχε να μετατρέψει την τιμή συμβολοσειράς σε ακέραιο, γι' αυτό είναι απαραίτητο να μετατρέψετε το αναγνωριστικό στο frontend πριν υποβάλετε το αίτημα.

Στο backend Spring Boot, το ProductController η κλάση έχει ένα τελικό σημείο αντιστοιχισμένο /products/{id}. Αυτό το χειρίζεται η @PathVariable σχολιασμός, ο οποίος δεσμεύει την παράμετρο διαδρομής με το όρισμα της μεθόδου. Αυτό διασφαλίζει ότι το αναγνωριστικό προϊόντος που μεταβιβάστηκε στη διεύθυνση URL λαμβάνεται σωστά από τον ελεγκτή. Ο ελεγκτής, με τη σειρά του, καλεί το επίπεδο υπηρεσίας για να ανακτήσει τις λεπτομέρειες του προϊόντος από τη βάση δεδομένων χρησιμοποιώντας το Υπηρεσία Προϊόντος τάξη. Σωστός χειρισμός του PathVariable και η λογική υπηρεσίας είναι ζωτικής σημασίας για την πρόληψη σφαλμάτων αναντιστοιχίας τύπων.

Για τη δοκιμή, τόσο το frontend όσο και το backend χρησιμοποιούν τη δοκιμή μονάδας για να επικυρώσουν ότι η λύση λειτουργεί σε διαφορετικά περιβάλλοντα. Στο μπροστινό μέρος, Αστείο χρησιμοποιείται για την κοροϊδία των αιτημάτων του Axios, διασφαλίζοντας ότι το στοιχείο αποδίδει σωστά τα δεδομένα προϊόντος που έχουν ληφθεί. Ομοίως, το backend χρησιμοποιεί MockMvc για να ελέγξετε τη συμπεριφορά του τερματικού σημείου API, ελέγχοντας ότι επιστρέφονται τα σωστά δεδομένα προϊόντος όταν διαβιβάζονται έγκυρα αναγνωριστικά. Με την ενσωμάτωση δοκιμών, οι προγραμματιστές μπορούν να διασφαλίσουν ότι ο κώδικας λειτουργεί όπως αναμένεται, μειώνοντας τις πιθανότητες σφαλμάτων κατά την παραγωγή.

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

Αντιμετώπιση σφαλμάτων ανάκτησης βάσει αναγνωριστικών στο Axios και στο Spring Boot

Μια άλλη κρίσιμη πτυχή της ανάκτησης δεδομένων από ένα backend API περιλαμβάνει τον χειρισμό απαντήσεις σφαλμάτων με χάρη. Όταν αντιμετωπίζετε ερωτήματα που βασίζονται σε αναγνωριστικά σε μια διεπαφή Vite+React, η πιθανότητα ο διακομιστής να επιστρέψει ένα σφάλμα όπως 400 Κακό αίτημα ή μια αναντιστοιχία τύπου είναι κοινή. Είναι σημαντικό να κατανοήσετε πώς να προβλέψετε και να διαχειριστείτε αυτά τα σφάλματα στο frontend για να διασφαλίσετε μια ομαλή εμπειρία χρήστη. Στο παράδειγμά μας, η ανάλυση του Παράμετρος ID Η σωστή χρήση της JavaScript είναι ένα βασικό βήμα, αλλά υπάρχουν επίσης πρόσθετες σκέψεις για τον χειρισμό των εξαιρέσεων παγκοσμίως.

Σε πιο σύνθετες εφαρμογές, εγκατάσταση όρια σφάλματος στο React μπορεί να βοηθήσει στην καταγραφή αυτών των τύπων σφαλμάτων χωρίς να διακοπεί ολόκληρη η εφαρμογή. Αυτό περιλαμβάνει τη χρήση του React componentDidCatch μέθοδος κύκλου ζωής ή άγκιστρα ορίου σφάλματος σε εξαρτήματα που βασίζονται σε λειτουργίες. Ο χειρισμός των σφαλμάτων υποστήριξης μέσω της σωστής εμφάνισης ενημερωτικών μηνυμάτων στον χρήστη μπορεί να αποτρέψει την απογοήτευση και τη σύγχυση όταν αποτύχουν οι κλήσεις API. Αυτή η μέθοδος είναι ιδιαίτερα χρήσιμη για την αντιμετώπιση προβλημάτων όπως μη έγκυρα αναγνωριστικά ή μη διαθέσιμα προϊόντα.

Επιπλέον, η εφαρμογή καταγραφής τόσο στο frontend όσο και στο backend μπορεί να βοηθήσει τους προγραμματιστές να εντοπίσουν επαναλαμβανόμενα προβλήματα και να βελτιστοποιήσουν την απόδοση. Για παράδειγμα, η παρακολούθηση της συχνότητας εμφάνισης ορισμένων σφαλμάτων κατά τη διάρκεια των αιτημάτων ανάκτησης API μπορεί να αποκαλύψει υποκείμενα σφάλματα ή αναποτελεσματικότητα. Παρακολούθηση αυτών των συμβάντων με ένα εργαλείο όπως Φρουρός ή μέσω προσαρμοσμένων υπηρεσιών καταγραφής διασφαλίζει ότι μπορείτε να τις αντιμετωπίσετε αμέσως. Αυτή η πρακτική βελτιώνει σημαντικά την αξιοπιστία και τη συντηρησιμότητα της εφαρμογής σας με την πάροδο του χρόνου.