vue类别菜单

<!--      类别菜单-->
<div class="good-menu">
    <ul v-for="(item, index) in icons" :key="index">
        <li>
            <i class="iconfont" v-html="item.value"></i>
            <!--              跳转到goodList页面，参数为类别id-->
            <span v-for="(category, index2) in item.categories" :key="index2">
                <router-link :to="{ path: '/goodlist', query: { categoryId: category.id },}">
                    <a href="/person"><span> {{ category.name }}</span></a>
                </router-link>
                <span v-if="index2 != item.categories.length - 1">
                    /
                </span>
            </span>
        </li>
    </ul>
</div>

data：

//分类icon，每个icon包含id、value、categories对象数组.category：id，name
icons: []

created（）{

this.request
    .get("/api/icon")
    .then((res) => {
        if (res.code === "200") {
            this.icons = res.data;
            if (this.icons.length > 6) {
                // 截取前六个分类
                this.icons = this.icons.slice(0, 6);
            }
        }
    })
    .catch((e) => {

这段代码是一个 Promise 的 catch 方法的回调函数。在这个回调函数中，首先通console.log(e) 打印出错误对象 e，以便进行调试和查看错误信息。

然后，它使用条件语句检查错误对象的 response 属性和 response.data 属性是否为 undefined。如果其中之一或两者都是 undefined，则表示错误对象不符合预期的结构，可能是一个未知的错误类型或格式。在这种情况下，代码会调用 this.$message 方法显示一个错误提示框给用户，内容为错误对象 e 的值（即完整的错误对象）。

通过这样的处理，无论错误对象的结构如何，用户都可以看到出错信息，并且在控制台中也能够看到完整的错误对象以帮助调试。

        console.log(e);
        if (e.response == undefined || e.response.data == undefined) {
            this.$message({
                showClose: true,
                message: e, 
                type: "error",
                duration: 5000,
            });
        } else {
            this.$message({
                showClose: true,//显示关闭按钮，用户可以手动关闭提示框。
                message: e.response.data,//设置提示框的内容为 e.response.data，即从请求返回的响应数据中 获取的错误信息。 
                type: "error",//设置提示框的类型为错误类型，会使用红色的样式来表示错误。
                duration: 5000,//设置提示框的持续时间为 5000 毫秒，即 5 秒。
            });
        }
    });

}