Express中POST请求写入cart.json失败，localhost连接异常求助

核心问题分析 #

你的代码存在几个关键问题，导致请求挂起、无反馈甚至浏览器无法连接：

• 未执行定义的异步函数：声明了readFile异步函数但从未调用，整个读写逻辑完全没触发，请求一直处于等待状态最终超时。
• Promise错误处理缺失：Promise内部遇错时仅做页面渲染，未调用reject()，导致Promise一直处于pending状态。
• fs.writeFile回调逻辑错误：fs.writeFile的回调第二个参数并非返回数据，而是undefined，else if (data)永远不会执行，无法结束请求。
• 请求体解析中间件缺失：Express默认不解析POST请求体，必须添加中间件才能获取req.body参数。
• 模板渲染路径错误：res.render的模板名不需要加斜杠，否则会找不到模板文件。

分步修复 #

1. 添加请求体解析中间件
   在Express入口文件（如app.js）中添加以下代码，确保能解析表单提交的请求体：

const express = require('express');
const app = express();

// 解析urlencoded格式的请求体（对应表单提交）
app.use(express.urlencoded({ extended: true }));
// 若需支持JSON格式请求，可添加下面一行
// app.use(express.json());

2. 修复POST路由代码
   修正异步函数调用、Promise处理、writeFile回调逻辑等问题：

const fs = require('fs');
const { v4: uuid } = require('uuid'); // 确保uuid正确引入

app.post('/cart', async (req, res) => {
    try {
        const { branch, product_name, category, style, flavor, quantity } = req.body;

        // 验证必填参数，避免后续报错
        if (!branch || !product_name || !quantity) {
            return res.status(400).send('缺少必填参数');
        }

        const newCartItem = {
            id: uuid(),
            branch, 
            product_name,
            category,
            style,
            flavor,
            quantity: Number(quantity) // 转换为数字类型，避免存储字符串
        };

        // 读取cart.json文件
        const fileData = await new Promise((resolve, reject) => {
            fs.readFile(__dirname + "/data/cart.json", 'utf-8', (err, data) => {
                if (err) reject(err);
                else resolve(JSON.parse(data));
            });
        });

        // 根据branch添加商品到对应数组
        if (branch === 'frozen-treats') {
            fileData.frozen_treats = [...(fileData.frozen_treats || []), newCartItem];
        } else if (branch === 'merch') {
            fileData.merch = [...(fileData.merch || []), newCartItem];
        } else {
            return res.status(400).send('无效的branch参数');
        }

        // 写入文件
        await new Promise((resolve, reject) => {
            fs.writeFile(__dirname + "/data/cart.json", JSON.stringify(fileData, null, 2), 'utf-8', (err) => {
                if (err) reject(err);
                else resolve();
            });
        });

        // 请求成功响应
        res.status(200).json({ message: '商品添加成功', cart: fileData });
    } catch (err) {
        console.error('操作失败:', err);
        res.status(500).render('error', { title: "Error", err: err.message });
    }
});

3. 修正GET路由语法错误
   你提供的GET路由代码末尾缺少闭合括号，修正后：

app.get('/merch/:product_name', (req, res) => {
    // 你的业务逻辑
});

额外注意事项 #

• 确保data目录存在，且cart.json初始结构正确，示例：

{
  "frozen_treats": [],
  "merch": []
}

• 启动服务器后检查控制台是否有报错，比如文件路径错误、模块未安装（如uuid）等。
• 测试POST请求时，可使用Postman或表单的action="/cart" method="POST"提交数据。

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