إدارة أخطاء Axios عند استخدام Spring Boot Backend لاسترداد بيانات API عن طريق المعرف في Vite+React

حل أخطاء إحضار واجهة برمجة التطبيقات المستندة إلى المعرف في Vite+React باستخدام Spring Boot

عند إنشاء تطبيقات ويب حديثة، يعد جلب البيانات من واجهة برمجة التطبيقات الخلفية مهمة بالغة الأهمية. في واجهة Vite+React الأمامية، يكون التكامل مع واجهة Spring Boot الخلفية سلسًا في معظم الحالات. ومع ذلك، قد تواجه مشكلات محددة عند جلب البيانات بواسطة المعرف، خاصة عند استخدام Axios.

تنشأ مشكلة شائعة عندما تفشل الطلبات التي تعمل مباشرة من خلال عناوين URL في المتصفح عند استدعائها من الواجهة الأمامية. يحدث أحد هذه الأخطاء أثناء جلب بيانات المنتج بواسطة المعرف من الواجهة الخلفية لـ Spring Boot. يمكن أن يؤدي هذا الموقف إلى حدوث أخطاء، غالبًا ما تكون مرتبطة بأنواع بيانات غير متطابقة.

سنركز في هذه المقالة على الخطأ الشائع الذي يحدث أثناء جلب المنتجات عن طريق المعرف باستخدام Axios. يظهر الخطأ عادةً كـ "400 طلب سيئ" في الواجهة الأمامية ويشير إلى فشل تحويل نوع البيانات في الواجهة الخلفية. سنستكشف سبب هذه المشكلة وحلها.

من خلال معالجة هذه المشكلة، ستكتسب فهمًا أعمق للتعامل مع تحويلات النوع بين الواجهة الأمامية والخلفية. سيؤدي هذا إلى تحسين تكامل واجهة برمجة التطبيقات (API) في تطبيقات Vite+React أثناء العمل مع واجهات Spring Boot الخلفية.

فهم تكامل Axios Fetch وSpring Boot

يستخدم رمز الواجهة الأمامية الذي قدمته رد فعل و أكسيوس لجلب بيانات المنتج من أ التمهيد الربيع الخلفية. النقطة الحرجة هي جلب البيانات عن طريق المعرف، والذي يتضمن التعامل مع المسار الديناميكي useParams في رد الفعل. ال useParams يلتقط الخطاف معرف المنتج من عنوان URL، ثم يتم تمريره بعد ذلك إلى المكون لبدء عملية الجلب. يجب تحويل هذا المعرف إلى عدد صحيح باستخدام parseInt لتجنب عدم التطابق بين الواجهة الأمامية والخلفية، تأكد من إرسال نوع البيانات الصحيح إلى الواجهة الخلفية لـ Spring Boot.

ينفذ Axios طلب GET إلى واجهة برمجة التطبيقات الخلفية باستخدام نقطة النهاية: http://localhost:8080/api/products/{id}. تم تصميم الواجهة الخلفية لتوقع قيمة عددية لمعرف المنتج. إذا لم يتم تحويل المعرف بشكل صحيح، فإن الواجهة الخلفية ستتسبب في حدوث خطأ في تحويل النوع، مما يؤدي إلى مشكلة "400 طلب غير صالح". يشير سجل أخطاء الواجهة الخلفية بوضوح إلى فشلها في تحويل قيمة السلسلة إلى عدد صحيح، ولهذا السبب من الضروري تحويل المعرف على الواجهة الأمامية قبل تقديم الطلب.

في الواجهة الخلفية لـ Spring Boot، فإن وحدة تحكم المنتج الفئة لها نقطة نهاية تم تعيينها لها /المنتجات/{المعرف}. يتم التعامل مع هذا من خلال @PathVariable التعليق التوضيحي، الذي يربط معلمة المسار بوسيطة الطريقة. يضمن ذلك استلام معرف المنتج الذي تم تمريره في عنوان URL بشكل صحيح بواسطة وحدة التحكم. تقوم وحدة التحكم بدورها باستدعاء طبقة الخدمة لاسترداد تفاصيل المنتج من قاعدة البيانات باستخدام خدمة المنتج فصل. التعامل السليم مع PathVariable ومنطق الخدمة أمر بالغ الأهمية في منع أخطاء عدم تطابق النوع.

بالنسبة للاختبار، تستخدم كل من الواجهة الأمامية والخلفية اختبار الوحدة للتحقق من أن الحل يعمل عبر بيئات مختلفة. في الواجهة الأمامية، مزاح يتم استخدامه للسخرية من طلبات Axios، مما يضمن أن المكون يعرض بيانات المنتج التي تم جلبها بشكل صحيح. وبالمثل، توظف الواجهة الخلفية MockMvc لاختبار سلوك نقطة نهاية واجهة برمجة التطبيقات، والتحقق من إرجاع بيانات المنتج الصحيحة عند تمرير معرفات صالحة. من خلال دمج الاختبارات، يمكن للمطورين التأكد من أن الكود يعمل كما هو متوقع، مما يقلل من فرص حدوث أخطاء أثناء الإنتاج.

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

جانب آخر مهم لجلب البيانات من واجهة برمجة التطبيقات الخلفية يتضمن المعالجة استجابات الخطأ برشاقة. عند التعامل مع الاستعلامات المستندة إلى المعرف في واجهة Vite+React الأمامية، فإن احتمالية قيام الخادم بإرجاع خطأ مثل 400 طلب سيء أو أن عدم تطابق النوع أمر شائع. من الضروري فهم كيفية توقع هذه الأخطاء وإدارتها في الواجهة الأمامية لضمان تجربة مستخدم سلسة. في مثالنا، تحليل معلمة الهوية يعد استخدام JavaScript بشكل صحيح خطوة أساسية، ولكن هناك أيضًا اعتبارات إضافية للتعامل مع الاستثناءات عالميًا.

في التطبيقات الأكثر تعقيدًا، يتم الإعداد حدود الخطأ في React يمكن أن يساعد في التقاط هذه الأنواع من الأخطاء دون تعطل التطبيق بأكمله. يتضمن ذلك استخدام React's componDidCatch طريقة دورة الحياة أو خطافات حدود الخطأ في المكونات القائمة على الوظيفة. يمكن أن تؤدي معالجة أخطاء الواجهة الخلفية من خلال عرض الرسائل الإعلامية بشكل صحيح للمستخدم إلى منع الإحباط والارتباك عند فشل استدعاءات واجهة برمجة التطبيقات (API). تعد هذه الطريقة مفيدة بشكل خاص في اكتشاف مشكلات مثل المعرفات غير الصالحة أو المنتجات غير المتوفرة.

علاوة على ذلك، فإن تنفيذ التسجيل على كل من الواجهة الأمامية والخلفية يمكن أن يساعد المطورين على تحديد المشكلات المتكررة وتحسين الأداء. على سبيل المثال، تتبع مدى تكرار حدوث أخطاء معينة أثناء طلبات جلب واجهة برمجة التطبيقات (API) قد يكشف عن الأخطاء أو أوجه القصور الأساسية. مراقبة هذه الأحداث باستخدام أداة مثل خفير أو من خلال خدمات التسجيل المخصصة تضمن إمكانية معالجتها على الفور. تعمل هذه الممارسة على تحسين موثوقية التطبيق الخاص بك وإمكانية صيانته بشكل كبير بمرور الوقت.