如何修复数据库添加数据后无响应导致前端卡在加载状态的问题-js教程-PHP中文网

如何修复数据库添加数据后无响应导致前端卡在加载状态的问题

前端调用 axios.post 后未收到服务端响应，导致 await 无限等待、控制台无日志输出、表单无法重置——根本原因是 Express 路由缺少成功时的显式 res.json() 响应。

前端调用 `axios.post` 后未收到服务端响应，导致 `await` 无限等待、控制台无日志输出、表单无法重置——根本原因是 express 路由缺少成功时的显式 `res.json()` 响应。

在你当前的 Express 路由中，当 Exam.findByIdAndUpdate 成功执行并返回更新后的考试文档时，代码没有发送任何 HTTP 响应。这会导致客户端（Vue + axios）一直处于挂起状态，await axios.post(...) 永远不会 resolve，后续的 console.log、表单重置、store.getExams() 等逻辑全部被阻塞。

✅ 正确的服务端实现（关键修复）

你需要确保所有分支都明确返回响应。以下是修正后的路由代码：

router.post("/:id/questions", async (req, res) => {
  const { id } = req.params;
  const { questionText, questionType, options, answerIndex } = req.body;

  try {
    const updatedExam = await Exam.findByIdAndUpdate(
      id,
      {
        $push: {
          questions: {
            questionText,
            questionType,
            options,
            answerIndex,
          },
        },
      },
      { new: true, runValidators: true } // 推荐启用验证
    );

    if (!updatedExam) {
      return res.status(404).json({
        success: false,
        error: "Exam not found",
      });
    }

    // ✅ 必须返回响应！否则前端会一直等待
    return res.status(201).json({
      success: true,
      message: "Question added successfully",
      data: updatedExam, // 可选：返回更新后的完整文档，便于前端同步状态
    });

  } catch (error) {
    console.error("Failed to add question:", error);
    return res.status(500).json({
      success: false,
      error: "Server error",
      details: process.env.NODE_ENV === "development" ? error.message : undefined,
    });
  }
});

? 为什么是 201 Created？
因为这是创建子资源（question）的标准 HTTP 状态码，语义更准确；200 OK 也可用，但 201 更符合 REST 规范。

✅ 前端 Axios 调用优化建议

你的 Vue 组件中存在一个潜在变量名不一致问题，需同步修正：

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

// ❌ 错误：解构时用了 'options' 和 'cevapI'，但 newQuestion 中定义的是 'option' 和 'answerIndex'
const { questionText, questionType, options, cevapI } = newQuestion;

// ✅ 正确：保持字段名一致（注意：newQuestion.option 是 ref([])，所以取 .value）
const payload = {
  questionText: newQuestion.questionText.value,
  questionType: newQuestion.questionType.value,
  options: newQuestion.option.value,        // ← 修正：原为 option（非 options）
  answerIndex: newQuestion.answerIndex.value,
};

并在 addQuestion 函数中使用该 payload：

const { data } = await axios.post(
  `http://localhost:3000/exams/${id}/questions`,
  payload // ✅ 使用修正后的 payload
);

⚠️ 其他注意事项

避免重复声明 ref 在对象内：newQuestion 中将 ref() 直接赋值给属性（如 questionText: ref("")）虽可运行，但不符合 Composition API 最佳实践。推荐改为：

const newQuestion = {
  questionText: ref(""),
  questionType: ref(""),
  option: ref([]),         // 注意：此处是 option（单数），与后端字段 options（复数）对应
  answerIndex: ref(0),
};

错误处理增强：前端 catch 块中已设置 store.error = true，建议在 UI 层增加错误提示 Toast 或 banner，并提供手动关闭机制。
加载态兜底：为防极端网络异常，可在 axios 请求中添加超时：
```
axios.post(url, payload, { timeout: 10000 }) // 10秒超时
```

✅ 总结

问题根源	解决方案
Express 路由成功路径无响应	✅ 所有分支必须调用 `res.status().json()`
前端解构字段名与实际属性不一致	✅ 统一使用 `option.value` 而非 `options.value`
缺少请求超时与响应结构标准化	✅ 添加 `timeout`，服务端统一返回 `{ success, message, data? }` 格式