Vite+React'te API Verilerini Kimliğe Göre Almak için Spring Boot Arka Uçunu Kullanırken Axios Hatalarını Yönetme

Spring Boot ile Vite+React'te Kimlik Tabanlı API Getirme Hatalarını Çözme

Modern web uygulamaları oluştururken arka uç API'sinden veri almak kritik bir görevdir. Vite+React ön ucunda, Spring Boot arka ucuyla entegrasyon çoğu durumda sorunsuzdur. Ancak kimlikle veri alırken, özellikle Axios kullanırken belirli sorunlarla karşılaşabilirsiniz.

Doğrudan tarayıcıdaki URL'ler aracılığıyla çalışan istekler ön uçtan çağrıldığında başarısız olduğunda yaygın bir sorun ortaya çıkar. Ürün verileri Spring Boot arka ucundan kimliğe göre alınırken böyle bir hata meydana gelir. Bu durum genellikle uyumsuz veri türleriyle ilgili hatalara yol açabilir.

Bu yazımızda Axios kullanarak ürünleri ID'ye göre getirirken sık karşılaşılan bir hataya odaklanacağız. Hata genellikle ön uçta "400 Hatalı İstek" olarak görünür ve arka uçta başarısız bir veri türü dönüştürmesine işaret eder. Hem bu sorunun nedenini hem de çözümünü araştıracağız.

Bu sorunu çözerek ön uç ve arka uç arasındaki tür dönüşümlerini yönetme konusunda daha derin bir anlayış kazanacaksınız. Bu, Spring Boot arka uçlarıyla çalışırken Vite+React uygulamalarındaki API entegrasyonunuzu geliştirecektir.

Axios Fetch ve Spring Boot Entegrasyonunu Anlamak

Sağladığım ön uç kodu şunu kullanıyor: Tepki ver Ve Aksiyos ürün verilerini bir yerden almak için Bahar Çizme arka uç. Kritik nokta, dinamik rota yönetimini içeren, verileri ID'ye göre getirmektir. Param'ları kullan React'ta. Param'ları kullan hook, ürün kimliğini URL'den yakalar ve bu, daha sonra getirme işlemini tetiklemek için bileşene iletilir. Bu kimlik kullanılarak bir tamsayıya dönüştürülmelidir. ayrıştırma ön uç ve arka uç arasındaki uyumsuzlukları önlemek için Spring Boot arka ucuna doğru veri türünün gönderilmesini sağlamak.

Axios, uç noktayı kullanarak arka uç API'sine GET isteğini gerçekleştirir: http://localhost:8080/api/products/{id}. Arka uç, ürün kimliği için bir tam sayı değeri bekleyecek şekilde yapılandırılmıştır. Kimlik doğru şekilde dönüştürülmezse arka uç bir tür dönüştürme hatası vererek "400 Hatalı İstek" sorununa yol açar. Arka ucun hata günlüğü, dize değerini bir tam sayıya dönüştürmenin başarısız olduğunu açıkça belirtir; bu nedenle, istekte bulunmadan önce ön uçtaki kimliği dönüştürmek önemlidir.

Spring Boot arka ucunda, ÜrünKontrolörü sınıfın eşlenen bir uç noktası var /ürünler/{id}. Bu, şu kişi tarafından ele alınır: @PathVariable yol parametresini yöntem bağımsız değişkenine bağlayan ek açıklama. Bu, URL'de iletilen ürün kimliğinin denetleyici tarafından doğru şekilde alınmasını sağlar. Denetleyici, ürün ayrıntılarını veritabanından almak için hizmet katmanını çağırır. ÜrünHizmet sınıf. Uygun şekilde işlenmesi Yol Değişkeni ve hizmet mantığı, tür uyuşmazlığı hatalarının önlenmesinde çok önemlidir.

Test için hem ön uç hem de arka uç, çözümün farklı ortamlarda çalıştığını doğrulamak için birim testinden yararlanır. Ön uçta, Alay Axios isteklerini taklit etmek için kullanılır ve bileşenin getirilen ürün verilerini doğru şekilde işlemesini sağlar. Benzer şekilde, arka uç şunları kullanır: MockMvc API uç noktasının davranışını test etmek ve geçerli kimlikler iletildiğinde doğru ürün verilerinin döndürülüp döndürülmediğini kontrol etmek. Geliştiriciler testleri dahil ederek kodun beklendiği gibi çalışmasını sağlayabilir ve üretim sırasında hata olasılığını azaltabilir.

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 ve Spring Boot'ta Kimlik Tabanlı Getirme Hatalarının Üstesinden Gelmek

Bir arka uç API'sinden veri almanın bir diğer kritik yönü, hata yanıtları zarifçe. Vite+React ön ucunda kimlik tabanlı sorgularla uğraşırken sunucunun aşağıdaki gibi bir hata döndürme olasılığı: 400 Hatalı İstek veya tür uyuşmazlığı yaygındır. Sorunsuz bir kullanıcı deneyimi sağlamak için ön uçtaki bu hataların nasıl tahmin edileceğini ve yönetileceğini anlamak önemlidir. Örneğimizde ayrıştırma Kimlik parametresi JavaScript'i doğru şekilde kullanmak önemli bir adımdır, ancak istisnaları genel olarak ele alırken dikkate alınması gereken ek hususlar da vardır.

Daha karmaşık uygulamalarda kurulum hata sınırları React, tüm uygulamayı çökertmeden bu tür hataların yakalanmasına yardımcı olabilir. Bu, React'ın kullanımını içerir bileşenDidCatch işlev tabanlı bileşenlerde yaşam döngüsü yöntemi veya hata sınırı kancaları. Bilgilendirici mesajları kullanıcıya doğru şekilde görüntüleyerek arka uç hatalarını ele almak, API çağrıları başarısız olduğunda hayal kırıklığını ve kafa karışıklığını önleyebilir. Bu yöntem özellikle geçersiz kimlikler veya kullanılamayan ürünler gibi sorunları yakalamak için kullanışlıdır.

Ayrıca, hem ön uçta hem de arka uçta günlük kaydının uygulanması, geliştiricilerin yinelenen sorunları belirlemesine ve performansı optimize etmesine yardımcı olabilir. Örneğin, API getirme istekleri sırasında belirli hataların ne sıklıkta ortaya çıktığını izlemek, altta yatan hataları veya verimsizlikleri ortaya çıkarabilir. Bu olayları aşağıdaki gibi bir araçla izlemek Nöbetçi veya özel kayıt hizmetleri aracılığıyla bu sorunları hemen çözebilmenizi sağlar. Bu uygulama zaman içinde uygulamanızın güvenilirliğini ve sürdürülebilirliğini önemli ölçüde artırır.