Vuejs 的回调函数

Question

我正在尝试让一个进程以同步方式运行。但是，由于我有自然异步的 ajax 调用，所以我遇到了问题，因为我的数组仅在调用后才填充。为了解决这个问题，我正在尝试做一个回调函数。但我没有成功。

这是我的代码：

（点击动作调用此函数）：

VmUser.executa(user,this.addTodos)

调用的函数：

executa(user, callback) {       
  this.montaTodos(user, { complete: callback })
},

addTodos() {
  const VmUser = this           
  VmUser.details = VmUser.todos.map(user => {
    VmUser.$bus.$emit('add-user', { user: user })
  })
},

montaTodos(user) {
  const VmUser = this 
  axios
    .get(`api/gethierarquia/${user.cod_usuario}`)
    .then(res => {
      if (res.data.usuarios.length !== 0){
        //VmUser.$bus.$emit('add-user', { user: user})
        VmUser.todos.push(user)
        VmUser.supervisores = res.data.usuarios
        VmUser.details = VmUser.supervisores.map(user => {
          VmUser.todos.push(user)
          axios
            .get(`api/gethierarquia/${user.cod_usuario}`)
            .then(res => {
              if (res.data.usuarios.length !== 0){
                VmUser.funcionarios = res.data.usuarios
                VmUser.details = VmUser.funcionarios.map(user => {
                  VmUser.todos.push(user)
                })  
              }
            })
        })
      }
    })
},

Answer 1

可以使用Promise等待异步请求完成调用

addTodos

方法。

我不确定你为什么要向

api/gethierarquia

提出两个请求。但是，我认为在您的情况下它看起来像这样：

executa(user, callback) {       
  this.montaTodos(user).then((response) => {
    this.addTodos; // gets here when the promise is resolved
  }, (error) => {
    console.error(error); // gets here when the promise is rejected
  });
},

montaTodos(user) {
  return new Promise((resolve, reject) => {
    axios
      .get(`api/gethierarquia/${user.cod_usuario}`)
      .then((response) => {
        // logic to handle response

        resolve(response); // the request was successfull
      })
      .catch((error) => {
        reject(error); // the request failed
      });
  });
},

Answer 2

我用我的例子给你解释，我觉得这很容易理解。假设你有一个像下面这样的函数

const initKeys = (callback) => {
    const keys = useMagicKeys()
    const ctrlS = keys['Ctrl+S'] // save

    watch(ctrlS, (v) => {
      if(v){
        callback('click!')
      }
    })
}

然后可以在另一个函数中调用这个方法，尝试监听手表。我在这种情况下使用 vue3

setup(props) {
// magic keys
    initKeys((k) => {
      console.log('pass ->', k);
    })
}

现在你有一个来自函数

initKeys

的简单回调。每当

ctrls

进行更改时，它都会触发组件初始化的回调函数。