Vue 使用Ajax异步或同步

一、使用Axios动态加载员工列表数据

1、运行页面效果

2、单击查询显示所有的数据

3、再通过姓名，性别，职位分别查询数据

4、单击清空按钮，查询字段恢复原来状态，那就是显示所有的数据

5、JS代码片段

java 复制代码

<!-- 引入axios.js -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data() {
                return {
                    findForm: {
                        name: '',
                        gender: '',
                        position: ''
                    },
                    users: [] // 用于存储查询结果的用户数据数组
                };
            },
            methods: {
                showMessage() {
                    // 这里可以添加实际的查询逻辑
                    axios.get(`https://webserver.ma.net/emps/list?name=${this.findForm.name}&gender=${this.findForm.gender}&job=${this.findForm.position}`)
                        .then(response => {
                            this.users = response.data.data;
                        })
                        .catch(error => {
                            console.error('查询用户数据失败:', error);
                        })
                },
                  // 清空查询表单
                clearForm() {
                    this.findForm = {
                        name: '',
                        gender: '',
                        position: '',
                    }
                    this.showMessage(); // 清空后重新查询，获取所有用户数据
                }
            }
        }).mount('#app');

    </script>

说明：使用axios中提供的.then(function(){....}).catch(function(){....})，这种回调函数的写法，会使得代码的可读性和维护性变差。

解决：可以通过async、await可以让异步变为同步操作

async：声明一个异步方法，await：等待异步任务执行。

如下操作：（代码修改后就变成同步操作了，也就是从前往后一行一行执行。）

java 复制代码

methods: {
 async showMessage() {
   // 这里可以添加实际的查询逻辑
  let response= await axios.get(`https://webserver.ma.net/emps/list?name=${this.findForm.name}&gender=${this.findForm.gender}&job=${this.findForm.position}`)
  this.users = response.data.data;
                      
},

注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值

二、Vue生命周期

1、它是vue对象从创建到销毁的过程

2、它的8个阶段：

每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

生命周期阶段	钩子函数	触发时机	典型应用场景
创建阶段	beforeCreate	实例初始化后，数据观测/事件配置前	插件初始化、非响应式变量设置
	created	实例创建完成（数据观测/方法可用，DOM未生成）	异步请求数据、初始化非DOM相关操作
挂载阶段	beforeMount	模板编译完成，虚拟DOM已创建但未渲染	最后修改渲染数据（不会触发重新渲染）
	mounted	实例挂载到真实DOM后	操作真实DOM、初始化第三方库（如ECharts）
更新阶段	beforeUpdate	数据变化后，虚拟DOM重新渲染前	获取更新前的DOM状态（慎改数据）
	updated	虚拟DOM重新渲染并应用更新后	依赖新DOM的操作（如调整插件尺寸）
销毁阶段	beforeDestroy	实例销毁前（仍完整可用）	清除定时器、解绑事件、销毁全局监听
	destroyed	实例销毁后（所有绑定和子实例已移除）	释放非Vue管理的资源（如手动创建的DOM事件）

生命周期图示：

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。

一般用于页面初始化自动的ajax请求后台数据

如果想在页面加载完毕，就能列出所有员工数据，就可以在mounted钩子函数中，发送异步请求查询员工数据了。

java 复制代码

     methods: {
               async showMessage() {
                    // 这里可以添加实际的查询逻辑
                   let response= await axios.get(`https://webserver.ma.net/emps/list?name=${this.findForm.name}&gender=${this.findForm.gender}&job=${this.findForm.position}`)
                   this.users = response.data.data;
                      
                },
                  // 清空查询表单
                clearForm() {
                    this.findForm = {
                        name: '',
                        gender: '',
                        position: '',
                    }
                    this.showMessage(); // 清空后重新查询，获取所有用户数据
                }
            },
            mounted() {
                this.showMessage(); // 页面加载完成后，自动查询所有用户数据
            }

运行：