perf:axios新增是否请求完毕字段并修复骨架屏出现的时机

Yi.Bbs.Vue3/src/config/axios/service.js

@@ -17,6 +17,7 @@ const service = axios.create({
   timeout: request_timeout, // 请求超时时间
   headers: { "Content-Type": "application/json" },
   hideerror: false, //是否在底层显示错误信息
+  isFinish: false,
 });
 
 // 添加请求拦截器
@@ -41,9 +42,12 @@ service.interceptors.request.use(
 // 添加响应拦截器
 service.interceptors.response.use(
   (response) => {
+    const { config } = response;
+    config.isFinish = true;
     return Promise.resolve(response);
   },
   (error) => {
+    const { config } = error;
     // 对响应错误做点什么
     if (error.message.indexOf("timeout") != -1) {
       ElMessage({
@@ -86,6 +90,7 @@ service.interceptors.response.use(
         }
       }
     }
+    config.isFinish = true;
     return Promise.reject(error.response);
   }
 );

Yi.Bbs.Vue3/src/views/Discuss.vue

@@ -69,7 +69,7 @@
       </el-collapse-item>
     </el-collapse>
     <el-divider v-show="topDiscussList.length > 0" />
-    <template v-if="discussList.length > 0">
+    <template v-if="isDiscussFinished">
       <div class="div-item" v-for="i in discussList">
         <DisscussCard :discuss="i" />
       </div>
@@ -121,6 +121,7 @@ const router = useRouter();
 const activeName = ref("new");
 //主题内容
 const discussList = ref([]);
+const isDiscussFinished = ref(false);
 //置顶主题内容
 const topDiscussList = ref([]);
 const total = ref(100);
@@ -158,6 +159,7 @@ const handleReset = () => {
 //加载discuss
 const loadDiscussList = async () => {
   const response = await getList(query);
+  isDiscussFinished.value = response.config.isFinish;
   discussList.value = response.data.items;
   total.value = Number(response.data.totalCount);
 

Yi.Bbs.Vue3/src/views/home/Index.vue

@@ -22,7 +22,7 @@
               :isPublish="i.isDisableCreateDiscuss"
             />
           </el-col>
-          <template v-if="discussList.length > 0">
+          <template v-if="isDiscussFinished">
             <el-col :span="24" v-for="i in discussList">
               <DisscussCard :discuss="i" />
             </el-col>
@@ -30,7 +30,7 @@
           <template v-else>
             <Skeleton :isBorder="true" />
           </template>
-          <template v-if="allDiscussList.length > 0">
+          <template v-if="isAllDiscussFinished">
             <el-col :span="24" v-for="i in allDiscussList">
               <DisscussCard :discuss="i" />
             </el-col>
@@ -77,7 +77,7 @@
             </InfoCard>
           </el-col>
           <el-col :span="24">
-            <template v-if="pointList.length > 0">
+            <template v-if="isPointFinished">
               <InfoCard
                 :items="pointList"
                 header="本月排行"
@@ -97,7 +97,7 @@
           </el-col>
 
           <el-col :span="24">
-            <template v-if="friendList.length > 0">
+            <template v-if="isFriendFinished">
               <InfoCard
                 :items="friendList"
                 header="推荐好友"
@@ -116,7 +116,7 @@
             </template>
           </el-col>
           <el-col :span="24">
-            <template v-if="themeList.length > 0">
+            <template v-if="isThemeFinished">
               <InfoCard
                 :items="themeList"
                 header="推荐主题"
@@ -170,12 +170,17 @@ import Skeleton from "@/components/Skeleton/index.vue";
 
 const plateList = ref([]);
 const discussList = ref([]);
+const isDiscussFinished = ref(false);
 const bannerList = ref([]);
 const weekList = ref([]);
 const pointList = ref([]);
+const isPointFinished = ref(false);
 const friendList = ref([]);
+const isFriendFinished = ref(false);
 const themeList = ref([]);
+const isThemeFinished = ref([]);
 const allDiscussList = ref([]);
+const isAllDiscussFinished = ref(false);
 
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
@@ -190,23 +195,30 @@ onMounted(async () => {
   access();
   const { data: plateData } = await getList();
   plateList.value = plateData.items;
-  const { data: discussData } = await getHomeDiscuss();
+  const { data: discussData, config: discussConfig } = await getHomeDiscuss();
   discussList.value = discussData;
+  isDiscussFinished.value = discussConfig.isFinish;
   const { data: bannerData } = await bannerGetList();
   bannerList.value = bannerData.items;
   const { data: weekData } = await getWeek();
   weekList.value = weekData;
-  const { data: pointData } = await getRankingPoints();
+  const { data: pointData, config: pointConfig } = await getRankingPoints();
   pointList.value = pointData;
-  const { data: friendData } = await getRecommendedFriend();
+  isPointFinished.value = pointConfig.isFinish;
+  const { data: friendData, config: friendConfig } =
+    await getRecommendedFriend();
   friendList.value = friendData;
-  const { data: themeData } = await getRecommendedTopic();
+  isFriendFinished.value = friendConfig.isFinish;
+  const { data: themeData, config: themeConfig } = await getRecommendedTopic();
   themeList.value = themeData;
-  const { data: allDiscussData } = await getAllDiscussList({
+  isThemeFinished.value = themeConfig.isFinish;
-    Type: 0,
+  const { data: allDiscussData, config: allDiscussConfig } =
-    skipCount: 1,
+    await getAllDiscussList({
-    maxResultCount: 5,
+      Type: 0,
-  });
+      skipCount: 1,
+      maxResultCount: 5,
+    });
+  isAllDiscussFinished.value = allDiscussConfig.isFinish;
   allDiscussList.value = allDiscussData.items;
 });