在这里插入图片描述

案例:
在这里插入图片描述

在这里插入图片描述
数据如下:

{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 await
      const { data: res } = await getHotTabs();
      this.tabData = res.list;
      console.log('res', res);
      console.log('res', res.list);
    },
  },
};
</script>

<style lang="scss"></style>

在这里插入图片描述

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