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

运行:

相关推荐
摸鱼仙人~1 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo2 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末21 分钟前
React——基础
前端·react.js·前端框架
aklry32 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9340 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子40 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982441 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug43 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo43 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html