Управління помилками Axios під час використання Spring Boot Backend для отримання даних API за ID у Vite+React

Вирішення помилок API Fetch на основі ID у Vite+React за допомогою Spring Boot

Під час створення сучасних веб-додатків отримання даних із серверного API є критичним завданням. У інтерфейсі Vite+React інтеграція з бекендом Spring Boot у більшості випадків безперебійна. Однак ви можете зіткнутися з певними проблемами під час отримання даних за ідентифікатором, особливо під час використання Axios.

Поширена проблема виникає, коли запити, які працюють безпосередньо через URL-адреси в браузері, зазнають помилки під час виклику з інтерфейсу. Одна така помилка виникає під час отримання даних продукту за ідентифікатором із серверної частини Spring Boot. Така ситуація може призвести до помилок, часто пов’язаних із невідповідними типами даних.

У цій статті ми зосередимося на поширеній помилці, яка виникає під час отримання продуктів за ідентифікатором за допомогою Axios. Помилка зазвичай відображається як «400 Bad Request» у інтерфейсі та вказує на невдалу перетворення типу даних у сервері. Ми дослідимо як причину цієї проблеми, так і її вирішення.

Вирішивши цю проблему, ви отримаєте глибше розуміння обробки перетворень типів між інтерфейсом і сервером. Це покращить вашу інтеграцію API у програмах Vite+React під час роботи з серверними частинами Spring Boot.

Розуміння інтеграції Axios Fetch та Spring Boot

Код інтерфейсу, який я надав, використовує Реагувати і Аксіос щоб отримати дані продукту з a Весняний черевик бекенд. Критичною точкою є отримання даних за ідентифікатором, що передбачає динамічну обробку маршруту useParams у React. The useParams hook фіксує ідентифікатор продукту з URL-адреси, який потім передається в компонент для запуску операції отримання. Цей ідентифікатор потрібно перетворити на ціле число за допомогою parseInt щоб уникнути невідповідності між інтерфейсом і серверною частиною, забезпечте надсилання правильного типу даних у серверну частину Spring Boot.

Axios виконує запит GET до серверного API, використовуючи кінцеву точку: http://localhost:8080/api/products/{id}. Сервер структурований таким чином, щоб очікувати ціле значення для ідентифікатора продукту. Якщо ідентифікатор не конвертується належним чином, серверна частина видає помилку перетворення типу, що призводить до проблеми "400 Bad Request". Журнал помилок серверної частини чітко вказує, що не вдалося перетворити рядкове значення на ціле число, тому важливо перетворити ідентифікатор на зовнішній частині перед тим, як надсилати запит.

У серверній частині Spring Boot, ProductController клас має кінцеву точку, зіставлену з /products/{id}. Цим займається @PathVariable анотація, яка прив’язує параметр шляху до аргументу методу. Це гарантує, що ідентифікатор продукту, переданий в URL-адресі, буде правильно отриманий контролером. Контролер, у свою чергу, викликає сервісний рівень, щоб отримати деталі продукту з бази даних за допомогою ProductService клас. Правильне поводження з PathVariable і логіка обслуговування має вирішальне значення для запобігання помилкам невідповідності типу.

Для тестування як інтерфейс, так і бекенд використовують модульне тестування, щоб підтвердити, що рішення працює в різних середовищах. У інтерфейсі Жарт використовується для імітації запитів 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" 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 і Spring Boot

Інший важливий аспект отримання даних із серверного API передбачає обробку відповіді на помилки витончено. Під час роботи із запитами на основі ID у інтерфейсі Vite+React, можливість повернення сервером помилки, як-от 400 Поганий запит або типове невідповідність. Важливо розуміти, як передбачати та керувати цими помилками у інтерфейсі, щоб забезпечити зручну роботу користувача. У нашому прикладі розбір Параметр ID Правильне використання JavaScript є ключовим кроком, але існують також додаткові міркування щодо глобальної обробки винятків.

У більш складних програмах налаштування межі помилки in React може допомогти виявити такі типи помилок без збою всієї програми. Це передбачає використання React componentDidCatch метод життєвого циклу або хуки меж помилок у функціональних компонентах. Обробка серверних помилок шляхом належного відображення інформативних повідомлень для користувача може запобігти розчаруванню та плутанині, коли виклики API не вдаються. Цей метод особливо корисний для виявлення таких проблем, як недійсні ідентифікатори або недоступні продукти.

Крім того, реалізація журналювання як на інтерфейсі, так і на сервері може допомогти розробникам виявити повторювані проблеми та оптимізувати продуктивність. Наприклад, відстеження того, як часто виникають певні помилки під час запитів на вибірку API, може виявити основні помилки або неефективність. Моніторинг цих подій за допомогою такого інструменту, як Сторожовий або за допомогою спеціальних служб журналювання гарантує, що ви можете оперативно їх вирішити. Ця практика значно покращує надійність і зручність обслуговування вашої програми з часом.