Vue.js端接口返回undefined，无法获取对应分类食谱的问题排查

定位到的问题点 #

• • 前后端接口路径完全不匹配*
    你Node端定义的食谱查询接口是/recette_light，但Vue里实际请求的是http://localhost:3000/recette/rec_recette/:1，既没有命中后端定义的路由路径，也和你自己写的接口名完全不一致，自然拿不到预期响应。
    另外GET请求路径里的:1是路由占位符的写法，直接写在axios请求URL里会被当成字面字符串发送，如果你要传分类id为1，要么用query参数拼接，要么按照后端的参数格式正确传值。如果你的后端路由是挂载在/recette前缀下的，请求路径要对应改为http://localhost:3000/recette/recette_light/1。
• • Node端GET接口取参方式错误*
    你在GET接口里用req.body.id取分类id，但GET请求默认没有请求体，参数应该用req.params.id（对应路径参数写法）或者req.query.id（对应?xxx=1的query写法）。哪怕你之前用工具测试后端能跑通，实际前端GET请求根本不会带这个参数，会导致查询条件失效。
• • Vue端响应取值逻辑错误*
  1. 你data里只定义了recette和user两个字段，代码里直接给this.cat_recette.recette赋值，cat_recette根本没有在data里初始化，直接赋值要么触发报错，要么赋值到非响应式对象上，视图无法更新也拿不到预期值。
  2. 后端接口返回的结构是{ cat_recette: 具体数据 }，你要取嵌套在cat_recette下的食谱数据，应该从res.data.cat_recette里拿，不是直接取res.data.recette。
  3. 未做响应合法性判断，如果后端返回的是无数据的字符串或者错误信息，直接取嵌套字段会触发undefined报错。

修正后的代码示例 #

Node端接口代码 #

// 定义带路径参数的GET路由，方便直接传分类id
router.get("/recette_light/:id", (req, res) => {
    // 从路径参数里取分类id
    const catId = req.params.id
    db.cat_recette
        .findOne({
            where: { id: catId },
            include: { all: true },
        })
        .then((cat_recette) => {
            if (cat_recette) {
                res.status(200).json({
                    cat_recette: cat_recette,
                });
            } else {
                res.json("il n'y a pas de cat_recettes");
            }
        })
        .catch(err => {
            res.json(err);
        });
});

Vue端请求代码 #

created: function() {
    // 路径和后端对齐，直接传分类id为1
    this.axios
        .get("http://localhost:3000/recette/recette_light/1")
        .then((res) => {
            // 先判断返回的分类数据是否存在，避免取值报错
            if (res.data.cat_recette) {
                // 按照后端返回的结构取对应的食谱字段
                this.recette = res.data.cat_recette.recette
            }
            // 嵌套请求用户接口，返回Promise方便统一处理
            return this.axios
                .get(
                    "http://localhost:3000/user/rec_user/" +
                    localStorage.getItem("email")
                )
        })
        .then((userRes) => {
            this.user = userRes.data.user
        })
        .catch(err => {
            console.error('请求异常：', err)
        })
}

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