关于uni.request接口渲染胡问题

Question

在学习uniapp，关于uni.request调用接口渲染的问题一直困扰着我，望有人解答
假如我的API接口数据是这样的，

{
    "code": 200,
    "msg": "ok",
    "data": [
        {
            "year": "226年",
            "description": "三国时魏文帝、诗人曹丕逝世"
        },
]
}

这样是可以正常在页面中渲染出来的。

但如果我的接口是以下这样的：

{
    "code": 200,
    "msg": "ok",
    "data": {
        "songName": "不属于海的风",
        "songAuthor": "承恒",
        "songUrl": "https://music.163.com/#/song?id=2094449615",
        "hotContent": "我是一个分享欲很强的人 我讨厌已读不回的消息 没有下文的聊天和敷衍的回答  重视是相互的 我喜欢事事有回应 如果你经常敷衍我的话 我就不想再跟你讲话了 在受到敷衍的时候 我会悄悄后退一万步 讲真的 在你无数敷衍我的瞬间 直接杀死了我的分享欲 你很忙吗 那我们不要再讲话了",
        "hotAuthor": "-随你__"
    }
}

日志能打印出来，但就是渲染不出来，这个是什么原因，我看了一个就是data[]和data{}这个括号的区别。

如果我的接口是以下这样的也不渲染页面：

{
    "code": 200,
    "msg": "success",
    "result": {
        "curpage": 1,
        "allnum": 10,
        "newslist": [
            {
                "id": "1f39dc097355845cfde30c40d5bf8c71",
                "ctime": "2024-06-29 09:00:17",
                "title": "社会主义民主法治更加健全——党的十八届三中全会以来政治体制改革成就综述",
                "description": "近年来，全国政协机构改革不断深化，组建农业和农村委员会，界别增设“环境资源界”。两次修改政协章程，适应新形势、充实新内容、作出新规范，确保协商...",
                "source": "农业新闻",
                "picUrl": "",
                "url": "http://www.chinanews.com.cn/gn/2024/06-29/10242689.shtml"
            },
            {
                "id": "ad679217eccf0873fbddf626643795df",
                "ctime": "2024-06-29 09:00:16",
                "title": "@爱买买买的人 这回咱可立功了！一组数据看我国网购发展",
                "description": "消费发展蓝皮书》显示，随着互联网技术红利不断惠及全体人民，数字消费用户群体不断打破年龄、性别、地域等因素限制，出现了90后、00后、银发族、女性群体和农村群体等数字消费新势力",
                "source": "中新女性",
                "picUrl": "",
                "url": "http://www.chinanews.com.cn/cj/2024/06-29/10242678.shtml"
            },

这里我知道接口里面包含了数量和分页，这个在写request的时候应该怎么写

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题的关键在于接口返回的数据结构不同，导致渲染页面的方式也会不同。下面我会按照不同数据结构给出解答，并提供相应的代码示例。

1. 数据结构是数组：{ "code": 200, "msg": "ok", "data": [{ "year": "226年", "description": "三国时魏文帝、诗人曹丕逝世" }] } 对于这种情况，我们可以直接在页面中使用 v-for 指令来循环渲染数据。示例代码如下：

   {{ item.year }}

   {{ item.description }}

<script></script>

1. 数据结构是对象：{ "code": 200, "msg": "ok", "data": { "songName": "不属于海的风", "songAuthor": "承恒", "songUrl": "https://music.163.com/#/song?id=2094449615", "hotContent": "我是一个分享欲很强的人...", "hotAuthor": "-随你__" } } 对于这种情况，渲染数据需要直接使用对象的属性。示例代码如下：

   {{ data.songName }}

   {{ data.songAuthor }}

   {{ data.songUrl }}

   {{ data.hotContent }}

   {{ data.hotAuthor }}

<script></script>

1. 数据结构包含数量和分页：{ "code": 200, "msg": "success", "result": { "curpage": 1, "allnum": 10, "newslist": [{ "id": "1f39dc097355845cfde30c40d5bf8c71", "ctime": "2024-06-29 09:00:17", "title": "社会主义民主法治更加健全——党的十八届三中全会以来政治体制改革成就综述", "description": "近年来，全国政协机构改革不断深化...", "source": "农业新闻", "picUrl": "", "url": "http://www.chinanews.com.cn/gn/2024/06-29/10242689.shtml" }, ... ] } } 对于这种情况，除了渲染数据外，还需要对数量和分页进行处理。示例代码如下：

   {{ item.title }}

   {{ item.description }}

   {{ item.url }}

   当前页码：{{ pageInfo.curpage }}

   总数量：{{ pageInfo.allnum }}

<script></script> 注意：以上代码示例仅供参考，请根据实际需求进行修改和适配。同时，需要替换掉代码中的 "接口地址" 字符串为实际的接口地址。