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

情景介绍

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

分析问题

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

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

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() 方法