TS 请求接口获取数据写法2

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { type Dynamic } from './homeview'
// type imagesArr = {
//   url: string
// }
//3  DynamicObjLists对象中包含一个数组imagesArr 具有一个string类型的url
// type DynamicObjLists = {
//   createdAt: string
//   deletedAt: string
//   id: number
//   text: string
//   updatedAt: string
//   images: imagesArr[]
// }
//2 DynamicObj里面包含两个属性，一个total 一个list:包含DynamicObjLists对象的数组
// type DynamicObj = {
//   total: number
//   list: DynamicObjLists[]
// }
//1 最外层 包含一个大对象 DynamicObj
// type Dynamic = {
//   code: number
//   message: string
//   result: DynamicObj
// }
let dataDynamic = ref({} as Dynamic)
async function getQQdetails() {
  const res = await axios.get<Dynamic>('https://api.apiopen.top/api/getDynamic?page=1&size=10')
  dataDynamic.value = res.data
}

getQQdetails()
</script>
<template>
  <h3>第一层数据</h3>
  <h3>
    {{ dataDynamic.code }}
  </h3>
  <h3>
    {{ dataDynamic.result }}
  </h3>
  <h3>
    {{ dataDynamic.message }}
  </h3>
  <h3>第二层数据</h3>
  <h3>
    {{ dataDynamic.result.total }}
  </h3>
  <h3>
    {{ dataDynamic.result.list }}
  </h3>

  <h3>第三层数据</h3>
  <h3>{{ dataDynamic.result.list[0] }}</h3>
  <h3>
    {{ dataDynamic.result.list[0].updatedAt }}
  </h3>
  <h3>四层数据</h3>
  <h3>{{ dataDynamic.result.list[0].images[0].url }}</h3>
</template>
<style scoped></style>

2 ts页面

export type imagesArr = {
  url: string
}
//3  DynamicObjLists对象中包含一个数组imagesArr 具有一个string类型的url
export type DynamicObjLists = {
  createdAt: string
  deletedAt: string
  id: number
  text: string
  updatedAt: string
  images: imagesArr[]
}
//2 DynamicObj里面包含两个属性，一个total 一个list:包含DynamicObjLists对象的数组
export type DynamicObj = {
  total: number
  list: DynamicObjLists[]
}
//1 最外层 包含一个大对象 DynamicObj
export type Dynamic = {
  code: number
  message: string
  result: DynamicObj
}