Next.js 应用中使用 Axios 发起 API 请求时，若未正确 await Promise，会导致状态（如 loading、错误信息、登录跳转）延迟更新，表面看请求已完成，实际业务逻辑却滞后执行。根本原因在于 axios.post() 被当作“火球式”调用而未等待其完成。
next.js 应用中使用 axios 发起 api 请求时，若未正确 `await` promise，会导致状态（如 loading、错误信息、登录跳转）延迟更新，表面看请求已完成，实际业务逻辑却滞后执行。根本原因在于 `axios.post()` 被当作“火球式”调用而未等待其完成。
在你的 login 函数中，axios.post(...).then().catch() 是典型的链式 Promise 写法，但它本身返回一个新的 Promise；而你并未 await 它，导致 login() 函数在 axios 请求发出后立即返回（即返回一个 pending 的 Promise），外层 submitForm 中的 finally { setLoading(false) } 便随之提前执行——此时请求可能尚未响应，mutate() 或错误处理逻辑也还未运行，造成“按钮停止加载，但页面无反应”的假性卡顿。
✅ 正确做法是：始终 await 所有异步操作，确保控制流严格按序执行。以下是修复后的完整代码示例：
// ✅ 修复版 login 函数：显式 await axios.post，并统一错误处理
const login = async ({
email,
password,
remember,
setErrors,
setStatus,
mutate // 建议显式传入，避免闭包依赖
}) => {
await csrf(); // 确保 CSRF Token 已刷新
setErrors([]);
setStatus(null);
try {
// ✅ 关键：await axios.post()，让 login 真正等待请求完成
await axios.post('/login', { email, password, remember });
// ✅ 请求成功后立即触发数据重验（如 SWR 的 mutate）或跳转
await mutate?.(); // 注意：mutate 本身也可能是异步函数，建议 await
// 可选：导航到首页或 dashboard
// router.push('/dashboard');
} catch (error) {
if (error.response?.status === 422) {
setErrors(error.response.data.errors);
} else {
// 非表单验证错误（如网络失败、500），可全局提示或重抛
console.error('Login failed:', error);
setStatus('无法连接服务器，请稍后重试');
throw error;
}
}
};同时，保持 submitForm 的结构清晰且健壮：
const submitForm = async (event) => {
event.preventDefault();
setLoading(true);
try {
await login({
email,
password,
remember: shouldRemember,
setErrors,
setStatus,
mutate // 显式传入，增强可测试性与可维护性
});
// ✅ 此处可安全添加成功反馈（如 toast、路由跳转）
} catch (err) {
// 兜底错误处理（例如网络中断时 login 内未捕获的异常）
} finally {
setLoading(false); // ✅ 现在真正发生在所有逻辑之后
}
};⚠️ 关键注意事项：
- 不要混用 .then().catch() 和 async/await —— 二者语义等价，但混用易引发控制流混乱；
- axios 实例默认不自动 reject 4xx/5xx 响应（仅 network error 会 reject），因此 catch 块必须检查 error.response 存在性，避免 Cannot read property 'status' of undefined；
- 若使用 SWR 的 mutate()，注意其返回 Promise，需 await 以确保视图更新同步；
- 开发中可借助浏览器 DevTools 的 Network → Timing 标签，确认请求是否真正在前端“卡住”，还是后端响应慢（本例属前者）。
总结：Next.js 中任何影响 UI 状态或业务流程的异步操作，都必须被 await 显式等待。这不是 React 或 Next.js 的限制，而是 JavaScript Promise 本质决定的——没有 await，就没有等待；没有等待，就没有确定的执行顺序。
