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

运行:

相关推荐
凌览几秒前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
丘耳1 分钟前
前端渲染方式
前端
The_cute_cat2 分钟前
Ajax和Axios的初步学习
前端·学习·ajax
Zz_waiting.3 分钟前
Javaweb - 10.4 ServletConfig 和 ServletContext
java·开发语言·前端·servlet·servletconfig·servletcontext·域对象
爱学习的小学渣3 分钟前
JS用法:Map,Set和异步函数
前端·javascript
Mike_jia10 分钟前
Icinga 2:开源监控领域的全能选手——从零构建企业级智能运维体系
前端
wuxuanok12 分钟前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia12 分钟前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder21 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士22 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js