Mengurus Ralat Axios Apabila Menggunakan Spring Boot Backend untuk Mendapatkan Data API mengikut ID dalam Vite+React

Menyelesaikan Ralat Pengambilan API berasaskan ID dalam Vite+React dengan Spring Boot

Apabila membina aplikasi web moden, mengambil data daripada API bahagian belakang adalah tugas yang kritikal. Dalam bahagian hadapan Vite+React, penyepaduan dengan bahagian belakang Spring Boot adalah lancar dalam kebanyakan kes. Walau bagaimanapun, anda mungkin menghadapi isu khusus semasa mengambil data melalui ID, terutamanya apabila menggunakan Axios.

Masalah biasa timbul apabila permintaan yang berfungsi secara langsung melalui URL dalam penyemak imbas gagal apabila dipanggil dari bahagian hadapan. Satu ralat sedemikian berlaku semasa mengambil data produk melalui ID daripada hujung belakang Spring Boot. Keadaan ini boleh menyebabkan ralat, selalunya berkaitan dengan jenis data yang tidak sepadan.

Dalam artikel ini, kami akan menumpukan pada ralat biasa yang dihadapi semasa mengambil produk melalui ID menggunakan Axios. Ralat biasanya muncul sebagai "400 Permintaan Buruk" di bahagian hadapan dan menunjukkan kepada penukaran jenis data yang gagal di bahagian belakang. Kami akan meneroka kedua-dua punca isu ini dan penyelesaiannya.

Dengan menangani masalah ini, anda akan mendapat pemahaman yang lebih mendalam tentang pengendalian penukaran jenis antara bahagian hadapan dan bahagian belakang. Ini akan meningkatkan integrasi API anda dalam aplikasi Vite+React semasa bekerja dengan hujung belakang Spring Boot.

Memahami Pengambilan Axios dan Integrasi But Spring

Kod bahagian hadapan yang saya sediakan digunakan Bertindak balas dan Axios untuk mengambil data produk daripada a Kasut Musim Bunga hujung belakang. Titik kritikal ialah mengambil data mengikut ID, yang melibatkan pengendalian laluan dinamik dengan useParams dalam React. The useParams cangkuk menangkap ID produk daripada URL, yang kemudiannya dihantar ke dalam komponen untuk mencetuskan operasi pengambilan. ID ini mesti ditukar kepada integer menggunakan parseInt untuk mengelakkan ketidakpadanan antara bahagian hadapan dan hujung belakang, memastikan jenis data yang betul dihantar ke hujung belakang Spring Boot.

Axios melaksanakan permintaan GET ke API bahagian belakang menggunakan titik akhir: http://localhost:8080/api/products/{id}. Bahagian belakang distrukturkan untuk mengharapkan nilai integer untuk ID produk. Jika ID tidak ditukar dengan betul, bahagian belakang melemparkan ralat penukaran jenis, yang membawa kepada isu "400 Permintaan Buruk". Log ralat bahagian belakang dengan jelas menyatakan bahawa ia gagal menukar nilai rentetan kepada integer, itulah sebabnya penting untuk menukar ID pada bahagian hadapan sebelum membuat permintaan.

Dalam bahagian belakang Spring Boot, bahagian belakang Pengawal Produk kelas mempunyai titik akhir dipetakan ke /products/{id}. Ini dikendalikan oleh @PathVariable anotasi, yang mengikat parameter laluan kepada hujah kaedah. Ini memastikan bahawa ID produk yang dihantar dalam URL diterima dengan betul oleh pengawal. Pengawal pula, memanggil lapisan perkhidmatan untuk mendapatkan butiran produk daripada pangkalan data menggunakan ProductService kelas. Pengendalian yang betul terhadap PathVariable dan logik perkhidmatan adalah penting dalam mencegah ralat tidak padan jenis.

Untuk ujian, kedua-dua bahagian hadapan dan bahagian belakang menggunakan ujian unit untuk mengesahkan bahawa penyelesaian itu berfungsi merentasi persekitaran yang berbeza. Di bahagian hadapan, Jest digunakan untuk mengejek permintaan Axios, memastikan komponen itu memaparkan data produk yang diambil dengan betul. Begitu juga, bahagian belakang menggunakan MockMvc untuk menguji gelagat titik akhir API, menyemak sama ada data produk yang betul dikembalikan apabila ID yang sah dihantar. Dengan menggabungkan ujian, pembangun boleh memastikan bahawa kod berfungsi seperti yang diharapkan, mengurangkan kemungkinan pepijat semasa pengeluaran.

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 Ralat Pengambilan berasaskan ID dalam Axios dan Spring Boot

Satu lagi aspek kritikal untuk mengambil data daripada API bahagian belakang melibatkan pengendalian respons ralat dengan anggun. Apabila berurusan dengan pertanyaan berasaskan ID dalam bahagian hadapan Vite+React, kemungkinan pelayan mengembalikan ralat seperti 400 Permintaan Buruk atau jenis ketidakpadanan adalah perkara biasa. Adalah penting untuk memahami cara menjangka dan mengurus ralat ini di bahagian hadapan untuk memastikan pengalaman pengguna yang lancar. Dalam contoh kami, menghuraikan Parameter ID menggunakan JavaScript dengan betul adalah langkah utama, tetapi terdapat juga pertimbangan tambahan untuk mengendalikan pengecualian secara global.

Dalam aplikasi yang lebih kompleks, sediakan sempadan kesilapan dalam React boleh membantu menangkap jenis ralat ini tanpa merosakkan keseluruhan aplikasi. Ini melibatkan penggunaan React's componentDidCatch kaedah kitar hayat atau cangkuk sempadan ralat dalam komponen berasaskan fungsi. Mengendalikan ralat bahagian belakang dengan memaparkan mesej bermaklumat dengan betul kepada pengguna boleh mengelakkan kekecewaan dan kekeliruan apabila panggilan API gagal. Kaedah ini amat berguna untuk menangkap isu seperti ID tidak sah atau produk tidak tersedia.

Selain itu, melaksanakan pengelogan pada kedua-dua bahagian hadapan dan bahagian belakang boleh membantu pembangun mengenal pasti isu berulang dan mengoptimumkan prestasi. Contohnya, menjejaki kekerapan ralat tertentu berlaku semasa permintaan pengambilan API mungkin mendedahkan pepijat atau ketidakcekapan yang mendasari. Memantau acara ini dengan alat seperti Sentry atau melalui perkhidmatan pengelogan tersuai memastikan anda boleh menanganinya dengan segera. Amalan ini meningkatkan dengan ketara kebolehpercayaan dan kebolehselenggaraan aplikasi anda dari semasa ke semasa.