案例:
数据如下:
{success: true, code: 10000, data: {…}, message: "执行成功"}
code: 10000
data:list: Array(7)0: {_id: "608b70ecf9d99a7594662466", id: "0", label: "热榜"}1: {_id: "608b70ecf9d99a7594662467", id: "1", label: "前端"}2: {_id: "608b70ecf9d99a7594662468", id: "2", label: "JAVA"}3: {_id: "608b70ecf9d99a7594662469", id: "3", label: "PHP"}4: {_id: "608b70ecf9d99a759466246a", id: "4", label: "Python"}5: {_id: "608b70ecf9d99a759466246b", id: "5", label: "程序人生"}6: {_id: "608b70ecf9d99a759466246c", id: "6", label: "数据库"}
length: 7
nv_length: (...)
__proto__: Array(0)
__proto__: Object
message: "执行成功"
success: true
__proto__: Object
返回的数据都在res的data标签的list数组中,其他外测数据节点不需要
可以进行数据解构:
将后端返回的数据局中把data结构出来并赋值给res变量,然后从res.list就可以获取数据
这是解构出来的数据
真实场景案例:
<template><view class="hot-container"><view v-for="(item, index) in tabData" :key="index">{{ item.label }} - {{ index }}</view></view>
</template><script>
import { getHotTabs } from 'api/hot';
export default {data() {return {tabData: [],};},// 组件实例配置完成,但是DOM尚未渲染,进行网络请求,配置响应数据created() {this.loadHotTabs();},methods: {/*** 获取热搜标题数据*/async loadHotTabs() {// uniapp 支持 async awaitconst { data: res } = await getHotTabs();this.tabData = res.list;console.log('res', res);console.log('res', res.list);},},
};
</script><style lang="scss"></style>