Vite+React मध्ये ID द्वारे API डेटा पुनर्प्राप्त करण्यासाठी स्प्रिंग बूट बॅकएंड वापरताना Axios त्रुटी व्यवस्थापित करणे

स्प्रिंग बूटसह Vite+React मध्ये ID-आधारित API Fetch Errors सोडवणे

आधुनिक वेब ऍप्लिकेशन्स तयार करताना, बॅकएंड API वरून डेटा आणणे हे एक गंभीर कार्य आहे. Vite+React फ्रंटएंडमध्ये, स्प्रिंग बूट बॅकएंडसह एकत्रित करणे बहुतेक प्रकरणांमध्ये अखंड असते. तथापि, ID द्वारे डेटा आणताना तुम्हाला विशिष्ट समस्या येऊ शकतात, विशेषत: Axios वापरताना.

एक सामान्य समस्या उद्भवते जेव्हा ब्राउझरमधील URL द्वारे थेट कार्य करणाऱ्या विनंत्या फ्रंटएंडमधून मागवल्या जातात तेव्हा अयशस्वी होतात. स्प्रिंग बूट बॅकएंडवरून आयडीद्वारे उत्पादन डेटा आणताना अशी एक त्रुटी येते. या परिस्थितीमुळे त्रुटी येऊ शकतात, अनेकदा न जुळलेल्या डेटा प्रकारांशी संबंधित.

या लेखात, आम्ही Axios वापरून ID द्वारे उत्पादने आणताना आढळलेल्या सामान्य त्रुटीवर लक्ष केंद्रित करू. त्रुटी सामान्यत: फ्रंटएंडमध्ये "400 खराब विनंती" म्हणून दर्शविली जाते आणि बॅकएंडमध्ये अयशस्वी डेटा प्रकार रूपांतरणाकडे निर्देश करते. आम्ही या समस्येचे कारण आणि त्याचे निराकरण दोन्ही शोधू.

या समस्येचे निराकरण करून, तुम्हाला फ्रंटएंड आणि बॅकएंडमधील प्रकार रूपांतरणे हाताळण्याची सखोल माहिती मिळेल. स्प्रिंग बूट बॅकएंडसह कार्य करताना हे Vite+React ऍप्लिकेशन्समधील तुमचे API एकत्रीकरण सुधारेल.

Axios Fetch आणि Spring Boot Integration समजून घेणे

मी प्रदान केलेला फ्रंटएंड कोड वापरतो प्रतिक्रिया द्या आणि Axios a कडून उत्पादन डेटा आणण्यासाठी स्प्रिंग बूट बॅकएंड महत्त्वाचा मुद्दा म्हणजे आयडीद्वारे डेटा मिळवणे, ज्यामध्ये डायनॅमिक मार्ग हाताळणीचा समावेश आहे Params वापरा प्रतिक्रिया मध्ये. द Params वापरा हुक URL वरून उत्पादन आयडी कॅप्चर करतो, जो नंतर फेच ऑपरेशन ट्रिगर करण्यासाठी घटकामध्ये पास केला जातो. हा आयडी वापरून पूर्णांकात रूपांतरित करणे आवश्यक आहे parseInt फ्रंटएंड आणि बॅकएंडमधील विसंगती टाळण्यासाठी, योग्य डेटा प्रकार स्प्रिंग बूट बॅकएंडला पाठविला गेला आहे याची खात्री करा.

Axios एंडपॉइंट वापरून बॅकएंड API ला GET विनंती करते: http://localhost:8080/api/products/{id}. बॅकएंडची रचना उत्पादन आयडीसाठी पूर्णांक मूल्याची अपेक्षा करण्यासाठी केली जाते. आयडी योग्यरितीने रूपांतरित न केल्यास, बॅकएंड एक प्रकार रूपांतरण त्रुटी टाकते, ज्यामुळे "400 खराब विनंती" समस्या उद्भवते. बॅकएंडचा एरर लॉग स्पष्टपणे सांगतो की स्ट्रिंग व्हॅल्यू पूर्णांकामध्ये रूपांतरित करण्यात ते अयशस्वी झाले, म्हणूनच विनंती करण्यापूर्वी फ्रंटएंडवर आयडी रूपांतरित करणे आवश्यक आहे.

