react-ant-design-component-table-2

介绍

这一篇我们继续介绍如何使用Ant Design的Table组件，关于前面的系列介绍，可以参考上面的目录。
// 这里插入之前的文章目录

为Table组件添加Loading效果

在实际开发中，表格数据通常是通过异步请求获取的，异步请求通常是耗时的，我们不能让用户干等，需要加上Loading以提高用户体验。Ant Design为Table组件提供了loading属性来控制数据的加载状态，我们就利用这个属性来实现Loading效果。

首先定义一个loading状态变量，用于控制表格的Loading状态。然后在获取用户数据时，将loading设置为true，请求完成后再设置为false。

export default function Users() {
  const [loading, setLoading] = useState(true);
  const [tableData, setTableData] = useState<User[]>([]);

  useEffect(() => {
    setLoading(true);
    fetchUsers().then((res) => {
      setTableData(res.data);
      setLoading(false);
    });
  }, []);

  return (
    <Table loading={loading} dataSource={tableData} columns={columns}></Table>
  );
}

此时运行程序，表格数据加载时页面会显示Loading效果，等数据加载完成后，Loading会自动消失。

但是这段代码有一个非常隐蔽的问题，你看出来了吗？如果fetchUsers产生了异常，也就是当.then没有被调用时，loading状态将一直保持为true，导致表格一直处于Loading状态。为了避免这种情况，我们需要在.catch中也将loading设置为false。

useEffect(() => {
  setLoading(true);
  fetchUsers()
    .then((res) => {
      setTableData(res.data);
      setLoading(false);
    })
    .catch((error) => {
      console.error('获取用户数据失败:', error);
      setLoading(false);
    });
}, []);

这时候，无论用户数据获取成功还是失败，表格的Loading状态都会正确更新。但是上面的代码还是不太优雅，因为我们在每个分支中都重复了setLoading(false)，这不是一个好的实践。我们可以使用finally来简化代码。

useEffect(() => {
  setLoading(true);
  fetchUsers()  
    .then((res) => {
      setTableData(res.data);
    })
    .catch((error) => {
      console.error('获取用户数据失败:', error);
    })
    .finally(() => {
      setLoading(false);
    });
}, []);

现在已经消除了重复代码，但是Promise的方式产生了很多的缩进，这就是所谓的“回调地狱”。我们再使用async/await来重构一下代码。因为要使用async/await，我们需要将useEffect中的逻辑封装成一个新的async函数 - getUsers，然后在useEffect中调用它。注意，我们不能直接在useEffect中使用await操作，如果非要那么做的话，只能将await代码封装成一个IIFE放到useEffect中，但是那样可读性非常差。

使用async/await重构后的代码如下, 是不是更清晰了呢？

const getUsers = async () => {
  try {
    setLoading(true);
    const res = await fetchUsers();
    setTableData(res.data);
  } catch (error) {
    console.error('Error fetching users:', error);
  } finally {
    setLoading(false);
  }
};

useEffect(() => {
  getUsers();
}, []);

更友好的提示

回顾上面的代码，似乎一切都很完美了，但是如果用户获取数据失败，也就是走到catch分支时，我们只是在控制台打印了错误信息，这个错误信息对我们分析程序错误很有帮助，但是对于用户来说，却没有得到任何提示，用户并不知道发生了什么，所以我们可以添加一个更友好的提示，比如使用Ant Design的message组件来告知用户发生了错误。

const getUsers = async () => {
  try {
    setLoading(true);
    const res = await fetchUsers();
    setTableData(res.data);
  } catch (error) {
    console.error('Error fetching users:', error);
    message.error('获取用户数据失败。');
  } finally {
    setLoading(false);
  }
};

好了，今天就到这里了，我们明天继续。祝大家编程愉快！