Mengelola Kesalahan Axios Saat Menggunakan Spring Boot Backend untuk Mengambil Data API berdasarkan ID di Vite+React

Memecahkan Kesalahan Pengambilan API berbasis ID di Vite+React dengan Spring Boot

Saat membangun aplikasi web modern, mengambil data dari API backend adalah tugas yang penting. Di frontend Vite+React, integrasi dengan backend Spring Boot berjalan mulus dalam banyak kasus. Namun, Anda mungkin mengalami masalah tertentu saat mengambil data berdasarkan ID, terutama saat menggunakan Axios.

Masalah umum muncul ketika permintaan yang bekerja secara langsung melalui URL di browser gagal saat dipanggil dari frontend. Salah satu kesalahan tersebut terjadi saat mengambil data produk berdasarkan ID dari backend Spring Boot. Situasi ini dapat menyebabkan kesalahan, sering kali terkait dengan tipe data yang tidak cocok.

Pada artikel ini, kami akan fokus pada kesalahan umum yang ditemui saat mengambil produk berdasarkan ID menggunakan Axios. Kesalahan biasanya muncul sebagai "400 Permintaan Buruk" di frontend dan mengarah ke konversi tipe data yang gagal di backend. Kami akan menyelidiki penyebab masalah ini dan solusinya.

Dengan mengatasi masalah ini, Anda akan memperoleh pemahaman yang lebih mendalam tentang penanganan konversi tipe antara frontend dan backend. Ini akan meningkatkan integrasi API Anda dalam aplikasi Vite+React saat bekerja dengan backend Spring Boot.

Memahami Integrasi Axios Fetch dan Spring Boot

Kode frontend yang saya berikan berguna Bereaksi Dan aksio untuk mengambil data produk dari a Sepatu Musim Semi bagian belakang. Titik kritisnya adalah mengambil data berdasarkan ID, yang melibatkan penanganan rute dinamis gunakanParams di Bereaksi. Itu gunakanParams hook menangkap ID produk dari URL, yang kemudian diteruskan ke komponen untuk memicu operasi pengambilan. ID ini harus diubah menjadi bilangan bulat menggunakan parseInt untuk menghindari ketidakcocokan antara frontend dan backend, pastikan tipe data yang benar dikirim ke backend Spring Boot.

Axios melakukan permintaan GET ke API backend menggunakan titik akhir: http://localhost:8080/api/products/{id}. Backend disusun untuk mengharapkan nilai bilangan bulat untuk ID produk. Jika ID tidak dikonversi dengan benar, backend memunculkan kesalahan konversi jenis, yang menyebabkan masalah "400 Permintaan Buruk". Log kesalahan backend dengan jelas menyatakan bahwa ia gagal mengonversi nilai string menjadi bilangan bulat, oleh karena itu penting untuk mengonversi ID di frontend sebelum membuat permintaan.

Di backend Spring Boot, file Pengontrol Produk kelas memiliki titik akhir yang dipetakan /produk/{id}. Hal ini ditangani oleh @Variabel Jalur anotasi, yang mengikat parameter jalur ke argumen metode. Hal ini memastikan bahwa ID produk yang diteruskan dalam URL diterima dengan benar oleh pengontrol. Pengontrol, pada gilirannya, memanggil lapisan layanan untuk mengambil detail produk dari database menggunakan Layanan Produk kelas. Penanganan yang tepat Variabel Jalur dan logika layanan sangat penting dalam mencegah kesalahan ketidakcocokan tipe.

Untuk pengujian, frontend dan backend menggunakan pengujian unit untuk memvalidasi bahwa solusi berfungsi di lingkungan yang berbeda. Di bagian depan, Bersenda gurau digunakan untuk meniru permintaan Axios, memastikan bahwa komponen merender data produk yang diambil dengan benar. Demikian pula, backend bekerja MockMvc untuk menguji perilaku titik akhir API, memeriksa apakah data produk yang benar dikembalikan ketika ID yang valid diteruskan. Dengan menggabungkan pengujian, pengembang dapat memastikan bahwa kode berfungsi seperti yang diharapkan, sehingga mengurangi kemungkinan bug selama produksi.

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"));
  }
}

Mengatasi Fetch Error berbasis ID di Axios dan Spring Boot

Aspek penting lainnya dalam mengambil data dari API backend melibatkan penanganan tanggapan kesalahan dengan anggun. Saat menangani kueri berbasis ID di frontend Vite+React, kemungkinan server mengembalikan kesalahan seperti 400 Permintaan Buruk atau ketidakcocokan tipe sering terjadi. Penting untuk memahami cara mengantisipasi dan mengelola kesalahan ini di frontend untuk memastikan pengalaman pengguna yang lancar. Dalam contoh kita, parsing parameter identitas menggunakan JavaScript dengan benar adalah langkah penting, namun ada juga pertimbangan tambahan untuk menangani pengecualian secara global.

Dalam aplikasi yang lebih kompleks, pengaturan batas kesalahan di React dapat membantu menangkap jenis kesalahan ini tanpa membuat seluruh aplikasi mogok. Ini melibatkan penggunaan React komponenDidCatch metode siklus hidup atau kait batas kesalahan dalam komponen berbasis fungsi. Menangani kesalahan backend dengan menampilkan pesan informatif dengan benar kepada pengguna dapat mencegah frustrasi dan kebingungan ketika panggilan API gagal. Metode ini sangat berguna untuk mengatasi masalah seperti ID tidak valid atau produk tidak tersedia.

Selain itu, penerapan logging di frontend dan backend dapat membantu pengembang mengidentifikasi masalah yang berulang dan mengoptimalkan kinerja. Misalnya, melacak seberapa sering kesalahan tertentu terjadi selama permintaan pengambilan API dapat mengungkap bug atau inefisiensi yang mendasarinya. Memantau peristiwa ini dengan alat seperti Penjaga atau melalui layanan logging khusus memastikan Anda dapat mengatasinya dengan segera. Praktik ini secara signifikan meningkatkan keandalan dan pemeliharaan aplikasi Anda seiring waktu.