fix(frontend): 修复文章列表页翻页速度过快时导致的内容错乱问题

修复文章列表页翻页速度过快时导致的内容错乱问题

Author: lingview

frontend/src/Api.jsx

@@ -1,14 +1,19 @@
 import apiClient from './utils/axios';
 
 // 获取文章列表
-export const fetchArticles = async (page = 1, size = 10, category = null) => {
+export const fetchArticles = async (page = 1, size = 10, category = null, signal = null) => {
     try {
         const params = { page, size };
         if (category) {
             params.category = category;
         }
 
-        const response = await apiClient.get('/articles', { params });
+        const config = { params };
+        if (signal) {
+            config.signal = signal;
+        }
+
+        const response = await apiClient.get('/articles', config);
         return response;
     } catch (error) {
         console.error('获取文章列表失败:', error);

frontend/src/components/ArticleList.jsx

@@ -24,6 +24,7 @@ export default function ArticleList() {
 
     const gridRef = useRef(null);
     const [holdHeight, setHoldHeight] = useState(null);
+    const abortControllerRef = useRef(null);
 
     useEffect(() => {
         const checkMobile = () => setForceMobile(window.innerWidth < 768);
@@ -40,13 +41,24 @@ export default function ArticleList() {
 
     useEffect(() => {
         loadArticlesFromUrl();
+        return () => {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+        };
     }, [location.search, location.pathname, pageParam, tagName]);
 
     useEffect(() => {
         localStorage.setItem('showImages', JSON.stringify(showImages));
     }, [showImages]);
 
     const loadArticlesFromUrl = async () => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+
         try {
             if (gridRef.current) {
                 setHoldHeight(gridRef.current.offsetHeight);
@@ -55,21 +67,30 @@ export default function ArticleList() {
             let result;
 
             if (categoryName) {
-                result = await apiClient.get(`/categories/articles?category=${encodeURIComponent(categoryName)}&page=${pageParam}&size=6`);
+                result = await apiClient.get(`/categories/articles?category=${encodeURIComponent(categoryName)}&page=${pageParam}&size=6`, { signal: abortController.signal });
             } else if (tagName) {
-                result = await apiClient.get(`/tags/${tagName}/articles?page=${pageParam}&size=6`);
+                result = await apiClient.get(`/tags/${tagName}/articles?page=${pageParam}&size=6`, { signal: abortController.signal });
             } else {
-                result = await fetchArticles(pageParam, 6);
+                result = await fetchArticles(pageParam, 6, null, abortController.signal);
             }
 
-            setArticles(Array.isArray(result.data) ? result.data : []);
-            setTotalPages(result.total_pages || 1);
+            if (!abortController.signal.aborted) {
+                setArticles(Array.isArray(result.data) ? result.data : []);
+                setTotalPages(result.total_pages || 1);
+            }
         } catch (error) {
+            if (error.name === 'AbortError' || error.code === 'ERR_CANCELED') {
+                return;
+            }
             console.error('加载文章失败:', error);
-            setArticles([]);
-            setTotalPages(1);
+            if (!abortController.signal.aborted) {
+                setArticles([]);
+                setTotalPages(1);
+            }
         } finally {
-            setLoading(false);
+            if (!abortController.signal.aborted) {
+                setLoading(false);
+            }
         }
     };
 

frontend/src/utils/axios.jsx

@@ -23,6 +23,10 @@ apiClient.interceptors.response.use(
     return response.data;
   },
   (error) => {
+    if (error.code === 'ERR_CANCELED' || error.name === 'CanceledError') {
+      return Promise.reject(error);
+    }
+
     const silent = error.config?.silent === true;
     if (error.response?.status === 429) {
       const message = error.response.data?.message || '请求过于频繁，请稍后再试';