feat: 🚀 增加读取数据日志和接口重试机制

package-lock.json

@@ -14,6 +14,7 @@
         "@vueuse/core": "^9.12.0",
         "animate.css": "^4.1.1",
         "axios": "^1.3.3",
+        "axios-retry": "^3.5.1",
         "core-js": "^3.8.3",
         "lottie-web": "^5.10.2",
         "pinia": "^2.0.30",
@@ -1695,7 +1696,6 @@
       "version": "7.20.13",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.13.tgz",
       "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -5209,6 +5209,26 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/axios-retry": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.5.1.tgz",
+      "integrity": "sha512-mQRJ4IyAUnYig14BQ4MnnNHHuH1cNH7NW4JxEUD6mNJwK6pwOY66wKLCwZ6Y0o3POpfStalqRC+J4+Hnn6Om7w==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "is-retry-allowed": "^2.2.0"
+      }
+    },
+    "node_modules/axios-retry/node_modules/is-retry-allowed": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
+      "integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -15694,8 +15714,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -20692,7 +20711,6 @@
       "version": "7.20.13",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.13.tgz",
       "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -23388,6 +23406,22 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "axios-retry": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.5.1.tgz",
+      "integrity": "sha512-mQRJ4IyAUnYig14BQ4MnnNHHuH1cNH7NW4JxEUD6mNJwK6pwOY66wKLCwZ6Y0o3POpfStalqRC+J4+Hnn6Om7w==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "is-retry-allowed": "^2.2.0"
+      },
+      "dependencies": {
+        "is-retry-allowed": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
+          "integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg=="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -31194,8 +31228,7 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.1",

package.json

@@ -23,6 +23,7 @@
     "@vueuse/core": "^9.12.0",
     "animate.css": "^4.1.1",
     "axios": "^1.3.3",
+    "axios-retry": "^3.5.1",
     "core-js": "^3.8.3",
     "lottie-web": "^5.10.2",
     "pinia": "^2.0.30",

src/http/http.ts

@@ -2,6 +2,7 @@ import axios, { type AxiosResponse, AxiosInstance, InternalAxiosRequestConfig }
 import { addPrefixByRecursive } from '@/utils/utils'
 import { useRootStore } from '@/store/root'
 import type { RequestConfig, RequestInterceptors, CreateRequestConfig } from './types'
+import axiosRetry from 'axios-retry'
 
 class Request {
   // axios 实例
@@ -13,6 +14,13 @@ class Request {
 
   constructor(config: CreateRequestConfig) {
     this.instance = axios.create(config)
+    axiosRetry(this.instance, {
+      retries: 3,
+      retryDelay: retryCount => {
+        // console.log('retryCount :>> ', retryCount)
+        return 3000
+      }
+    })
     //取消请求控制器Map
     this.abortControllerMap = new Map()
     this.interceptorsObj = config.interceptors
@@ -49,6 +57,7 @@ class Request {
       this.instance
         .request<any, T>(config)
         .then(res => {
+          console.log('axios获取数据 :>> ', res)
           // 如果为单个响应设置拦截器，使用单个响应的拦截器
           if (config.interceptors?.responseInterceptors) {
             res = config.interceptors.responseInterceptors(res)
@@ -57,6 +66,7 @@ class Request {
           resolve(res)
         })
         .catch((err: any) => {
+          console.log('axios获取数据失败 :==>> ', err)
           reject(err)
         })
     })

src/views/ServiceList/ServiceList.vue

@@ -13,7 +13,7 @@
     >
       <div class="list-container" :class="{ 'no-scroll': serviceList.length <= 12 }">
         <div class="list" :style="{ width: Math.ceil(serviceList.length / 2) * 208 + 'px' }">
-          <div v-for="item in serviceList" :key="item.name" class="list-item">
+          <div v-for="(item, index) in serviceList" :key="index" class="list-item">
             <img :src="item.logoUrl" alt="" />
             <div class="text">{{ switchLanguage(item, 'name') }}</div>
             <!-- <div class="marquee-wrapper">
@@ -52,7 +52,9 @@ const { handleFacility } = useFacilityNav() //公共设施导航
 // 服务信息
 const serviceList = ref<ServiceInfo[]>([])
 getServiceList().then(({ data }) => {
-  serviceList.value = data.serveList
+  if (data.serveList) {
+    serviceList.value = data.serveList
+  }
 })
 function go() {
   const arr = facilityList.value.filter(item => item.abbreviation === 'fwt')