从零开始搭建群众权益平台（六）

本篇博客我们将继续完善处理错误，显示加载指示器，实现表单验证，处理跨域请求等。

错误处理：

在前端代码中，我们应当为所有网络请求添加错误处理逻辑。例如，如果后端返回了一个错误码，我们应当在前端捕获到这个错误，并向用户显示一个错误消息。

这里是一个简单的错误处理的例子：

async function handleSubmit(event) {
  event.preventDefault();
  try {
    const response = await axios.post('/api/login', { username, password });
    setToken(response.data.token);
  } catch (error) {
    console.error(error);
    if (error.response) {
      // 服务器返回了错误响应
      alert(`Login failed: ${error.response.data.message}`);
    } else {
      // 网络请求失败
      alert('Login failed: network error');
    }
  }
}

加载指示器：

如果一个操作需要花费一些时间来完成，例如网络请求，那么我们应该在这个操作进行期间显示一个加载指示器。

下面是如何在请求过程中显示一个加载指示器的例子：

function LoginPage() {
  const [loading, setLoading] =