前端数据解构

案例：

数据如下：

{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

返回的数据都在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>