当前位置：首页 > news >正文

Vue 使用Ajax异步或同步

news 2025/7/3 7:38:06

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

1、运行页面效果

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

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

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

5、JS代码片段

<!-- 引入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：等待异步任务执行。

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

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钩子函数中，发送异步请求查询员工数据了。

     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(); // 页面加载完成后，自动查询所有用户数据}

运行：