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

运行:

相关推荐
李鸿耀2 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者7 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost8 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11068 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白8 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
Thomas21438 小时前
spark pipeline 转换n个字段,如何对某个字段反向转换
大数据·ajax·spark
学习同学9 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽9 小时前
【初学】调试 MCP Server
前端·mcp
四月_h9 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate10 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端