Vuejs上的回调函数

时间:2017-03-30 19:09:45

标签: javascript callback vue.js vuejs2

我正在尝试以同步方式运行进程。但是,因为我有自动异步的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)
                })  
              }
            })
        })
      }
    })
},

1 个答案:

答案 0 :(得分: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
      });
  });
},