Vue 使用Ajax异步或同步的方法

<!-- 引入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>

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;
},

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