स्प्रिंग बूट बॅकएंडमध्ये, द उत्पादन नियंत्रक वर्गात एक एंडपॉइंट मॅप केलेला आहे /उत्पादने/{id}. हे द्वारे हाताळले जाते @PathVariable भाष्य, जे पथ पॅरामीटरला पद्धत युक्तिवादाशी जोडते. हे सुनिश्चित करते की URL मध्ये पास केलेला उत्पादन आयडी नियंत्रकाद्वारे योग्यरित्या प्राप्त झाला आहे. नियंत्रक, यामधून, वापरून डेटाबेसमधून उत्पादन तपशील पुनर्प्राप्त करण्यासाठी सेवा स्तरावर कॉल करतो उत्पादनसेवा वर्ग ची योग्य हाताळणी पाथ व्हेरिएबल आणि सेवा लॉजिक प्रकार जुळत नसलेल्या त्रुटी टाळण्यासाठी महत्त्वपूर्ण आहे.

चाचणीसाठी, सोल्यूशन वेगवेगळ्या वातावरणात कार्य करते हे सत्यापित करण्यासाठी फ्रंटएंड आणि बॅकएंड दोन्ही युनिट चाचणी वापरतात. अग्रभागी, थट्टा Axios विनंत्यांची थट्टा करण्यासाठी वापरला जातो, हे सुनिश्चित करून की घटक योग्यरित्या आणलेला उत्पादन डेटा प्रस्तुत करतो. त्याचप्रमाणे, बॅकएंड रोजगार MockMvc एपीआय एंडपॉईंटच्या वर्तनाची चाचणी करण्यासाठी, वैध आयडी पास झाल्यावर योग्य उत्पादन डेटा परत येतो हे तपासणे. चाचण्यांचा समावेश करून, विकासक हे सुनिश्चित करू शकतात की कोड अपेक्षेप्रमाणे कार्य करतो, उत्पादनादरम्यान बगची शक्यता कमी करते.

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 { 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 मध्ये ID-आधारित फेच त्रुटींवर मात करणे

बॅकएंड API वरून डेटा आणण्याच्या आणखी एक महत्त्वाच्या पैलूमध्ये हाताळणीचा समावेश आहे त्रुटी प्रतिसाद कृपापूर्वक Vite+React फ्रंटएंडमध्ये ID-आधारित क्वेरी हाताळताना, सर्व्हरकडून त्रुटी परत येण्याची शक्यता 400 वाईट विनंती किंवा प्रकार न जुळणे सामान्य आहे. सहज वापरकर्ता अनुभव सुनिश्चित करण्यासाठी फ्रंटएंडमध्ये या त्रुटींचा अंदाज आणि व्यवस्थापन कसे करावे हे समजून घेणे आवश्यक आहे. आमच्या उदाहरणात, पार्सिंग आयडी पॅरामीटर JavaScript योग्यरित्या वापरणे ही एक महत्त्वाची पायरी आहे, परंतु जागतिक स्तरावर अपवाद हाताळण्यासाठी अतिरिक्त विचार देखील आहेत.

अधिक जटिल अनुप्रयोगांमध्ये, सेट करणे त्रुटी सीमा in React संपूर्ण अनुप्रयोग क्रॅश न करता या प्रकारच्या त्रुटी कॅप्चर करण्यात मदत करू शकते. यामध्ये React's वापरणे समाविष्ट आहे componentDidCatch फंक्शन-आधारित घटकांमध्ये जीवनचक्र पद्धत किंवा त्रुटी-सीमा हुक. वापरकर्त्याला माहितीपूर्ण संदेश योग्यरित्या प्रदर्शित करून बॅकएंड त्रुटी हाताळणे API कॉल अयशस्वी झाल्यावर निराशा आणि गोंधळ टाळू शकते. ही पद्धत विशेषतः अवैध आयडी किंवा अनुपलब्ध उत्पादने यांसारख्या समस्यांना पकडण्यासाठी उपयुक्त आहे.

शिवाय, फ्रंटएंड आणि बॅकएंड दोन्हीवर लॉगिंग लागू करणे विकासकांना आवर्ती समस्या ओळखण्यात आणि कार्यप्रदर्शन ऑप्टिमाइझ करण्यात मदत करू शकते. उदाहरणार्थ, API फेच विनंत्यांच्या दरम्यान विशिष्ट त्रुटी किती वारंवार येतात याचा मागोवा घेणे अंतर्निहित बग किंवा अकार्यक्षमता प्रकट करू शकतात. सारख्या साधनासह या घटनांचे निरीक्षण करणे संत्री किंवा सानुकूल लॉगिंग सेवांद्वारे आपण त्यांना त्वरित संबोधित करू शकता याची खात्री करते. ही सराव वेळोवेळी तुमच्या अर्जाची विश्वासार्हता आणि देखभालक्षमता लक्षणीयरीत्या सुधारते.