feat: implement getAllDataWithFallback function for improved data retrieval

Author: xuanzhi33

src/components/List.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { api, getStatusColor, getTagColor, getStatusIcon } from '@/utils.js';
+import { api, getStatusColor, getTagColor, getStatusIcon, getAllDataWithFallback } from '@/utils.js';
 import { ref, onMounted, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
@@ -79,7 +79,7 @@ const toast = useToast();
 const listData = ref([]);
 const getData = async () => {
   loading.value = true;
-  listData.value = await api("/all", "GET", toast);
+  listData.value = await getAllDataWithFallback(toast);
   loading.value = false;
 };
 

src/utils.js

@@ -1,9 +1,9 @@
 export const api = async (path, method = "GET", toast = null, data = null, credentials = "include") => {
     let baseUrl = "https://api.travellings.cn";
     if (import.meta.env.DEV) {
-        baseUrl = "/api"; 
+        baseUrl = "/api";
     }
-    
+
     const url = baseUrl + path;
     const body = data ? JSON.stringify(data) : null;
     const headers = {
@@ -15,18 +15,59 @@ export const api = async (path, method = "GET", toast = null, data = null, crede
         headers,
         credentials,
     });
-    const resObj =  await response.json();
+    const resObj = await response.json();
     if (!resObj.success) {
         toast.error(resObj.msg);
         return null;
     }
     if (!resObj.data) {
         return resObj.msg;
     }
-    
+
     return resObj.data;
 }
 
+export async function getAllDataWithFallback(toast) {
+    const primaryUrl = import.meta.env.DEV ? '/api/all' : 'https://api.travellings.cn/all';
+    const backupUrl = 'https://backup.api.travellings.cn/list.json';
+    const timeout = 10000;
+
+    const fetchWithTimeout = (url, timeoutMs) => {
+        return Promise.race([
+            fetch(url),
+            new Promise((_, reject) =>
+                setTimeout(() => reject(new Error('Request timeout')), timeoutMs)
+            )
+        ]);
+    };
+
+    try {
+        const response = await fetchWithTimeout(primaryUrl, timeout);
+
+        if (!response.ok) {
+            throw new Error(`HTTP Error ${response.status}: ${response.statusText}`);
+        }
+
+        return await response.json();
+    } catch (error) {
+        console.warn('Primary API failed, trying backup:', error.message);
+        toast.warning(`开往主服务器出现了故障（可能正在遭受攻击）。当前已自动使用备份的数据（可能并不是最新的）。
+The main server has malfunctioned (possibly under attack). Currently, backup data (which may not be the latest) has been automatically used instead.`);
+
+        try {
+            const backupResponse = await fetchWithTimeout(backupUrl, timeout);
+
+            if (!backupResponse.ok) {
+                throw new Error(`Backup API HTTP Error ${backupResponse.status}: ${backupResponse.statusText}`);
+            }
+
+            return await backupResponse.json();
+        } catch (backupError) {
+            console.error('Both primary and backup APIs failed');
+            throw new Error(`All APIs failed. Last error: ${backupError.message}`);
+        }
+    }
+}
 const statusIcon = {
     'LOST': 'exclamation-triangle',
     'WAIT': 'clock-o',