如何使用promise改写我的代码?

作者站长头像
站长
· 阅读数 7

新手,大佬轻点喷,vue2项目,搜索框用的原生,请求数据用的axios我在项目中写了一个搜索框,目前数据的静态的,我想动态获取数据,但数据是异步请求获取的,如果我像下面直接这样赋值会获取不到值,我想使用promise改写,请问以下应当如何改写如何使用promise改写我的代码?

代码:

<template>
  <div class="serUser">
<!--    将用户数据动态渲染出来-->
    <h1>欢迎进入用户管理界面</h1>
<!--  搜索框  -->
    <div id="container">
      <div class="sea-container">
        <form action="">
          <input type="text" name="search" class="blue-input" >
          <input type="submit" value="搜索" class="blue-button">
        </form>
        <p id="selectedId"></p>
      </div>
    </div>
<!--    -->
    <ul v-for="(data,index) of userData" :key="index">
      <li>第{{index+1}}位用户的ID为:{{data.username}}</li>
      <li>第{{index+1}}位用户的密码为:{{data.password}}</li>
      <li>
        <button @click="changeUser()">编辑</button>
        <button @click="deleteUser(index)">删除</button>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
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 < data.length; i++) {
        newData.push(data[i].username)
      }
      return newData
    }
  },
  mounted() {
    axios.get("http://192.168.198.1/admin/userShow")
      .then(res=>{
        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<res.length;i++){
        let li = document.createElement("li");
        li.innerHTML = res[i];
        document.getElementById("drop").appendChild(li);
      }
    }
    search.oninput = function getMoreContents() {
      // 添加删除ul
      let drop = document.getElementById("drop");
      selectedId.removeChild(drop);
      let originalUl = document.createElement("ul");
      originalUl.id = "drop";
      selectedId.appendChild(originalUl);
      showList();
    }
    search.onfocus = function(){
      let originalUl = document.createElement("ul");
      originalUl.id = "drop";
      selectedId.appendChild(originalUl);
      showList();
    }
    search.onblur = function(){
      let drop = document.getElementById("drop");
      selectedId.removeChild(drop);
    }

//模糊查询
    function searchByIndexOf(keyWord, list){
      if(!(list instanceof Array)){
        return ;
      }
      if(keyWord == ""){
        return [];
      }else{
        let len = list.length;
        let arr = [];
        for(let i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(list[i].indexOf(keyWord)>=0){
            arr.push(list[i]);
          }
        }
        return arr;
      }

    }
  }
}
</script>
<style  scoped>
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;
}
</style>

后台的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"
    }
  ]}
回复
1个回答
avatar
test
2024-06-26

2023 年了,用 async/await 吧,在异步操作前加一个 await,再把自己的函数前加一个 async,剩下的就跟写同步函数差不多。

async mounted() {
  // 这里最好加一个错误处理,网络请求很容易出错
  const data = await axios.get('....');
  this.userData = data;

  // 后面也不要再手动操作 dom 了,直接写成模版吧
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容