Vite+React-ൽ ഐഡി പ്രകാരം API ഡാറ്റ വീണ്ടെടുക്കാൻ സ്പ്രിംഗ് ബൂട്ട് ബാക്കെൻഡ് ഉപയോഗിക്കുമ്പോൾ Axios പിശകുകൾ കൈകാര്യം ചെയ്യുക

സ്പ്രിംഗ് ബൂട്ട് ഉപയോഗിച്ച് Vite+React-ലെ ഐഡി അടിസ്ഥാനമാക്കിയുള്ള API ലഭ്യമാക്കൽ പിശകുകൾ പരിഹരിക്കുന്നു

ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുമ്പോൾ, ഒരു ബാക്കെൻഡ് API-യിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നത് ഒരു നിർണായക ചുമതലയാണ്. ഒരു Vite+React ഫ്രണ്ടെൻഡിൽ, ഒരു സ്പ്രിംഗ് ബൂട്ട് ബാക്കെൻഡുമായി സംയോജിപ്പിക്കുന്നത് മിക്ക കേസുകളിലും തടസ്സമില്ലാത്തതാണ്. എന്നിരുന്നാലും, ഐഡി വഴി ഡാറ്റ ലഭ്യമാക്കുമ്പോൾ, പ്രത്യേകിച്ച് Axios ഉപയോഗിക്കുമ്പോൾ നിങ്ങൾക്ക് പ്രത്യേക പ്രശ്നങ്ങൾ നേരിടാം.

ബ്രൗസറിലെ URL-കൾ മുഖേന നേരിട്ട് പ്രവർത്തിക്കുന്ന അഭ്യർത്ഥനകൾ ഫ്രണ്ടെൻഡിൽ നിന്ന് അഭ്യർത്ഥിക്കുമ്പോൾ പരാജയപ്പെടുമ്പോൾ ഒരു സാധാരണ പ്രശ്നം ഉയർന്നുവരുന്നു. ഒരു സ്പ്രിംഗ് ബൂട്ട് ബാക്കെൻഡിൽ നിന്ന് ഐഡി വഴി ഉൽപ്പന്ന ഡാറ്റ ലഭ്യമാക്കുമ്പോൾ അത്തരത്തിലുള്ള ഒരു പിശക് സംഭവിക്കുന്നു. ഈ സാഹചര്യം പലപ്പോഴും പൊരുത്തപ്പെടാത്ത ഡാറ്റ തരങ്ങളുമായി ബന്ധപ്പെട്ട പിശകുകളിലേക്ക് നയിച്ചേക്കാം.

ഈ ലേഖനത്തിൽ, Axios ഉപയോഗിച്ച് ഐഡി മുഖേന ഉൽപ്പന്നങ്ങൾ ലഭ്യമാക്കുമ്പോൾ ഉണ്ടാകുന്ന ഒരു സാധാരണ പിശകിൽ ഞങ്ങൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കും. ഈ പിശക് സാധാരണയായി ഫ്രണ്ട്എൻഡിൽ "400 മോശം അഭ്യർത്ഥന" ആയി കാണിക്കുകയും ബാക്കെൻഡിൽ പരാജയപ്പെട്ട ഡാറ്റാ തരം പരിവർത്തനത്തിലേക്ക് പോയിൻ്റ് ചെയ്യുകയും ചെയ്യുന്നു. ഈ പ്രശ്നത്തിൻ്റെ കാരണവും അതിൻ്റെ പരിഹാരവും ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും.

ഈ പ്രശ്നം പരിഹരിക്കുന്നതിലൂടെ, ഫ്രണ്ട്എൻഡിനും ബാക്കെൻഡിനും ഇടയിലുള്ള തരം പരിവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനെക്കുറിച്ച് നിങ്ങൾക്ക് ആഴത്തിലുള്ള ധാരണ ലഭിക്കും. സ്പ്രിംഗ് ബൂട്ട് ബാക്കെൻഡുകളിൽ പ്രവർത്തിക്കുമ്പോൾ Vite+React ആപ്ലിക്കേഷനുകളിൽ ഇത് നിങ്ങളുടെ API സംയോജനം മെച്ചപ്പെടുത്തും.

Axios Fetch, Spring Boot Integration എന്നിവ മനസ്സിലാക്കുന്നു

