axios 异步请求操作导致的小问题

问题背景

1.从后端取到了一个 list, 里面的用户信息只是 userId,并没有用户名称,所以需要自己根据用户 id 去匹配用户名称 2.为这个 list 新增一条数据和修改这条数据的时候有对这条数据的用户信息进行操作

取用户数据

// 存放用户信息
 users: []
getUserList () {
    this.$axios.get(url).then(res => {
        this.users = res.data.data
    })
}

代码


 //取 list之前先调用获取用户列表方法
 this.getUserList()
 this.$axios.get(url).then(res => {
    //对取到的每一个数据进行用户 id 匹配
    res.data.data.forEach(item => {
    // 视图上展示的用户名称字段需要自己定义
    item.userName = ``
    item.userName = this.getUserName(item.id)
    })
 })

获取用户名称

getUserName (userId) {
    // 调用取用户数据
    this.getUserList()
    // 定义一个空值存放获取到的用户名
    let userName = ``
    //遍历用户数据
    this.users.forEach(item => {
        if (item.realName === userId) {
            userName = item.realName
        }
    })
    return userName
}

以上代码本来看着是没什么问题的,但是运行起来之后却发现,在getUserName中遍历 users的时候一直都是空的,然后在脑海中重新走一遍逻辑发现,原来是调用获取用户名称之前的获取用户列表方法可能还没执行结束,所以一直才是空的!

解决方法

修改后的代码

// 先将获取用户列表的请求 return 出来
getUserList () {
    return this.$axios.get(url)
}
// 遍历 id 获取用户名
// 等用户列表获取结束之后将用户数据保存了,再去遍历用户数据列表
this.getUserList().then(res => {
    // 遍历 list
    this.$axios.get(url).then(res => {
        //再进行用户 id 匹配
        res.data.data.forEach(item => {
            item.userName = this.getUserName(item.id)
        })
     })
})

这样每个 list 都根据自己的 userId 获取到了用户名称了,异步 ajax 是非常重要的东西,还是要加深学习,惭愧惭愧