在第一次调用时获取未定义的结果[重复]

Posted 2023-02-23

【中文标题】在第一次调用时获取未定义的结果[重复]

【英文标题】：Fetch results undefined on first call [duplicate]

【发布时间】：2021-05-23 21:59:18

【问题描述】：

我有以下 Vue 方法。单击编辑按钮时，会调用onEditUserPermissions。该函数还获取this.fetchUserPermissions。请求确实完成了，并且收到了响应。

methods:
  onEditUserPermissions(item)
    this.userCheckbox = true
    let user = item.id
    this.selectedUser = item.id;
    
    this.fetchUserPermissions(user)
    for (let x of this.assignedUserPermissions)
      console.log('assigned',x.id)
      this.selectedUserItems.push(x.id)
    
    
    this.editedIndex =  'users'
    this.dialog = true
  ,
  fetchUserPermissions(user)
    this.$axios.get('/permissions/assigned/user/'+user)
    .then(res => 
      this.assignedUserPermissions = res.data
    )
  ,

当我第一次单击时，for of 循环不起作用，它不会迭代，但是，当再次单击时，它会起作用。我可能离项目太近了，但谁能告诉我为什么？

【问题讨论】：

请分享更多细节 - 您是否确保在迭代该数组之前完成对后端的请求？

@NicoHaase 好的，我编辑了我的问题，但是是的，请求完成并收到了响应。

我的问题是：您如何确保请求在 迭代该数组之前完成？ axios是基于promise的客户端，所以fetchUserPermissions方法不会等待响应

How do I return the response from an asynchronous call? 和 Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

【参考方案1】：

在尝试访问数据之前，您需要等待 http 承诺解决。它第二次起作用，因为它使用了第一次提取的结果。

首先，你需要从fetchUserPermissions返回promise，然后你需要在onEditUserPermissions等待那个promise：

methods: 
  async onEditUserPermissions(item)         // `async` keyword
    this.userCheckbox = true
    let user = item.id
    this.selectedUser = item.id;
    
    await this.fetchUserPermissions(user);   // awaiting the promise

    for (let x of this.assignedUserPermissions)
      console.log('assigned',x.id)
      this.selectedUserItems.push(x.id)
    
    
    this.editedIndex = 'users';
    this.dialog = true    
  

  fetchUserPermissions(user)
    return this.$axios.get('/permissions/assigned/user/'+user)  // return the promise
    .then(res => 
      this.assignedUserPermissions = res.data
    )
  ,