ഞാൻ നൽകിയ ഫ്രണ്ട് എൻഡ് കോഡ് ഉപയോഗിക്കുന്നു പ്രതികരിക്കുക ഒപ്പം അക്സിയോസ് എയിൽ നിന്ന് ഉൽപ്പന്ന ഡാറ്റ ലഭ്യമാക്കാൻ സ്പ്രിംഗ് ബൂട്ട് പിൻഭാഗം. ഡയനാമിക് റൂട്ട് ഹാൻഡ്‌ലിംഗ് ഉൾപ്പെടുന്ന ഐഡി മുഖേന ഡാറ്റ ലഭ്യമാക്കുക എന്നതാണ് പ്രധാന കാര്യം useParams പ്രതികരണത്തിൽ. ദി useParams URL-ൽ നിന്ന് ഉൽപ്പന്ന ഐഡി ഹുക്ക് ക്യാപ്‌ചർ ചെയ്യുന്നു, അത് ലഭ്യമാക്കുന്നതിനുള്ള പ്രവർത്തനത്തെ ട്രിഗർ ചെയ്യുന്നതിനായി ഘടകത്തിലേക്ക് കൈമാറുന്നു. ഈ ഐഡി ഉപയോഗിച്ച് ഒരു പൂർണ്ണസംഖ്യയിലേക്ക് പരിവർത്തനം ചെയ്യണം parseInt മുൻഭാഗവും ബാക്കെൻഡും തമ്മിലുള്ള പൊരുത്തക്കേടുകൾ ഒഴിവാക്കാൻ, ശരിയായ ഡാറ്റ തരം സ്പ്രിംഗ് ബൂട്ട് ബാക്കെൻഡിലേക്ക് അയയ്‌ക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

എൻഡ് പോയിൻ്റ് ഉപയോഗിച്ച് Axios ബാക്കെൻഡ് API-ലേക്ക് GET അഭ്യർത്ഥന നടത്തുന്നു: http://localhost:8080/api/products/{id}. ഉൽപ്പന്ന ഐഡിക്ക് ഒരു പൂർണ്ണസംഖ്യ പ്രതീക്ഷിക്കുന്ന തരത്തിലാണ് ബാക്കെൻഡ് ക്രമീകരിച്ചിരിക്കുന്നത്. ഐഡി ശരിയായി പരിവർത്തനം ചെയ്തില്ലെങ്കിൽ, ബാക്കെൻഡ് ഒരു തരം പരിവർത്തന പിശക് സൃഷ്ടിക്കുന്നു, ഇത് "400 മോശം അഭ്യർത്ഥന" പ്രശ്നത്തിലേക്ക് നയിക്കുന്നു. സ്ട്രിംഗ് മൂല്യം ഒരു പൂർണ്ണസംഖ്യയിലേക്ക് പരിവർത്തനം ചെയ്യുന്നതിൽ പരാജയപ്പെട്ടുവെന്ന് ബാക്കെൻഡിൻ്റെ പിശക് ലോഗ് വ്യക്തമായി പ്രസ്താവിക്കുന്നു, അതിനാലാണ് അഭ്യർത്ഥന നടത്തുന്നതിന് മുമ്പ് ഫ്രണ്ട്എൻഡിലെ ഐഡി പരിവർത്തനം ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്.

സ്പ്രിംഗ് ബൂട്ട് ബാക്കെൻഡിൽ, ദി ഉൽപ്പന്ന കൺട്രോളർ ക്ലാസിലേക്ക് ഒരു എൻഡ് പോയിൻ്റ് മാപ്പ് ചെയ്തിട്ടുണ്ട് /ഉൽപ്പന്നങ്ങൾ/{id}. ഇത് കൈകാര്യം ചെയ്യുന്നത് @പാത്ത് വേരിയബിൾ വ്യാഖ്യാനം, ഇത് പാത്ത് പാരാമീറ്ററിനെ മെത്തേഡ് ആർഗ്യുമെൻ്റുമായി ബന്ധിപ്പിക്കുന്നു. URL-ൽ പാസാക്കിയ ഉൽപ്പന്ന ഐഡി കൺട്രോളറിന് ശരിയായി ലഭിക്കുന്നുണ്ടെന്ന് ഇത് ഉറപ്പാക്കുന്നു. കൺട്രോളർ, ഡാറ്റാബേസിൽ നിന്ന് ഉൽപ്പന്ന വിശദാംശങ്ങൾ വീണ്ടെടുക്കാൻ സേവന പാളിയിലേക്ക് വിളിക്കുന്നു ഉൽപ്പന്ന സേവനം ക്ലാസ്. ശരിയായ കൈകാര്യം ചെയ്യൽ പാത്ത് വേരിയബിൾ കൂടാതെ തരത്തിലുള്ള പൊരുത്തക്കേടുകൾ തടയുന്നതിൽ സേവന യുക്തി വളരെ പ്രധാനമാണ്.

പരിശോധനയ്‌ക്കായി, വ്യത്യസ്‌ത പരിതസ്ഥിതികളിൽ സൊല്യൂഷൻ പ്രവർത്തിക്കുന്നുണ്ടെന്ന് സാധൂകരിക്കാൻ ഫ്രണ്ട്എൻഡും ബാക്കെൻഡും യൂണിറ്റ് ടെസ്റ്റിംഗ് ഉപയോഗിക്കുന്നു. മുൻവശത്ത്, തമാശ ആക്‌സിയോസ് അഭ്യർത്ഥനകളെ പരിഹസിക്കാൻ ഉപയോഗിക്കുന്നു, ഈ ഘടകം ലഭിച്ച ഉൽപ്പന്ന ഡാറ്റ ശരിയായി നൽകുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. അതുപോലെ, ബാക്കെൻഡ് ജോലി ചെയ്യുന്നു 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"));
  }
}

