Vue / axios / props 调用后端接口数据并渲染到页面

情景介绍

给了一个可视化大屏的代码，代码上写的是假数据。现在要调用后端接口获取数据，并将其渲染到页面上。

分析问题

给的代码是一个 vue 组件嵌套一个子组件，要把数据渲染到子组件上。

要调用后端接口，写 axios 调用接口。
接口数据要渲染到一个子组件上，父子组件传值要用到 props
子组件中需要的数据是数组，接口得到的数据是数组包含很多个对象，需要处理。

1.axios调用接口

@/utils/requests.js // 在 utils 中存放通用工具函数 request.js

import axios from axiosaxios.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() 方法