js回调机制：内部调用外部的异步，如何改成内部的同步

描述现象

• 在vue文件调用方法，方法中传入callback参数（方法执行结束会调用这个callback方法），但是限制这个callback方法只能是外部的方法，当外部的callback方法执行，并且执行结束，需要调用vue文件中的方法或者参数。但是在vue文件中无法知道这个callback函数什么时候执行结束，或者不知道这个callback是否执行成功。

• 用一张图说明我遇到的问题

  
  问题.png
  

  这里出现问题就是：callbackFunction函数执行成功后才可以执行VUEFunction函数，但是在vue内部文件中无法知道外部的callbackFunction函数什么时候执行，什么时候执行结束。

• 普遍解决方法
  在callbackFunction函数中做一个标志位，表示它是否已经执行结束，但是在vue文件中只能靠轮循来查看这个标志位是否已经执行结束了。使用setInterval()吗？这样的傻逼代码，不想吐槽。。。
• 正确的解决方法
  将异步改成同步

callOuterFun() {
  let _resolve, _reject
  let readyPromise = new Promise((resolve, reject) => {
    _resolve = resolve
    _reject = reject
  })
  // callbackFunction函数
  let callbackFunction = function(res) {
    if (res.success) {
       _resolve(res)
    } else {
      _reject('error')
    }
  }
  // 超时机制  5秒超时
  let timeout = new Promise((resolve, reject) => {
    setTimeout(function() {
      reject('timeout')
    }, 5000)
  })
  Bridge({callback: 'callbackFunction'})
  return Promise.race([timeout, readyPromise])
}
// 在vue中调用此函数
other.callOuterFun().then(res => {
  // 如果callbackFunction执行成功，走这边
}).catch(err => {
  // callbackFunction执行失败，或者超时，走这边
})

完美将异步改成了同步，赞！！！

感谢您的view，from一个写前端的姑娘