如何在API数据加载完成前显示‘Loading’文本？当前显示‘暂无数据’

核心思路是通过状态变量控制页面渲染逻辑，区分三种状态：加载中、加载成功有数据、加载成功无数据，替代原来直接显示“暂无数据”的逻辑。下面是不同场景的具体实现：

原生JavaScript实现 #

<div id="content"></div>

<script>
  const contentEl = document.getElementById('content');
  let isLoading = true;
  let data = null;

  // 模拟API请求
  async function fetchData() {
    try {
      // 请求开始时显示Loading
      contentEl.textContent = 'Loading';
      const response = await fetch('你的API地址');
      data = await response.json();
      isLoading = false;
      renderContent();
    } catch (error) {
      isLoading = false;
      contentEl.textContent = '加载失败，请重试';
    }
  }

  function renderContent() {
    if (isLoading) {
      contentEl.textContent = 'Loading';
      return;
    }
    if (data && data.length > 0) {
      // 渲染数据列表
      contentEl.innerHTML = data.map(item => `<p>${item.name}</p>`).join('');
    } else {
      contentEl.textContent = '暂无数据可展示';
    }
  }

  // 触发数据请求
  fetchData();
</script>

React函数组件实现（Hooks） #

import { useState, useEffect } from 'react';

function DataList() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setIsLoading(true);
        const response = await fetch('你的API地址');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        // 请求完成（成功/失败）都结束加载状态
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <div>Loading</div>;
  }

  if (error) {
    return <div>加载失败：{error}</div>;
  }

  return data.length > 0 ? (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  ) : (
    <div>暂无数据可展示</div>
  );
}

export default DataList;

Vue3组合式API实现 #

<template>
  <div>
    <div v-if="isLoading">Loading</div>
    <div v-else-if="error">加载失败：{{ error }}</div>
    <div v-else-if="data.length > 0">
      <ul>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
    <div v-else>暂无数据可展示</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isLoading = ref(true);
const data = ref([]);
const error = ref(null);

onMounted(async () => {
  try {
    const response = await fetch('你的API地址');
    const result = await response.json();
    data.value = result;
  } catch (err) {
    error.value = err.message;
  } finally {
    isLoading.value = false;
  }
});
</script>

关键注意点 #

• 必须在请求发起时设置加载状态为true，请求完成（无论成功或失败）后设置为false，避免状态异常
• 可根据需求扩展加载失败的提示逻辑，提升用户体验
• 若使用Redux、Pinia等状态管理工具，核心逻辑一致：请求发起时更新全局加载状态，请求结束后更新数据状态

内容的提问来源于stack exchange，提问作者Nilesh Belurkar