如何使用promise改写我的代码?-灵析社区

momo

新手,大佬轻点喷,vue2项目,搜索框用的原生,请求数据用的axios 我在项目中写了一个搜索框,目前数据的静态的,我想动态获取数据,但数据是异步请求获取的,如果我像下面直接这样赋值会获取不到值,我想使用promise改写,请问以下应当如何改写![](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/31fb3c933d38ae3571b73889876b4881.png) 代码: 欢迎进入用户管理界面 第{{index+1}}位用户的ID为:{{data.username}} 第{{index+1}}位用户的密码为:{{data.password}} 编辑 删除 import axios from "axios"; export default { data(){ return{ userData:[] } }, methods:{ changeUser(){ alert("修改我没写哦,但是可以删除") }, deleteUser(index){ const flag = this.areYouSureDelete() if(flag){ this.userData.splice(index, 1) const deleteUser = this.userData axios.get("http://192.168.198.1/admin/deleteUser",{ params:{ deleteUser:deleteUser } }).then(res=>{},error=>{console.log("请求失败", error)}) } }, areYouSureDelete(){ return confirm("确定删除吗!"); }, //传入this.userData返回此数据用的所有username initUserData(data){ if(!(data instanceof Array)){ return } let newData = [] for (let i = 0; i { this.userData = res.data.data // console.log("请求成功", this.userData[0].password) },error=>{ console.log("请求失败", error) }) let arr = ["user","userNo1","userNo25","userNo99","userNo123","userNo1","abcd","asgh","asdasd","fsaas","ssda","admin","userZhangSan"]; // let arr = this.userData // console.log(arr) let search = document.getElementsByClassName("blue-input")[0]; let selectedId = document.getElementById("selectedId") function showList(){ let res = searchByIndexOf(search.value,arr); console.log(res) for(let i=0;i=0){ arr.push(list[i]); } } return arr; } } } } h1{ font-size: 28px; text-align: center; padding-top: 40px; } ul{ padding: 60px 0 0 30%; } ul li { padding-bottom: 12px; } #container { width: 800px; height: 150px; margin: 0 auto 150px; padding-top: 30px; box-sizing: border-box; } /*搜索栏*/ .sea-container { width: 450px; height: 30px; background-color: green; margin: 50px auto 150px; border: 1px solid #317EF3; /*padding-bottom: 150px;*/ } .blue-input { float: left; width: 350px; height: 30px; padding: 0 10px; box-sizing: border-box; } .blue-button { width: 100px; height: 30px; background-color: #317EF3; color: white; font-size: 15px; } /* 搜索下拉框*/ ul#drop { list-style: none; margin: 0; padding: 0; } ul#drop li { margin: 0; padding: 10px; } ul#drop li:hover { background-color: darkgrey; width:200px; } p#selectedId { display: inline-block; } 后台的json数据 {"admin":[{"username":"admin","password":"123456"}], "users": [ { "username": "user", "password": "123456" }, { "username": "userNo1", "password": "123456" }, { "username": "userNo99", "password": "123456" }, { "username": "userZhangSan", "password": "123456" }, { "username": "userLisi", "password": "123456" }, { "username": "AASD", "password": "SSDA" } ]}

阅读量:20

点赞量:0

问AI
2023 年了,用 "async/await" 吧,在异步操作前加一个 "await",再把自己的函数前加一个 "async",剩下的就跟写同步函数差不多。 async mounted() { // 这里最好加一个错误处理,网络请求很容易出错 const data = await axios.get('....'); this.userData = data; // 后面也不要再手动操作 dom 了,直接写成模版吧 }