43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验

1. 显示加载状态

在接口请求数据的过程中,显示一个加载状态提示,让用户知道页面正在加载数据。

示例代码

vue

复制代码
<template>
  <div>
    <!-- 显示加载状态 -->
    <div v-if="isLoading">
      <p>正在加载数据,请稍候...</p>
    </div>
    <!-- 数据加载完成后显示动态组件 -->
    <component v-else :is="currentComponent" :data="componentData"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      currentComponent: null,
      componentData: null
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        // 模拟接口请求
        const response = await this.$axios.get('/api/data');
        const { componentName, data } = response.data;
        this.currentComponent = componentName;
        this.componentData = data;
      } catch (error) {
        console.error('数据请求失败:', error);
      } finally {
        this.isLoading = false;
      }
    }
  }
};
</script>

2. 预加载组件

在页面加载之前,提前加载一些常用的组件,减少组件加载的时间。

示例代码

javascript

复制代码
// main.js
import Vue from 'vue';
import App from './App.vue';
// 预加载组件
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

Vue.component('ComponentA', ComponentA);
Vue.component('ComponentB', ComponentB);

new Vue({
  render: h => h(App)
}).$mount('#app');

3. 骨架屏

骨架屏是一种在数据加载过程中显示的占位布局,它模拟了页面的基本结构,让用户对页面内容有一个初步的了解。

示例代码

vue

复制代码
<template>
  <div>
    <!-- 骨架屏 -->
    <div v-if="isLoading" class="skeleton-screen">
      <!-- 这里可以根据页面结构设计骨架屏样式 -->
      <div class="skeleton-item"></div>
      <div class="skeleton-item"></div>
    </div>
    <!-- 数据加载完成后显示动态组件 -->
    <component v-else :is="currentComponent" :data="componentData"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      currentComponent: null,
      componentData: null
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        // 模拟接口请求
        const response = await this.$axios.get('/api/data');
        const { componentName, data } = response.data;
        this.currentComponent = componentName;
        this.componentData = data;
      } catch (error) {
        console.error('数据请求失败:', error);
      } finally {
        this.isLoading = false;
      }
    }
  }
};
</script>

<style scoped>
.skeleton-screen {
  display: flex;
  flex-direction: column;
}

.skeleton-item {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  margin-bottom: 10px;
  border-radius: 4px;
}
</style>

4. 缓存数据

如果接口数据在短时间内不会发生变化,可以将数据缓存起来,下次进入页面时直接使用缓存数据,减少接口请求时间。

示例代码

javascript

复制代码
// 缓存数据
const cache = {};

export default {
  data() {
    return {
      isLoading: true,
      currentComponent: null,
      componentData: null
    };
  },
  mounted() {
    const cachedData = cache['api/data'];
    if (cachedData) {
      const { componentName, data } = cachedData;
      this.currentComponent = componentName;
      this.componentData = data;
      this.isLoading = false;
    } else {
      this.fetchData();
    }
  },
  methods: {
    async fetchData() {
      try {
        // 模拟接口请求
        const response = await this.$axios.get('/api/data');
        const { componentName, data } = response.data;
        this.currentComponent = componentName;
        this.componentData = data;
        // 缓存数据
        cache['api/data'] = { componentName, data };
      } catch (error) {
        console.error('数据请求失败:', error);
      } finally {
        this.isLoading = false;
      }
    }
  }
};

通过以上方法,可以有效改善页面初始加载时的空白问题,提升用户体验。你可以根据实际需求选择合适的方法。

相关推荐
前端大白话2 分钟前
React 必知!useLayoutEffect Hook 与 useEffect 的终极对决,DOM 操作和动画的秘密武器
前端·javascript·react.js
海底火旺2 分钟前
JavaScript 原型探秘:深入理解 .constructor 属性
前端·javascript·深度学习
前端大白话3 分钟前
Vue中provide/inject与Vuex数据共享大比拼:一文教你选对方案
前端·javascript·vue.js
海底火旺3 分钟前
"神奇!不用除法,如何算出数组中每个元素'邻居'的乘积?"
前端·javascript·面试
fury_1236 分钟前
删除elementplus的li标签中的一个class属性?
前端·javascript·vue.js
前端Hardy15 分钟前
第8课:JavaScript实战-简易计算器——入门阶段成果验收
前端·javascript
前端Hardy16 分钟前
第7课:JavaScript事件处理——JS的“感官系统”
前端·javascript
独立开阀者_FwtCoder18 分钟前
Trae + 设计 MCP :实现 UI 到网页自动化
前端·javascript·人工智能
拖孩24 分钟前
【Nova UI】十二、打造组件库之按钮组件(上):迈向功能构建的关键一步
前端·javascript·vue.js
独立开阀者_FwtCoder26 分钟前
用 pnpm + workspace + changesets 打造monorepo工程,【前端er必看!】
前端·javascript·面试