面试题：Vue中Axios网络请求基础实践

Question

在Vue项目中，已安装Axios，如何使用Axios发送一个GET请求获取数据，并将数据展示在页面上？请写出关键代码片段，同时说明在哪个生命周期钩子函数中发起请求比较合适及原因。

Answer 1

关键代码片段

1. 在Vue组件中引入Axios：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dataList: []
    };
  },
  methods: {
    fetchData() {
      axios.get('your-api-url')
      .then(response => {
          this.dataList = response.data;
        })
      .catch(error => {
          console.error('Error fetching data: ', error);
        });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

2. 在模板中展示数据：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

合适的生命周期钩子函数及原因

1. 合适的生命周期钩子函数：mounted。
2. 原因：mounted钩子函数在组件挂载到DOM后被调用，此时组件的模板已经被渲染到页面上。在这个钩子函数中发起Axios请求获取数据，可以确保数据获取后能及时更新到已经渲染好的页面上，避免因过早请求数据而导致数据更新时DOM还未准备好的问题。同时，相比于created钩子函数，mounted钩子函数可以操作DOM，若获取的数据展示需要一些DOM相关操作（如初始化图表库等），在mounted中发起请求更为合适。