Vite+React এ ID দ্বারা API ডেটা পুনরুদ্ধার করতে স্প্রিং বুট ব্যাকএন্ড ব্যবহার করার সময় Axios ত্রুটিগুলি পরিচালনা করা

স্প্রিং বুটের মাধ্যমে Vite+React-এ ID-ভিত্তিক API ফেচ ত্রুটির সমাধান করা

আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরি করার সময়, একটি ব্যাকএন্ড API থেকে ডেটা আনা একটি গুরুত্বপূর্ণ কাজ। একটি Vite+React ফ্রন্টএন্ডে, স্প্রিং বুট ব্যাকএন্ডের সাথে একীভূত করা বেশিরভাগ ক্ষেত্রে বিরামহীন। যাইহোক, ID দ্বারা ডেটা আনার সময় আপনি নির্দিষ্ট সমস্যার সম্মুখীন হতে পারেন, বিশেষ করে যখন Axios ব্যবহার করেন।

একটি সাধারণ সমস্যা দেখা দেয় যখন ব্রাউজারে URL-এর মাধ্যমে সরাসরি কাজ করে এমন অনুরোধগুলি যখন ফ্রন্টএন্ড থেকে আহ্বান করা হয় তখন ব্যর্থ হয়। স্প্রিং বুট ব্যাকএন্ড থেকে আইডি দ্বারা পণ্য ডেটা আনার সময় এরকম একটি ত্রুটি ঘটে। এই পরিস্থিতি ত্রুটির কারণ হতে পারে, প্রায়ই অমিল ডেটা প্রকারের সাথে সম্পর্কিত৷

এই নিবন্ধে, আমরা Axios ব্যবহার করে আইডির মাধ্যমে পণ্য আনার সময় একটি সাধারণ ত্রুটির উপর ফোকাস করব। ত্রুটিটি সাধারণত ফ্রন্টএন্ডে একটি "400 খারাপ অনুরোধ" হিসাবে দেখায় এবং ব্যাকএন্ডে একটি ব্যর্থ ডেটা টাইপ রূপান্তরকে নির্দেশ করে৷ আমরা এই সমস্যার কারণ এবং এর সমাধান উভয়ই অন্বেষণ করব।

এই সমস্যাটি সমাধান করার মাধ্যমে, আপনি ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে টাইপ রূপান্তরগুলি পরিচালনা করার একটি গভীর উপলব্ধি অর্জন করবেন। স্প্রিং বুট ব্যাকএন্ডের সাথে কাজ করার সময় এটি Vite+React অ্যাপ্লিকেশনে আপনার API ইন্টিগ্রেশন উন্নত করবে।

Axios ফেচ এবং স্প্রিং বুট ইন্টিগ্রেশন বোঝা

আমি প্রদত্ত ফ্রন্টএন্ড কোড ব্যবহার করে প্রতিক্রিয়া এবং অ্যাক্সিওস একটি থেকে পণ্য ডেটা আনার জন্য বসন্ত বুট ব্যাকএন্ড গুরুত্বপূর্ণ পয়েন্ট হল আইডি দ্বারা ডেটা আনা, যার সাথে গতিশীল রুট হ্যান্ডলিং জড়িত প্যারাম ব্যবহার করুন প্রতিক্রিয়ায় দ প্যারাম ব্যবহার করুন হুক ইউআরএল থেকে প্রোডাক্ট আইডি ক্যাপচার করে, যা তারপরে আনয়ন অপারেশন ট্রিগার করতে কম্পোনেন্টে পাস করা হয়। এই ID ব্যবহার করে একটি পূর্ণসংখ্যা রূপান্তর করা আবশ্যক parseInt ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে অমিল এড়াতে, সঠিক ডেটা টাইপ স্প্রিং বুট ব্যাকএন্ডে পাঠানো হয়েছে তা নিশ্চিত করে।

Axios এন্ডপয়েন্ট ব্যবহার করে ব্যাকএন্ড API এ GET অনুরোধ সম্পাদন করে: http://localhost:8080/api/products/{id}. ব্যাকএন্ডটি প্রোডাক্ট আইডির জন্য একটি পূর্ণসংখ্যা মান আশা করার জন্য গঠন করা হয়েছে। আইডিটি সঠিকভাবে রূপান্তরিত না হলে, ব্যাকএন্ড একটি টাইপ রূপান্তর ত্রুটি ছুড়ে দেয়, যার ফলে "400 খারাপ অনুরোধ" সমস্যা দেখা দেয়। ব্যাকএন্ডের ত্রুটি লগ স্পষ্টভাবে বলে যে এটি স্ট্রিং মানকে পূর্ণসংখ্যাতে রূপান্তর করতে ব্যর্থ হয়েছে, তাই অনুরোধ করার আগে ফ্রন্টএন্ডে আইডি রূপান্তর করা অপরিহার্য।

