ਸਪਰਿੰਗ ਬੂਟ ਨਾਲ Vite+React ਵਿੱਚ ID-ਅਧਾਰਿਤ API ਪ੍ਰਾਪਤ ਕਰਨ ਦੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਹੱਲ ਕਰਨਾ
ਆਧੁਨਿਕ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਵੇਲੇ, ਬੈਕਐਂਡ API ਤੋਂ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਕੰਮ ਹੈ। Vite+React ਫਰੰਟਐਂਡ ਵਿੱਚ, ਇੱਕ ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਨਾਲ ਏਕੀਕ੍ਰਿਤ ਕਰਨਾ ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ ਸਹਿਜ ਹੁੰਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ID ਦੁਆਰਾ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਵੇਲੇ ਤੁਹਾਨੂੰ ਖਾਸ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ Axios ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ।
ਇੱਕ ਆਮ ਸਮੱਸਿਆ ਉਦੋਂ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਬੇਨਤੀਆਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ URL ਰਾਹੀਂ ਸਿੱਧੇ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਜਦੋਂ ਫਰੰਟਐਂਡ ਤੋਂ ਮੰਗੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਅਸਫਲ ਹੋ ਜਾਂਦੀਆਂ ਹਨ। ਇੱਕ ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਤੋਂ ਆਈਡੀ ਦੁਆਰਾ ਉਤਪਾਦ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਵੇਲੇ ਅਜਿਹੀ ਇੱਕ ਗਲਤੀ ਹੁੰਦੀ ਹੈ। ਇਹ ਸਥਿਤੀ ਗਲਤੀਆਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੀ ਹੈ, ਅਕਸਰ ਬੇਮੇਲ ਡਾਟਾ ਕਿਸਮਾਂ ਨਾਲ ਸਬੰਧਤ।
ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ Axios ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ID ਦੁਆਰਾ ਉਤਪਾਦਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦੌਰਾਨ ਆਈ ਇੱਕ ਆਮ ਗਲਤੀ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਾਂਗੇ। ਗਲਤੀ ਆਮ ਤੌਰ 'ਤੇ ਫਰੰਟਐਂਡ ਵਿੱਚ "400 ਖਰਾਬ ਬੇਨਤੀ" ਦੇ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ ਅਤੇ ਬੈਕਐਂਡ ਵਿੱਚ ਇੱਕ ਅਸਫਲ ਡੇਟਾ ਕਿਸਮ ਦੇ ਰੂਪਾਂਤਰਣ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਮੁੱਦੇ ਦੇ ਕਾਰਨ ਅਤੇ ਇਸਦੇ ਹੱਲ ਦੋਵਾਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ।
ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਕੇ, ਤੁਸੀਂ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਦੇ ਵਿਚਕਾਰ ਕਿਸਮ ਦੇ ਪਰਿਵਰਤਨ ਨੂੰ ਸੰਭਾਲਣ ਦੀ ਡੂੰਘੀ ਸਮਝ ਪ੍ਰਾਪਤ ਕਰੋਗੇ। ਇਹ ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹੋਏ Vite+React ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਤੁਹਾਡੇ API ਏਕੀਕਰਣ ਨੂੰ ਸੁਧਾਰੇਗਾ।
ਹੁਕਮ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ |
---|---|
useParams() | ਤੋਂ ਇਹ ਹੁੱਕ react-router-dom ਰੂਟ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਐਕਸਟਰੈਕਟ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਅਸੀਂ ਯੂਆਰਐਲ ਤੋਂ ਉਤਪਾਦ ID ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੰਪੋਨੈਂਟ ਆਪਣੀ ID ਦੁਆਰਾ ਸਹੀ ਉਤਪਾਦ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। |
parseInt(id, 10) | URL ਪੈਰਾਮੀਟਰ (id) ਨੂੰ ਇੱਕ ਸਤਰ ਤੋਂ ਪੂਰਨ ਅੰਕ ਵਿੱਚ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਬੈਕਐਂਡ ਵਿੱਚ "NaN" ਗਲਤੀ ਤੋਂ ਬਚਣ ਲਈ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਜੋ ਉਤਪਾਦ ID ਲਈ ਇੱਕ ਪੂਰਨ ਅੰਕ ਇਨਪੁਟ ਦੀ ਉਮੀਦ ਕਰਦਾ ਹੈ। |
axios.get() | ਦ axios API ਅੰਤਮ ਬਿੰਦੂ ਨੂੰ HTTP GET ਬੇਨਤੀਆਂ ਭੇਜਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਵਿਧੀ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਇਹ ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਤੋਂ ਆਈਡੀ ਦੁਆਰਾ ਉਤਪਾਦ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। |
mockResolvedValue() | ਜੈਸਟ ਟੈਸਟ ਵਿੱਚ, mockResolvedValue() ਇੱਕ Axios ਜਵਾਬ ਦੀ ਨਕਲ ਕਰਦਾ ਹੈ। ਇਹ ਸਾਨੂੰ API ਕਾਲ ਦਾ ਮਜ਼ਾਕ ਉਡਾਉਣ ਅਤੇ ਅਸਲ HTTP ਬੇਨਤੀਆਂ ਕੀਤੇ ਬਿਨਾਂ ਕੰਪੋਨੈਂਟ ਦੇ ਵਿਵਹਾਰ ਦੀ ਜਾਂਚ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। |
waitFor() | ਇਹ ਟੈਸਟਿੰਗ-ਲਾਇਬ੍ਰੇਰੀ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਅਸਿੰਕ੍ਰੋਨਸ ਐਲੀਮੈਂਟਸ (ਜਿਵੇਂ ਕਿ API ਡੇਟਾ) ਨੂੰ ਟੈਸਟ ਦੇ ਦਾਅਵੇ ਨਾਲ ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ DOM ਵਿੱਚ ਰੈਂਡਰ ਕੀਤੇ ਜਾਣ ਦੀ ਉਡੀਕ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਉਤਪਾਦ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕੀਤੇ ਜਾਣ ਤੋਂ ਬਾਅਦ ਹੀ ਟੈਸਟ ਜਾਰੀ ਰਹੇਗਾ। |
MockMvc.perform() | ਸਪਰਿੰਗ ਬੂਟ ਯੂਨਿਟ ਟੈਸਟ ਵਿੱਚ, MockMvc.perform() ਨਿਸ਼ਚਿਤ ਅੰਤ ਬਿੰਦੂ ਨੂੰ ਇੱਕ ਮੌਕ HTTP ਬੇਨਤੀ ਭੇਜਦਾ ਹੈ। ਇਹ ਸਾਨੂੰ ਟੈਸਟਿੰਗ ਦੌਰਾਨ ਬੈਕਐਂਡ ਲਈ ਬੇਨਤੀਆਂ ਦੀ ਨਕਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। |
@WebMvcTest | ਇੱਕ ਸਪਰਿੰਗ ਬੂਟ ਐਨੋਟੇਸ਼ਨ ਜੋ ਵੈੱਬ ਲੇਅਰ 'ਤੇ ਕੇਂਦ੍ਰਿਤ ਇੱਕ ਟੈਸਟ ਵਾਤਾਵਰਨ ਸੈਟ ਅਪ ਕਰਦੀ ਹੈ। ਇਹ ਪੂਰੇ ਐਪਲੀਕੇਸ਼ਨ ਸੰਦਰਭ ਨੂੰ ਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਕੰਟਰੋਲਰਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ। |
@Autowired | ਇਹ ਸਪਰਿੰਗ ਬੂਟ ਐਨੋਟੇਸ਼ਨ ਕੰਟਰੋਲਰਾਂ ਅਤੇ ਟੈਸਟਾਂ ਵਿੱਚ ਸੇਵਾਵਾਂ ਅਤੇ ਰਿਪੋਜ਼ਟਰੀਆਂ ਵਰਗੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਇੰਜੈਕਟ ਕਰਦੀ ਹੈ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਲੋੜੀਂਦੇ ਹਿੱਸੇ ਦਸਤੀ ਇੰਸਟੈਂਟੇਸ਼ਨ ਤੋਂ ਬਿਨਾਂ ਵਰਤੋਂ ਲਈ ਉਪਲਬਧ ਹਨ। |
@PathVariable | ਇਹ ਸਪਰਿੰਗ ਬੂਟ ਐਨੋਟੇਸ਼ਨ URL ਹਿੱਸੇ (ਉਤਪਾਦ ID) ਨੂੰ ਇੱਕ ਵਿਧੀ ਪੈਰਾਮੀਟਰ ਨਾਲ ਜੋੜਦੀ ਹੈ। ਇਹ REST API ਅੰਤਮ ਬਿੰਦੂਆਂ ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਮਾਰਗਾਂ ਨੂੰ ਸੰਭਾਲਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਪ੍ਰਦਾਨ ਕੀਤੀ ਆਈਡੀ ਦੇ ਅਧਾਰ ਤੇ ਸਹੀ ਉਤਪਾਦ ਪ੍ਰਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ। |
Axios Fetch ਅਤੇ Spring Boot Integration ਨੂੰ ਸਮਝਣਾ
ਮੇਰੇ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤਾ ਗਿਆ ਫਰੰਟਐਂਡ ਕੋਡ ਵਰਤਦਾ ਹੈ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ ਅਤੇ Axios ਏ ਤੋਂ ਉਤਪਾਦ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਬਸੰਤ ਬੂਟ ਬੈਕਐਂਡ ਨਾਜ਼ੁਕ ਬਿੰਦੂ ID ਦੁਆਰਾ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਡਾਇਨਾਮਿਕ ਰੂਟ ਹੈਂਡਲਿੰਗ ਸ਼ਾਮਲ ਹੈ Params ਦੀ ਵਰਤੋਂ ਕਰੋ ਪ੍ਰਤੀਕਰਮ ਵਿੱਚ. ਦ Params ਦੀ ਵਰਤੋਂ ਕਰੋ ਹੁੱਕ URL ਤੋਂ ਉਤਪਾਦ ਆਈ.ਡੀ. ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ, ਜਿਸ ਨੂੰ ਫਿਰ ਫੈਚ ਓਪਰੇਸ਼ਨ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ID ਨੂੰ ਵਰਤਦੇ ਹੋਏ ਇੱਕ ਪੂਰਨ ਅੰਕ ਵਿੱਚ ਬਦਲਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ parseInt ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਵਿਚਕਾਰ ਮੇਲ ਖਾਂਦਾ ਬਚਣ ਲਈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਸਹੀ ਡਾਟਾ ਕਿਸਮ ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਨੂੰ ਭੇਜੀ ਗਈ ਹੈ।
Axios ਐਂਡਪੁਆਇੰਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੈਕਐਂਡ API ਨੂੰ GET ਬੇਨਤੀ ਕਰਦਾ ਹੈ: http://localhost:8080/api/products/{id}. ਬੈਕਐਂਡ ਨੂੰ ਉਤਪਾਦ ID ਲਈ ਪੂਰਨ ਅੰਕ ਮੁੱਲ ਦੀ ਉਮੀਦ ਕਰਨ ਲਈ ਢਾਂਚਾ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਜੇਕਰ ID ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਬਦਲਿਆ ਨਹੀਂ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਬੈਕਐਂਡ ਇੱਕ ਕਿਸਮ ਦੀ ਪਰਿਵਰਤਨ ਗਲਤੀ ਸੁੱਟਦਾ ਹੈ, ਜਿਸ ਨਾਲ "400 ਖਰਾਬ ਬੇਨਤੀ" ਸਮੱਸਿਆ ਪੈਦਾ ਹੁੰਦੀ ਹੈ। ਬੈਕਐਂਡ ਦਾ ਐਰਰ ਲੌਗ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਦਾ ਹੈ ਕਿ ਇਹ ਸਤਰ ਮੁੱਲ ਨੂੰ ਪੂਰਨ ਅੰਕ ਵਿੱਚ ਬਦਲਣ ਵਿੱਚ ਅਸਫਲ ਰਿਹਾ, ਇਸ ਲਈ ਬੇਨਤੀ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਫਰੰਟਐਂਡ 'ਤੇ ਆਈਡੀ ਨੂੰ ਬਦਲਣਾ ਜ਼ਰੂਰੀ ਹੈ।
ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਵਿੱਚ, ਉਤਪਾਦ ਕੰਟਰੋਲਰ ਕਲਾਸ ਦਾ ਇੱਕ ਅੰਤਮ ਬਿੰਦੂ ਮੈਪ ਕੀਤਾ ਗਿਆ ਹੈ /ਉਤਪਾਦ/{id}. ਇਸ ਦੁਆਰਾ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ @PathVariable ਐਨੋਟੇਸ਼ਨ, ਜੋ ਮਾਰਗ ਪੈਰਾਮੀਟਰ ਨੂੰ ਵਿਧੀ ਆਰਗੂਮੈਂਟ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ URL ਵਿੱਚ ਪਾਸ ਕੀਤੀ ਉਤਪਾਦ ID ਕੰਟਰੋਲਰ ਦੁਆਰਾ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਾਪਤ ਕੀਤੀ ਗਈ ਹੈ। ਕੰਟਰੋਲਰ, ਬਦਲੇ ਵਿੱਚ, ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਡੇਟਾਬੇਸ ਤੋਂ ਉਤਪਾਦ ਵੇਰਵਿਆਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸੇਵਾ ਪਰਤ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ ਉਤਪਾਦ ਸੇਵਾ ਕਲਾਸ. ਦੀ ਸਹੀ ਸੰਭਾਲ ਪਾਥ ਵੇਰੀਏਬਲ ਅਤੇ ਸੇਵਾ ਤਰਕ ਕਿਸਮ ਦੀ ਮੇਲ ਖਾਂਦੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।
ਜਾਂਚ ਲਈ, ਦੋਵੇਂ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਇਹ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਕਿ ਹੱਲ ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ। ਫਰੰਟੈਂਡ ਵਿੱਚ, ਮਜ਼ਾਕ Axios ਬੇਨਤੀਆਂ ਦਾ ਮਖੌਲ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਕੰਪੋਨੈਂਟ ਪ੍ਰਾਪਤ ਕੀਤੇ ਉਤਪਾਦ ਡੇਟਾ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪੇਸ਼ ਕਰਦਾ ਹੈ। ਇਸੇ ਤਰ੍ਹਾਂ, ਬੈਕਐਂਡ ਰੁਜ਼ਗਾਰ ਦਿੰਦਾ ਹੈ MockMvc API ਅੰਤਮ ਬਿੰਦੂ ਦੇ ਵਿਵਹਾਰ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ, ਜਾਂਚ ਕਰਨਾ ਕਿ ਵੈਧ ID ਪਾਸ ਕੀਤੇ ਜਾਣ 'ਤੇ ਸਹੀ ਉਤਪਾਦ ਡੇਟਾ ਵਾਪਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਟੈਸਟਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਕੇ, ਡਿਵੈਲਪਰ ਇਹ ਯਕੀਨੀ ਬਣਾ ਸਕਦੇ ਹਨ ਕਿ ਕੋਡ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦਾ ਹੈ, ਉਤਪਾਦਨ ਦੇ ਦੌਰਾਨ ਬੱਗ ਦੀ ਸੰਭਾਵਨਾ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ।
ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਨਾਲ Vite+React ਵਿੱਚ Axios ਗਲਤੀ ਨੂੰ ਸੰਭਾਲਣਾ
ਇਹ ਸਕ੍ਰਿਪਟ ਇੱਕ ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਤੋਂ ਆਈਡੀ ਦੁਆਰਾ ਉਤਪਾਦ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ Axios ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ। ਇੱਥੇ ਮੁੱਦੇ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਦੌਰਾਨ ਗਲਤੀਆਂ ਤੋਂ ਬਚਣ ਲਈ ਇੱਕ ਰੂਟ ਪੈਰਾਮੀਟਰ ਨੂੰ ਸਹੀ ਕਿਸਮ ਵਿੱਚ ਬਦਲਣਾ ਸ਼ਾਮਲ ਹੈ।
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;
ਆਈਡੀ ਦੁਆਰਾ ਉਤਪਾਦ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਹੈਂਡਲਿੰਗ
ਇਹ ਸਪਰਿੰਗ ਬੂਟ ਬੈਕਐਂਡ ਕੋਡ ਡੇਟਾਬੇਸ ਤੋਂ ਇਸਦੀ ID ਦੁਆਰਾ ਇੱਕ ਉਤਪਾਦ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਇਹ ਪੂਰਨ ਅੰਕ ਦੀ ਕਿਸਮ ਪਰਿਵਰਤਨ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਡੇਟਾ ਨੂੰ ਪਾਸ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ।
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);
}
}
ਉਤਪਾਦ ਪ੍ਰਾਪਤੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਲਈ ਯੂਨਿਟ ਟੈਸਟ ਸ਼ਾਮਲ ਕਰਨਾ
React ਵਿੱਚ 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 {
@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 ਫ੍ਰੰਟਐਂਡ ਵਿੱਚ ਆਈਡੀ-ਅਧਾਰਿਤ ਪੁੱਛਗਿੱਛਾਂ ਨਾਲ ਨਜਿੱਠਣ ਵੇਲੇ, ਸਰਵਰ ਦੁਆਰਾ ਗਲਤੀ ਵਾਪਸ ਕਰਨ ਦੀ ਸੰਭਾਵਨਾ 400 ਮਾੜੀ ਬੇਨਤੀ ਜਾਂ ਇੱਕ ਕਿਸਮ ਦੀ ਬੇਮੇਲ ਆਮ ਗੱਲ ਹੈ। ਇਹ ਸਮਝਣਾ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਇੱਕ ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਫਰੰਟਐਂਡ ਵਿੱਚ ਇਹਨਾਂ ਗਲਤੀਆਂ ਦਾ ਅਨੁਮਾਨ ਅਤੇ ਪ੍ਰਬੰਧਨ ਕਿਵੇਂ ਕਰਨਾ ਹੈ। ਸਾਡੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਪਾਰਸਿੰਗ ID ਪੈਰਾਮੀਟਰ JavaScript ਦੀ ਸਹੀ ਵਰਤੋਂ ਕਰਨਾ ਇੱਕ ਮੁੱਖ ਕਦਮ ਹੈ, ਪਰ ਵਿਸ਼ਵ ਪੱਧਰ 'ਤੇ ਅਪਵਾਦਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਵਾਧੂ ਵਿਚਾਰ ਵੀ ਹਨ।
ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ, ਸਥਾਪਤ ਕਰਨਾ ਗਲਤੀ ਸੀਮਾਵਾਂ in React ਪੂਰੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕ੍ਰੈਸ਼ ਕੀਤੇ ਬਿਨਾਂ ਇਸ ਕਿਸਮ ਦੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਹਾਸਲ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ। ਇਸ ਵਿੱਚ React's ਦੀ ਵਰਤੋਂ ਸ਼ਾਮਲ ਹੈ componentDidCatch ਫੰਕਸ਼ਨ-ਅਧਾਰਿਤ ਭਾਗਾਂ ਵਿੱਚ ਜੀਵਨ-ਚੱਕਰ ਵਿਧੀ ਜਾਂ ਗਲਤੀ-ਸੀਮਾ ਹੁੱਕ। ਉਪਭੋਗਤਾ ਨੂੰ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਸੁਨੇਹਿਆਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਕੇ ਬੈਕਐਂਡ ਗਲਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣਾ ਜਦੋਂ API ਕਾਲਾਂ ਅਸਫਲ ਹੋ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਨਿਰਾਸ਼ਾ ਅਤੇ ਉਲਝਣ ਨੂੰ ਰੋਕ ਸਕਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਖਾਸ ਤੌਰ 'ਤੇ ਅਵੈਧ ਆਈਡੀ ਜਾਂ ਅਣਉਪਲਬਧ ਉਤਪਾਦਾਂ ਵਰਗੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਫੜਨ ਲਈ ਉਪਯੋਗੀ ਹੈ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਦੋਵਾਂ 'ਤੇ ਲੌਗਿੰਗ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਆਵਰਤੀ ਮੁੱਦਿਆਂ ਦੀ ਪਛਾਣ ਕਰਨ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਏਪੀਆਈ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀਆਂ ਬੇਨਤੀਆਂ ਦੇ ਦੌਰਾਨ ਅਕਸਰ ਕੁਝ ਗਲਤੀਆਂ ਹੋਣ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਅੰਡਰਲਾਈੰਗ ਬੱਗ ਜਾਂ ਅਕੁਸ਼ਲਤਾਵਾਂ ਨੂੰ ਪ੍ਰਗਟ ਕਰ ਸਕਦਾ ਹੈ। ਵਰਗੇ ਟੂਲ ਨਾਲ ਇਹਨਾਂ ਘਟਨਾਵਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨਾ ਸੰਤਰੀ ਜਾਂ ਕਸਟਮ ਲੌਗਿੰਗ ਸੇਵਾਵਾਂ ਦੁਆਰਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਤੁਰੰਤ ਹੱਲ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਅਭਿਆਸ ਸਮੇਂ ਦੇ ਨਾਲ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਭਰੋਸੇਯੋਗਤਾ ਅਤੇ ਰੱਖ-ਰਖਾਅਯੋਗਤਾ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਸੁਧਾਰ ਕਰਦਾ ਹੈ।
Axios ਅਤੇ Spring Boot ਵਿੱਚ ID ਦੁਆਰਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
- ਮੇਰੀ Axios ਬੇਨਤੀ ID ਦੁਆਰਾ ਪ੍ਰਾਪਤ ਕਰਨ ਵੇਲੇ 400 ਗਲਤੀ ਕਿਉਂ ਵਾਪਸ ਕਰਦੀ ਹੈ?
- ਅਜਿਹਾ ਉਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ URL parameter ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸੰਭਾਵਿਤ ਡਾਟਾ ਕਿਸਮ ਵਿੱਚ ਬਦਲਿਆ ਨਹੀਂ ਗਿਆ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਤਰ ਤੋਂ ਪੂਰਨ ਅੰਕ ਤੱਕ। ਵਰਤੋ parseInt() ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ.
- ਮੈਂ Axios ਬੇਨਤੀਆਂ ਵਿੱਚ ਤਰੁੱਟੀਆਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਾਂ?
- ਤੁਸੀਂ ਵਰਤ ਕੇ ਗਲਤੀਆਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦੇ ਹੋ try-catch ਅਸਿੰਕ੍ਰੋਨਸ ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ ਬਲਾਕ. ਵੀ, ਵਰਤੋ axios.interceptors ਗਲੋਬਲ ਗਲਤੀ ਸੰਭਾਲਣ ਲਈ.
- ਸਪਰਿੰਗ ਬੂਟ ਵਿੱਚ @PathVariable ਦੀ ਕੀ ਭੂਮਿਕਾ ਹੈ?
- ਦ @PathVariable ਐਨੋਟੇਸ਼ਨ URL ਤੋਂ ਮੁੱਲ ਨੂੰ ਬੈਕਐਂਡ ਵਿੱਚ ਇੱਕ ਵਿਧੀ ਪੈਰਾਮੀਟਰ ਨਾਲ ਜੋੜਦੀ ਹੈ, URL ਦੇ ਆਧਾਰ 'ਤੇ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।
- ਮੈਂ React ਵਿੱਚ Axios API ਕਾਲਾਂ ਦੀ ਜਾਂਚ ਕਿਵੇਂ ਕਰ ਸਕਦਾ ਹਾਂ?
- ਜਿਵੇਂ ਕਿ ਟੈਸਟਿੰਗ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ Jest ਅਤੇ axios-mock-adapter API ਜਵਾਬਾਂ ਦੀ ਨਕਲ ਕਰਨ ਅਤੇ Axios ਬੇਨਤੀਆਂ ਦੇ ਵਿਵਹਾਰ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ।
- ਸਪਰਿੰਗ ਬੂਟ ਵਿੱਚ ਗਲਤੀਆਂ ਨੂੰ ਲੌਗ ਕਰਨ ਦਾ ਵਧੀਆ ਤਰੀਕਾ ਕੀ ਹੈ?
- ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ SLF4J ਜਾਂ Logback ਸਪਰਿੰਗ ਬੂਟ ਵਿੱਚ ਬੈਕਐਂਡ ਲਾਗਿੰਗ ਲਈ। ਇਹ ਤੁਹਾਨੂੰ API ਬੇਨਤੀਆਂ ਦੇ ਨਾਲ ਆਵਰਤੀ ਮੁੱਦਿਆਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਅਤੇ ਹੱਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
Vite+React ਵਿੱਚ ID ਪ੍ਰਾਪਤ ਕਰਨ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨਾ
ID ਦੁਆਰਾ ਇੱਕ ਬੈਕਐਂਡ API ਤੋਂ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨਾ ਵਿਲੱਖਣ ਚੁਣੌਤੀਆਂ ਪੇਸ਼ ਕਰ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਬੈਕਐਂਡ ਸਖਤ ਡਾਟਾ ਕਿਸਮਾਂ ਦੀ ਉਮੀਦ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਉਦਾਹਰਨ ਵਿੱਚ, ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਬਦਲਣਾ ਆਈ.ਡੀ Axios ਨਾਲ ਬੇਨਤੀ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਫਰੰਟਐਂਡ ਵਿੱਚ "400 ਖਰਾਬ ਬੇਨਤੀ" ਗਲਤੀ ਵਰਗੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਰੋਕਣ ਵਿੱਚ ਮਦਦ ਕੀਤੀ। ਨਿਰਵਿਘਨ ਸੰਚਾਰ ਲਈ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਵਿਚਕਾਰ ਡੇਟਾ ਕਿਸਮ ਦੀ ਅਨੁਕੂਲਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਦੋਵਾਂ ਵਿੱਚ ਸਹੀ ਗਲਤੀ ਨਾਲ ਨਜਿੱਠਣ ਦੀਆਂ ਰਣਨੀਤੀਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਸਥਿਰਤਾ ਨੂੰ ਹੋਰ ਵਧਾਏਗਾ। ਲੌਗਿੰਗ ਫਰੇਮਵਰਕ ਅਤੇ ਗਲਤੀ ਸੀਮਾਵਾਂ ਵਰਗੇ ਸਾਧਨਾਂ ਦੀ ਵਰਤੋਂ ਇਹ ਯਕੀਨੀ ਬਣਾਏਗੀ ਕਿ ਆਵਰਤੀ ਸਮੱਸਿਆਵਾਂ ਦੀ ਪਛਾਣ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਹੱਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਅਤੇ ਸਿਸਟਮ ਭਰੋਸੇਯੋਗਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ।
ਸਰੋਤ ਅਤੇ ਹਵਾਲੇ
- React ਅਤੇ Vite ਵਿੱਚ Axios ਐਰਰ ਹੈਂਡਲਿੰਗ ਬਾਰੇ ਜਾਣਕਾਰੀ ਲਈ, ਅਧਿਕਾਰਤ Axios ਦਸਤਾਵੇਜ਼ਾਂ ਨੇ ਇਸਦੀ ਵਰਤੋਂ ਬਾਰੇ ਵਿਸਤ੍ਰਿਤ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕੀਤੀ ਹੈ। axios.get ਅਤੇ ਗਲਤੀ ਪ੍ਰਬੰਧਨ. ਇੱਥੇ ਦਸਤਾਵੇਜ਼ਾਂ 'ਤੇ ਜਾਓ: Axios ਦਸਤਾਵੇਜ਼ੀ .
- ਜਾਵਾ ਸਪਰਿੰਗ ਬੂਟ ਕੰਟਰੋਲਰ ਸੈਟਅਪ ਨੂੰ ਅਧਿਕਾਰਤ ਸਪਰਿੰਗ ਬੂਟ ਗਾਈਡਾਂ ਤੋਂ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ ਸੀ, ਜਿਸ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੇ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕੀਤੀ ਗਈ ਸੀ। @PathVariable ਅਤੇ REST APIs. ਇੱਥੇ ਹੋਰ ਪੜ੍ਹੋ: ਬਸੰਤ ਬੂਟ ਗਾਈਡ .
- ਰਾਊਟਰ ਦੀ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ Params ਦੀ ਵਰਤੋਂ ਕਰੋ ਹੁੱਕ ਨੂੰ ਡਾਇਨਾਮਿਕ URL ਪੈਰਾਮੀਟਰਾਂ ਦੇ ਸੰਦਰਭ ਵਿੱਚ ਸਮਝਾਇਆ ਗਿਆ ਸੀ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ, ਅਧਿਕਾਰਤ ਰੀਐਕਟ ਰਾਊਟਰ ਦਸਤਾਵੇਜ਼ਾਂ ਦੀ ਜਾਂਚ ਕਰੋ: ਰਾਊਟਰ ਦਸਤਾਵੇਜ਼ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ .
- ਜੇਸਟ ਟੈਸਟਿੰਗ ਅਤੇ ਟੈਸਟਿੰਗ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਐਕਸੀਓਸ ਦਾ ਮਜ਼ਾਕ ਉਡਾਉਣ ਬਾਰੇ ਜਾਣਕਾਰੀ ਜੇਸਟ ਅਤੇ ਐਕਸੀਓਸ ਟੈਸਟਿੰਗ ਦਸਤਾਵੇਜ਼ਾਂ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੀ ਗਈ ਸੀ। ਇੱਥੇ ਸਰੋਤਾਂ 'ਤੇ ਜਾਓ: ਜੈਸਟ ਮੌਕ ਫੰਕਸ਼ਨ ਅਤੇ ਐਕਸੀਓਸ ਮੋਕਿੰਗ ਗਾਈਡ .