情景介绍
给了一个可视化大屏的代码，代码上写的是假数据。现在要调用后端接口获取数据，并将其渲染到页面上。
分析问题
给的代码是一个 vue 组件嵌套一个子组件，要把数据渲染到子组件上。
- 要调用后端接口，写 axios 调用接口。
- 接口数据要渲染到一个子组件上，父子组件传值要用到 props
- 子组件中需要的数据是数组，接口得到的数据是数组包含很多个对象，需要处理。
1.axios调用接口
@/utils/requests.js // 在 utils 中存放通用工具函数 request.js
import axios from axios
axios.defaults.baseURL = 'http://www.test.com';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.timeout = 30000;
...
export default {
get(url,params) {
return axios({
method: 'get',
url,
params
}).then(response => {
return response.data;
})
}
}
@/api/page/test.js // 写业务场景下调用接口函数
import http from '@/utils/request';
export const getList = () => {
return http.get('/api/List');
}
@/views/father.vue // 在父组件页面调用接口获取数据
<template>
<div>
<!-- data是Son组件的props自定义属性 -->
<Son :data="list"></Son>
</div>
</template>
<script>
import Son from '@/components/Son';
import { getList } from '@/api/page/test';
export default {
data () {
return {
list:[], // 存储获取到的数据
}
},
components: {
Son
},
mounted: {
getListData()
},
methods: {
getListData() {
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
getList().then(res => {
this.list = res.data;
})
}
}
}
</script>
2.props组件间数据共享
@/components/Son.vue // 子组件里写props获取父组件里的数据
<script>
export defalut {
props: {
// 子组件中用于接收父组件数据的自定义属性
data: {
type: Array,
default: () => [
['1234','zhangsan','2022-10-12','content'],
// ...
['1234','zhangsan','2022-10-12','content']
]
}
}
}
</script>
3.处理数据
可以发现子组件中需要的数据格式是
[
[...],
[...]
]
而现在获取到的数据格式是
[
{...},
{...}
]
我的思路是循环拿出数据中的每一个 Object，然后将 Object 转成数组。修改 father.vue里的
<script>
export default {
data () {
return {
list:[], // 存储获取到的数据
}
},
//...
methods: {
getListData: {
// 这里的res是接口返回的所有内容
getList().then(res => {
for(let i in res.data) {
let arr = Object.values(res.data[i]);
this.list.push(arr);
}
})
}
}
}
</script>
优化
处理数据这边我只思考了如何把 Object 转成数组，放到 list[] 里传给子组件。但是这样做对接口数据的处理还是比较粗糙的，如果子组件只想拿部分接口数据就有问题了。
请教前辈的代码写法：
<script>
export default {
data () {
return {
list:[], // 存储获取到的数据
}
},
//...
methods: {
getListData: {
// 这里的res是接口返回的所有内容
getList().then(res => {
if(res.data && res.data.length > 0) {
res.data.forEach(item => {
this.list.push([item.Number, item.Name, item.Date, item.Content]);
});
}
});
}
}
}
</script>
解读
forEach() 可以调用数组每个元素，并将元素传递给回调函数。
注意：forEach() 对于空数组是不会执行回调函数的。
现在不是拿到数组包对象形式的数据吗，用 forEach() 调用数组中每一个 Object ，然后 Object 传递给回调函数参数 item，通过 item 拿到指定的数据放到数组中，最后将数组 push 进 list[] 。
总结
其实 forEach() 思想也是循环，但是关键点在调用到每个 Object 后，用
Object.
的形式拿到对象里指定的数据这一步我没考虑到，而且 forEach() 的写法简洁美观。
这次尝试学习到的3点：
- axios 请求接口数据
- props 组件间数据共享
- forEach() 方法