全栈瑞克和莫蒂应用增删收藏接口Fetch请求pending后失败问题排查

核心问题 #

你的/addFavorite、/deleteFavorite（还有/register）接口没有给前端返回任何响应，导致Express服务端不会主动结束请求，前端请求会一直处于pending状态，直到达到浏览器默认的2分钟超时阈值后被标记为失败。但此时数据库操作已经执行完成，所以你登出再登入后能看到收藏变更已经生效。
而/login接口你主动调用了response.send()返回了响应，所以能正常返回200状态码。

其他潜在问题 #

1. mongoose.connect的参数写错了：你给环境变量加了引号，实际应该写mongoose.connect(process.env.DATABASE_PASSWORD)，如果你的运行环境这个连接串配置正常，那这个问题暂时不影响运行，否则会触发数据库连接失败。
2. 所有数据库操作都是异步的，你没有做错误捕获，也没有等待操作完成就处理请求逻辑，如果数据库操作报错你完全无法感知。

修改三个有问题的接口，执行完数据库操作后主动返回响应，建议加上异步处理和错误捕获：

// 修复register接口
application.post('/register', async (request, response) => {
    try {
        const username = request.body.username;
        const password = request.body.password;
        const favorites = [];
        await db.collection('data').insertOne({
            username,
            password,
            favorites,
        });
        // 主动返回响应
        response.send({message: '注册成功'});
    } catch (err) {
        response.status(500).send({message: '注册失败', error: err.message});
    }
});

// 修复addFavorite接口
application.post('/addFavorite', async (request, response) => {
    try {
        const userNow = request.body.username;
        const favoritesHere = request.body.favoritesCopy;
        console.log({userNow, favoritesHere});
        await db.collection('data').updateOne(
            { username: userNow },
            { $set: { favorites: favoritesHere }},
        );
        // 主动返回响应
        response.send({message: '收藏添加成功'});
    } catch (err) {
        response.status(500).send({message: '收藏添加失败', error: err.message});
    }
});

// 修复deleteFavorite接口
application.post('/deleteFavorite', async (request, response) => {
    try {
        const userNow = request.body.username;
        const favoritesHere = request.body.theData;
        await db.collection('data').updateOne(
            { username: userNow },
            { $set: { favorites: favoritesHere }},
        );
        // 主动返回响应
        response.send({message: '收藏删除成功'});
    } catch (err) {
        response.status(500).send({message: '收藏删除失败', error: err.message});
    }
});

额外安全提示：你现在是明文存储用户密码，存在严重的安全风险，建议后续改用bcrypt等加密库对密码做哈希存储。

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