ஸ்பிரிங் பூட் மூலம் வைட்+ரியாக்டில் ஐடி அடிப்படையிலான ஏபிஐ ஃபெட்ச் பிழைகளைத் தீர்க்கிறது
நவீன வலைப் பயன்பாடுகளை உருவாக்கும் போது, பின்தளத்தில் API இலிருந்து தரவைப் பெறுவது ஒரு முக்கியமான பணியாகும். வைட்+ரியாக்ட் ஃபிரண்டெண்டில், ஸ்பிரிங் பூட் பின்தளத்துடன் ஒருங்கிணைப்பது பெரும்பாலான சந்தர்ப்பங்களில் தடையற்றது. இருப்பினும், ஐடி மூலம் தரவைப் பெறும்போது, குறிப்பாக Axios ஐப் பயன்படுத்தும் போது குறிப்பிட்ட சிக்கல்களை நீங்கள் சந்திக்கலாம்.
பிரவுசரில் உள்ள URLகள் மூலம் நேரடியாக வேலை செய்யும் கோரிக்கைகள், ஃபிரண்டெண்டில் இருந்து செயல்படுத்தப்படும் போது தோல்வியடையும் போது ஒரு பொதுவான சிக்கல் எழுகிறது. ஸ்பிரிங் பூட் பின்தளத்தில் இருந்து ஐடி மூலம் தயாரிப்பு தரவைப் பெறும்போது இதுபோன்ற ஒரு பிழை ஏற்படுகிறது. இந்த சூழ்நிலை பிழைகளுக்கு வழிவகுக்கும், பெரும்பாலும் பொருந்தாத தரவு வகைகளுடன் தொடர்புடையது.
இந்தக் கட்டுரையில், ஆக்சியோஸைப் பயன்படுத்தி ஐடி மூலம் தயாரிப்புகளைப் பெறும்போது ஏற்படும் பொதுவான பிழை குறித்து கவனம் செலுத்துவோம். இந்தப் பிழை பொதுவாக முன்முனையில் "400 மோசமான கோரிக்கையாக" காண்பிக்கப்படுகிறது மற்றும் பின்தளத்தில் தோல்வியுற்ற தரவு வகை மாற்றத்தைக் குறிக்கிறது. இந்த சிக்கலுக்கான காரணம் மற்றும் அதன் தீர்வு இரண்டையும் ஆராய்வோம்.
இந்தச் சிக்கலைத் தீர்ப்பதன் மூலம், முகப்பு மற்றும் பின்தளத்திற்கு இடையே வகை மாற்றங்களைக் கையாள்வது பற்றிய ஆழமான புரிதலைப் பெறுவீர்கள். இது ஸ்பிரிங் பூட் பின்தளங்களுடன் பணிபுரியும் போது Vite+React பயன்பாடுகளில் உங்கள் API ஒருங்கிணைப்பை மேம்படுத்தும்.
| கட்டளை | பயன்பாட்டின் உதாரணம் |
|---|---|
| useParams() | இருந்து இந்த கொக்கி react-router-dom பாதை அளவுருக்களைப் பிரித்தெடுக்கிறது, இது URL இலிருந்து மாறும் வகையில் தயாரிப்பு ஐடியை மீட்டெடுக்க அனுமதிக்கிறது. கூறு அதன் ஐடி மூலம் சரியான தயாரிப்பைப் பெறுவதை இது உறுதி செய்கிறது. |
| parseInt(id, 10) | URL அளவுருவை (ஐடி) சரத்திலிருந்து முழு எண்ணாக மாற்றப் பயன்படுகிறது. தயாரிப்பு ஐடிக்கான முழு எண் உள்ளீட்டை எதிர்பார்க்கும் பின்தளத்தில் "NaN" பிழையைத் தவிர்ப்பதற்கு இது மிகவும் முக்கியமானது. |
| axios.get() | தி அச்சுகள் HTTP GET கோரிக்கைகளை API இறுதிப்புள்ளிக்கு அனுப்பும் முறை. இந்த வழக்கில், இது ஸ்பிரிங் பூட் பின்தளத்தில் இருந்து ஐடி மூலம் தயாரிப்பு தரவை மீட்டெடுக்கிறது. |
| mockResolvedValue() | ஜெஸ்ட் சோதனையில், mockResolvedValue() ஆனது Axios பதிலை உருவகப்படுத்துகிறது. உண்மையான HTTP கோரிக்கைகளை உருவாக்காமல் API அழைப்பை கேலி செய்யவும், கூறுகளின் நடத்தையை சோதிக்கவும் இது அனுமதிக்கிறது. |
| waitFor() | இது சோதனை-நூலகம் சோதனை வலியுறுத்தல்களுடன் தொடர்வதற்கு முன், ஒத்திசைவற்ற கூறுகள் (ஏபிஐ தரவு போன்றவை) DOM இல் ரெண்டர் செய்யப்படும் வரை காத்திருக்க செயல்பாடு பயன்படுத்தப்படுகிறது. தயாரிப்பு தரவு பெறப்பட்ட பிறகு மட்டுமே சோதனை தொடர்வதை இது உறுதி செய்கிறது. |
| MockMvc.perform() | ஸ்பிரிங் பூட் யூனிட் சோதனையில், MockMvc.perform() ஒரு போலி HTTP கோரிக்கையை குறிப்பிட்ட இறுதிப்புள்ளிக்கு அனுப்புகிறது. சோதனையின் போது பின்தளத்தில் கோரிக்கைகளை உருவகப்படுத்த இது அனுமதிக்கிறது. |
| @WebMvcTest | ஒரு ஸ்பிரிங் பூட் சிறுகுறிப்பு, இது வலை அடுக்கில் கவனம் செலுத்தும் சோதனை சூழலை அமைக்கிறது. முழு பயன்பாட்டு சூழலையும் ஏற்ற வேண்டிய அவசியமின்றி கட்டுப்படுத்திகளை சோதிக்க இது பயனுள்ளதாக இருக்கும். |
| @Autowired | இந்த ஸ்பிரிங் பூட் சிறுகுறிப்பு சேவைகள் மற்றும் களஞ்சியங்கள் போன்ற சார்புகளை கட்டுப்படுத்திகள் மற்றும் சோதனைகளில் செலுத்துகிறது. தேவையான கூறுகள் கைமுறையாக உடனடியாக இல்லாமல் பயன்படுத்துவதை இது உறுதி செய்கிறது. |
| @PathVariable | இந்த ஸ்பிரிங் பூட் சிறுகுறிப்பு URL பிரிவை (தயாரிப்பு ஐடி) ஒரு முறை அளவுருவுடன் பிணைக்கிறது. இது REST API இறுதிப்புள்ளிகளில் டைனமிக் பாதைகளைக் கையாள உதவுகிறது, வழங்கப்பட்ட ஐடியின் அடிப்படையில் சரியான தயாரிப்பு மீட்டெடுக்கப்படுவதை உறுதி செய்கிறது. |
ஆக்சியோஸ் ஃபெட்ச் மற்றும் ஸ்பிரிங் பூட் ஒருங்கிணைப்பைப் புரிந்துகொள்வது
நான் வழங்கிய முகப்புக் குறியீடு பயன்படுத்துகிறது எதிர்வினையாற்று மற்றும் ஆக்சியோஸ் a இலிருந்து தயாரிப்பு தரவைப் பெற ஸ்பிரிங் பூட் பின்தளம். முக்கியமான விஷயம் ஐடி மூலம் தரவைப் பெறுவது, இதில் டைனமிக் ரூட் கையாளுதல் அடங்கும் useParams எதிர்வினையில். தி useParams ஹூக் URL இலிருந்து தயாரிப்பு ஐடியைப் பிடிக்கிறது, பின்னர் அது பெறுதல் செயல்பாட்டைத் தூண்டுவதற்கு கூறுக்குள் அனுப்பப்படுகிறது. இந்த ஐடியை முழு எண்ணாக மாற்ற வேண்டும் parseInt ஃபிரண்ட்எண்ட் மற்றும் பேக்கெண்டிற்கு இடையே உள்ள பொருந்தாத தன்மையை தவிர்க்க, சரியான தரவு வகை ஸ்பிரிங் பூட் பேக்கெண்டிற்கு அனுப்பப்படுவதை உறுதி செய்கிறது.
எண்ட்பாயிண்ட்டைப் பயன்படுத்தி Axios பின்தள API க்கு GET கோரிக்கையைச் செய்கிறது: http://localhost:8080/api/products/{id}. தயாரிப்பு ஐடிக்கு முழு எண் மதிப்பை எதிர்பார்க்கும் வகையில் பின்தளம் கட்டமைக்கப்பட்டுள்ளது. ஐடி சரியாக மாற்றப்படவில்லை என்றால், பின்தளத்தில் ஒரு வகை மாற்றும் பிழை ஏற்படுகிறது, இது "400 மோசமான கோரிக்கை" சிக்கலுக்கு வழிவகுக்கும். பின்தளத்தின் பிழைப் பதிவு, சரத்தின் மதிப்பை முழு எண்ணாக மாற்றத் தவறிவிட்டது என்று தெளிவாகக் கூறுகிறது, அதனால் கோரிக்கையை முன்வைக்கும் முன் ஐடியை முன்முனையில் மாற்றுவது அவசியம்.
ஸ்பிரிங் பூட் பின்தளத்தில், தி தயாரிப்புக் கட்டுப்படுத்தி வகுப்பிற்கு ஒரு இறுதிப்புள்ளி உள்ளது /products/{id}. இது கையாளப்படுகிறது @பாத்வேரியபிள் சிறுகுறிப்பு, இது பாதை அளவுருவை முறை வாதத்துடன் பிணைக்கிறது. URL இல் அனுப்பப்பட்ட தயாரிப்பு ஐடி கட்டுப்படுத்தியால் சரியாகப் பெறப்படுவதை இது உறுதி செய்கிறது. கட்டுப்படுத்தி, இதைப் பயன்படுத்தி, தரவுத்தளத்திலிருந்து தயாரிப்பு விவரங்களை மீட்டெடுக்க சேவை அடுக்கை அழைக்கிறது தயாரிப்பு சேவை வகுப்பு. முறையான கையாளுதல் பாதை மாறக்கூடியது மற்றும் வகை பொருந்தாத பிழைகளைத் தடுப்பதில் சேவை தர்க்கம் முக்கியமானது.
சோதனைக்கு, வெவ்வேறு சூழல்களில் தீர்வு செயல்படுகிறதா என்பதை சரிபார்க்க, முன்பக்கம் மற்றும் பின்தளம் இரண்டும் யூனிட் சோதனையைப் பயன்படுத்துகின்றன. முன்பகுதியில், நகைச்சுவை Axios கோரிக்கைகளை கேலி செய்ய பயன்படுத்தப்படுகிறது, பெறப்பட்ட தயாரிப்பு தரவை கூறு சரியாக வழங்குவதை உறுதி செய்கிறது. இதேபோல், பின்தளம் பயன்படுத்துகிறது 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" errorsconst 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 {@Autowiredprivate ProductService productService;@GetMapping("/products/{id}")public Product getProduct(@PathVariable int id) {return productService.getProductById(id);}}
தயாரிப்பு பெறுதல் செயல்பாட்டிற்கான அலகு சோதனைகளைச் சேர்த்தல்
ரியாக்டில் Axios பெறுதல் கோரிக்கையின் சரியான செயல்பாட்டைச் சரிபார்க்க Jest ஐப் பயன்படுத்தி யூனிட் சோதனைகள் உருவாக்கப்படுகின்றன.
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());});
MockMvc உடன் ஸ்பிரிங் பூட் பின்தளத்தை சோதிக்கிறது
சரியான கோரிக்கை மற்றும் பதில் கையாளுதலை உறுதி செய்ய MockMvc கட்டமைப்பைப் பயன்படுத்தி ஸ்பிரிங் பூட் பின்தளத்தை எவ்வாறு சோதிப்பது என்பதை இந்த எடுத்துக்காட்டு விளக்குகிறது.
@RunWith(SpringRunner.class)@WebMvcTest(ProductController.class)public class ProductControllerTest {@Autowiredprivate MockMvc mockMvc;@Testpublic void testGetProductById() throws Exception {mockMvc.perform(get("/api/products/1")).andExpect(status().isOk()).andExpect(jsonPath("$.name").value("Product1"));}}
ஆக்சியோஸ் மற்றும் ஸ்பிரிங் பூட்டில் ஐடி அடிப்படையிலான ஃபெட்ச் பிழைகளை சமாளித்தல்
பின்தள API இலிருந்து தரவைப் பெறுவதற்கான மற்றொரு முக்கியமான அம்சம் கையாளுதலை உள்ளடக்கியது பிழை பதில்கள் மனதார. வைட்+ரியாக்ட் ஃபிரண்டெண்டில் ஐடி அடிப்படையிலான வினவல்களைக் கையாளும் போது, சர்வர் ஒரு பிழையை வழங்கும் சாத்தியம் 400 தவறான கோரிக்கை அல்லது ஒரு வகை பொருத்தமின்மை பொதுவானது. ஒரு மென்மையான பயனர் அனுபவத்தை உறுதி செய்வதற்காக, இந்த பிழைகளை எவ்வாறு எதிர்நோக்கி நிர்வகிப்பது என்பதைப் புரிந்துகொள்வது அவசியம். எங்கள் எடுத்துக்காட்டில், பாகுபடுத்துதல் அடையாள அளவுரு ஜாவாஸ்கிரிப்டை சரியாகப் பயன்படுத்துவது ஒரு முக்கிய படியாகும், ஆனால் உலகளவில் விதிவிலக்குகளைக் கையாள்வதற்கான கூடுதல் பரிசீலனைகளும் உள்ளன.
மிகவும் சிக்கலான பயன்பாடுகளில், அமைத்தல் பிழை எல்லைகள் in React இந்த வகையான பிழைகளை முழு பயன்பாட்டையும் செயலிழக்கச் செய்யாமல் பிடிக்க உதவும். இது எதிர்வினைகளைப் பயன்படுத்துவதை உள்ளடக்கியது கூறுDidCatch வாழ்க்கைச் சுழற்சி முறை அல்லது செயல்பாடு சார்ந்த கூறுகளில் பிழை-எல்லை கொக்கிகள். பயனருக்கு தகவல் தரும் செய்திகளை சரியாகக் காண்பிப்பதன் மூலம் பின்தளப் பிழைகளைக் கையாள்வது, API அழைப்புகள் தோல்வியடையும் போது ஏமாற்றத்தையும் குழப்பத்தையும் தடுக்கலாம். தவறான ஐடிகள் அல்லது கிடைக்காத தயாரிப்புகள் போன்ற சிக்கல்களைக் கண்டறிய இந்த முறை மிகவும் பயனுள்ளதாக இருக்கும்.
மேலும், முன்பக்கம் மற்றும் பின்தளம் இரண்டிலும் உள்நுழைவைச் செயல்படுத்துவது டெவலப்பர்கள் தொடர்ச்சியான சிக்கல்களைக் கண்டறிந்து செயல்திறனை மேம்படுத்த உதவும். எடுத்துக்காட்டாக, API பெறுதல் கோரிக்கைகளின் போது சில பிழைகள் எவ்வளவு அடிக்கடி நிகழ்கின்றன என்பதைக் கண்காணிப்பது அடிப்படை பிழைகள் அல்லது திறமையின்மைகளை வெளிப்படுத்தலாம். போன்ற ஒரு கருவி மூலம் இந்த நிகழ்வுகளை கண்காணித்தல் சென்ட்ரி அல்லது தனிப்பயன் பதிவு சேவைகள் மூலம் நீங்கள் உடனடியாக அவற்றைத் தீர்க்க முடியும் என்பதை உறுதிப்படுத்துகிறது. இந்த நடைமுறையானது காலப்போக்கில் உங்கள் பயன்பாட்டின் நம்பகத்தன்மையையும் பராமரிப்பையும் கணிசமாக மேம்படுத்துகிறது.
ஆக்சியோஸ் மற்றும் ஸ்பிரிங் பூட்டில் ஐடி மூலம் தரவைப் பெறுவதில் அடிக்கடி கேட்கப்படும் கேள்விகள்
- ஐடி மூலம் பெறும்போது எனது Axios கோரிக்கை ஏன் 400 பிழையை வழங்குகிறது?
- இது நடக்கும் போது URL parameter சரத்திலிருந்து முழு எண்ணாக எதிர்பார்க்கப்படும் தரவு வகைக்கு சரியாக மாற்றப்படவில்லை. பயன்படுத்தவும் parseInt() இதை சரி செய்ய.
- Axios கோரிக்கைகளில் உள்ள பிழைகளை எவ்வாறு கையாள்வது?
- பயன்படுத்தி பிழைகளை கையாளலாம் try-catch ஒத்திசைவற்ற செயல்பாடுகளில் தொகுதிகள். மேலும், பயன்படுத்தவும் axios.interceptors உலகளாவிய பிழை கையாளுதலுக்காக.
- ஸ்பிரிங் பூட்டில் @PathVariable இன் பங்கு என்ன?
- தி @PathVariable சிறுகுறிப்பு URL இலிருந்து மதிப்பை பின்தளத்தில் உள்ள முறை அளவுருவுடன் பிணைக்கிறது, URL ஐ அடிப்படையாகக் கொண்டு மாறும் தரவை மீட்டெடுக்க உதவுகிறது.
- ஆக்சியோஸ் ஏபிஐ அழைப்புகளை ரியாக்டில் எப்படிச் சோதிப்பது?
- போன்ற சோதனை நூலகங்களைப் பயன்படுத்தவும் Jest மற்றும் axios-mock-adapter API பதில்களை உருவகப்படுத்த மற்றும் Axios கோரிக்கைகளின் நடத்தையை சோதிக்க.
- ஸ்பிரிங் பூட்டில் பிழைகளை பதிவு செய்வதற்கான சிறந்த வழி எது?
- நீங்கள் பயன்படுத்தலாம் SLF4J அல்லது Logback ஸ்பிரிங் பூட்டில் பின்தளத்தில் உள்நுழைவதற்கு. ஏபிஐ கோரிக்கைகளில் தொடர்ச்சியான சிக்கல்களைக் கண்காணிக்கவும் தீர்க்கவும் இது உங்களை அனுமதிக்கிறது.
Vite+React இல் ஐடி பெறுதல் சிக்கல்களைத் தீர்க்கிறது
பேக்கெண்ட் API இலிருந்து ஐடி மூலம் தரவைப் பெறுவது தனிப்பட்ட சவால்களை முன்வைக்கும், குறிப்பாக பின்தளமானது கடுமையான தரவு வகைகளை எதிர்பார்க்கும் போது. எங்கள் எடுத்துக்காட்டில், சரியாக மாற்றுவது ஐடி Axios உடன் கோரிக்கையை அனுப்பும் முன் முன்பகுதியில் "400 Bad Request" பிழை போன்ற சிக்கல்களைத் தடுக்க உதவியது. சுமூகமான தகவல்தொடர்புக்கு முன்பக்கம் மற்றும் பின்தளத்திற்கு இடையே தரவு வகை இணக்கத்தன்மையை உறுதி செய்வது மிகவும் முக்கியமானது.
கூடுதலாக, முன்பக்கம் மற்றும் பின்தளத்தில் சரியான பிழை கையாளும் உத்திகளை செயல்படுத்துவது பயன்பாட்டின் நிலைத்தன்மையை மேலும் மேம்படுத்தும். லாக்கிங் ஃப்ரேம்வொர்க்குகள் மற்றும் பிழை எல்லைகள் போன்ற கருவிகளைப் பயன்படுத்துவது, தொடர்ச்சியான சிக்கல்களைக் கண்டறிந்து சரிசெய்து, பயனர் அனுபவத்தையும் கணினி நம்பகத்தன்மையையும் மேம்படுத்தும்.
ஆதாரங்கள் மற்றும் குறிப்புகள்
- ரியாக்ட் மற்றும் வைட்டில் ஆக்சியோஸ் பிழை கையாளுதல் பற்றிய தகவலுக்கு, அதிகாரப்பூர்வ ஆக்சியோஸ் ஆவணங்கள் பயன்பாடு பற்றிய விரிவான நுண்ணறிவுகளை வழங்கியது. axios.get மற்றும் பிழை மேலாண்மை. ஆவணங்களை இங்கே பார்வையிடவும்: ஆக்சியோஸ் ஆவணப்படுத்தல் .
- ஜாவா ஸ்பிரிங் பூட் கன்ட்ரோலர் அமைப்பு அதிகாரப்பூர்வ ஸ்பிரிங் பூட் வழிகாட்டிகளில் இருந்து குறிப்பிடப்பட்டு, எப்படி செயல்படுத்துவது என்பது குறித்த சிறந்த நடைமுறைகளை வழங்குகிறது. @பாத்வேரியபிள் மற்றும் REST APIகள். மேலும் படிக்க: வசந்த துவக்க வழிகாட்டி .
- எதிர்வினை திசைவி useParams ஹூக் டைனமிக் URL அளவுருக்களின் பின்னணியில் விளக்கப்பட்டது. மேலும் விவரங்களுக்கு, அதிகாரப்பூர்வ ரியாக்ட் ரூட்டர் ஆவணத்தைப் பார்க்கவும்: எதிர்வினை திசைவி ஆவணப்படுத்தல் .
- சோதனை நோக்கங்களுக்காக ஜெஸ்ட் சோதனை மற்றும் கேலி ஆக்சியோஸ் பற்றிய தகவல்கள் ஜெஸ்ட் மற்றும் ஆக்சியோஸ் சோதனை ஆவணங்களிலிருந்து பெறப்பட்டது. இங்கே ஆதாரங்களைப் பார்வையிடவும்: ஜெஸ்ட் மோக் செயல்பாடுகள் மற்றும் ஆக்சியோஸ் கேலி வழிகாட்டி .