স্প্রিং বুট ব্যাকএন্ডে, পণ্য নিয়ন্ত্রক ক্লাসে একটি এন্ডপয়েন্ট ম্যাপ করা আছে /পণ্য/{id}. এই দ্বারা পরিচালিত হয় @পাথভেরিয়েবল টীকা, যা পাথ প্যারামিটারকে মেথড আর্গুমেন্টে আবদ্ধ করে। এটি নিশ্চিত করে যে ইউআরএলে পাস করা পণ্য আইডি নিয়ামক দ্বারা সঠিকভাবে গ্রহণ করা হয়েছে। নিয়ামক, পরিবর্তে, ডাটাবেস থেকে পণ্যের বিবরণ পুনরুদ্ধার করতে পরিষেবা স্তরটিকে কল করে পণ্য পরিষেবা ক্লাস এর সঠিক হ্যান্ডলিং পাথভেরিয়েবল এবং পরিষেবা যুক্তি টাইপ অমিল ত্রুটি প্রতিরোধে অত্যন্ত গুরুত্বপূর্ণ.

পরীক্ষার জন্য, ফ্রন্টএন্ড এবং ব্যাকএন্ড উভয়ই ইউনিট টেস্টিং ব্যবহার করে যাচাই করে যে সমাধানটি বিভিন্ন পরিবেশে কাজ করে। সামনের প্রান্তে, ঠাট্টা 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 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 এবং স্প্রিং বুটে আইডি-ভিত্তিক আনয়ন ত্রুটি অতিক্রম করা

একটি ব্যাকএন্ড API থেকে ডেটা আনার আরেকটি গুরুত্বপূর্ণ দিক হ্যান্ডলিং জড়িত ত্রুটি প্রতিক্রিয়া gracefully Vite+React ফ্রন্টএন্ডে আইডি-ভিত্তিক প্রশ্নগুলির সাথে কাজ করার সময়, সার্ভারের একটি ত্রুটি ফেরত দেওয়ার সম্ভাবনা 400 খারাপ অনুরোধ অথবা একটি ধরনের অমিল সাধারণ। একটি মসৃণ ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করতে ফ্রন্টএন্ডে এই ত্রুটিগুলি কীভাবে অনুমান করা যায় এবং পরিচালনা করা যায় তা বোঝা অপরিহার্য। আমাদের উদাহরণে, পার্সিং আইডি প্যারামিটার জাভাস্ক্রিপ্ট সঠিকভাবে ব্যবহার করা একটি মূল পদক্ষেপ, তবে বিশ্বব্যাপী ব্যতিক্রমগুলি পরিচালনা করার জন্য অতিরিক্ত বিবেচনাও রয়েছে।

আরো জটিল অ্যাপ্লিকেশন, সেট আপ ত্রুটি সীমানা ইন রিঅ্যাক্ট পুরো অ্যাপ্লিকেশনটিকে ক্র্যাশ না করে এই ধরনের ত্রুটি ধরতে সাহায্য করতে পারে। এটি প্রতিক্রিয়া এর ব্যবহার জড়িত componentDidCatch ফাংশন-ভিত্তিক উপাদানগুলিতে জীবনচক্র পদ্ধতি বা ত্রুটি-সীমার হুক। ব্যবহারকারীর কাছে তথ্যপূর্ণ বার্তাগুলি সঠিকভাবে প্রদর্শন করে ব্যাকএন্ড ত্রুটিগুলি পরিচালনা করা যখন API কলগুলি ব্যর্থ হয় তখন হতাশা এবং বিভ্রান্তি প্রতিরোধ করতে পারে। এই পদ্ধতিটি অবৈধ আইডি বা অনুপলব্ধ পণ্যগুলির মতো সমস্যাগুলি ধরার জন্য বিশেষভাবে কার্যকর।

উপরন্তু, ফ্রন্টএন্ড এবং ব্যাকএন্ড উভয় ক্ষেত্রেই লগিং প্রয়োগ করা ডেভেলপারদের পুনরাবৃত্ত সমস্যা সনাক্ত করতে এবং কর্মক্ষমতা অপ্টিমাইজ করতে সাহায্য করতে পারে। উদাহরণস্বরূপ, API আনার অনুরোধের সময় কত ঘন ঘন নির্দিষ্ট ত্রুটি ঘটে তা ট্র্যাক করা অন্তর্নিহিত বাগ বা অদক্ষতা প্রকাশ করতে পারে। মত একটি টুল দিয়ে এই ঘটনা নিরীক্ষণ সেন্ট্রি অথবা কাস্টম লগিং পরিষেবার মাধ্যমে নিশ্চিত করে যে আপনি তাদের দ্রুত সমাধান করতে পারেন। এই অনুশীলনটি সময়ের সাথে সাথে আপনার আবেদনের নির্ভরযোগ্যতা এবং রক্ষণাবেক্ষণের উল্লেখযোগ্যভাবে উন্নতি করে।