ആക്‌സിയോസിലും സ്‌പ്രിംഗ് ബൂട്ടിലും ഐഡി അടിസ്ഥാനമാക്കിയുള്ള ഫെച്ച് പിശകുകൾ മറികടക്കുന്നു

ഒരു ബാക്കെൻഡ് API-യിൽ നിന്ന് ഡാറ്റ എടുക്കുന്നതിൻ്റെ മറ്റൊരു നിർണായക വശം കൈകാര്യം ചെയ്യുന്നത് ഉൾപ്പെടുന്നു പിശക് പ്രതികരണങ്ങൾ ഭംഗിയായി. Vite+React ഫ്രണ്ട്‌ടെൻഡിൽ ഐഡി അധിഷ്‌ഠിത അന്വേഷണങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ, സെർവറിന് ഇതുപോലുള്ള ഒരു പിശക് വരാനുള്ള സാധ്യത 400 മോശം അഭ്യർത്ഥന അല്ലെങ്കിൽ ഒരു തരം പൊരുത്തക്കേട് സാധാരണമാണ്. സുഗമമായ ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കുന്നതിന് മുൻവശത്തെ ഈ പിശകുകൾ എങ്ങനെ മുൻകൂട്ടി കാണാമെന്നും നിയന്ത്രിക്കാമെന്നും മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, പാഴ്സ് ചെയ്യുന്നു ഐഡി പാരാമീറ്റർ JavaScript ശരിയായി ഉപയോഗിക്കുന്നത് ഒരു പ്രധാന ഘട്ടമാണ്, എന്നാൽ ആഗോളതലത്തിൽ ഒഴിവാക്കലുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള അധിക പരിഗണനകളും ഉണ്ട്.

കൂടുതൽ സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകളിൽ, സജ്ജീകരിക്കുക പിശക് അതിരുകൾ മുഴുവൻ ആപ്ലിക്കേഷനും ക്രാഷ് ചെയ്യാതെ തന്നെ ഇത്തരത്തിലുള്ള പിശകുകൾ ക്യാപ്‌ചർ ചെയ്യാൻ React സഹായിക്കും. ഇതിൽ React's ഉപയോഗിക്കുന്നത് ഉൾപ്പെടുന്നു ഘടകംDidCatch ഫംഗ്ഷൻ അടിസ്ഥാനമാക്കിയുള്ള ഘടകങ്ങളിൽ ലൈഫ് സൈക്കിൾ രീതി അല്ലെങ്കിൽ പിശക്-ബൗണ്ടറി ഹുക്കുകൾ. ഉപയോക്താവിന് വിജ്ഞാനപ്രദമായ സന്ദേശങ്ങൾ ശരിയായി പ്രദർശിപ്പിക്കുന്നതിലൂടെ ബാക്കെൻഡ് പിശകുകൾ കൈകാര്യം ചെയ്യുന്നത് API കോളുകൾ പരാജയപ്പെടുമ്പോൾ നിരാശയും ആശയക്കുഴപ്പവും തടയാൻ കഴിയും. അസാധുവായ ഐഡികളോ ലഭ്യമല്ലാത്ത ഉൽപ്പന്നങ്ങളോ പോലുള്ള പ്രശ്‌നങ്ങൾ കണ്ടെത്തുന്നതിന് ഈ രീതി പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

കൂടാതെ, ഫ്രണ്ട്എൻഡിലും ബാക്കെൻഡിലും ലോഗിംഗ് നടപ്പിലാക്കുന്നത് ഡെവലപ്പർമാരെ ആവർത്തിച്ചുള്ള പ്രശ്നങ്ങൾ തിരിച്ചറിയാനും പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യാനും സഹായിക്കും. ഉദാഹരണത്തിന്, API ലഭ്യമാക്കുന്നതിനുള്ള അഭ്യർത്ഥനകൾക്കിടയിൽ എത്ര തവണ ചില പിശകുകൾ സംഭവിക്കുന്നുവെന്ന് ട്രാക്ക് ചെയ്യുന്നത് അടിസ്ഥാന ബഗുകളോ കാര്യക്ഷമതയില്ലായ്മയോ വെളിപ്പെടുത്തിയേക്കാം. ഇതുപോലുള്ള ഒരു ഉപകരണം ഉപയോഗിച്ച് ഈ ഇവൻ്റുകൾ നിരീക്ഷിക്കുന്നു സെൻട്രി അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത ലോഗിംഗ് സേവനങ്ങൾ വഴി നിങ്ങൾക്ക് അവയെ ഉടനടി അഭിസംബോധന ചെയ്യാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുന്നു. ഈ സമ്പ്രദായം കാലക്രമേണ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ വിശ്വാസ്യതയും പരിപാലനവും ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു.