Question

我有一个应该在另一个函数返回为true时运行的函数：

// in utils.js
methods:{
  funcOne(){
    // do some thing
    return true
  }
}


//in component.vue
methods:{
  funcTwo(){
    let x = this.funcOne()
    if(x){
    // do something
    }else{
    // do something
    }
  }
}

我该怎么做？由于js是运行时，因此它不会等待funcOne()的结果，我知道我应该使用Promise或async/await。但是不知道怎么做！

更新

我按照建议进行了操作，但仍然无法正常工作，因此可以解释一下这种情况：我正在使用sweet alert。如果我的sweet alert被确认，则应发送axios请求。这是代码：

utils.js是全局添加的mixins

async function sweetAlert(options) {
  // options: method('callback') , icon, title, text, callback, cValue
  if (options.method === 'confirm' || options.method === 'callback') {
    this.$swal({
      icon: options.icon,
      title: options.title,
      text: options.text,
      showCancelButton: true,
      cancelButtonText: this.lang.cancel,
      confirmButtonText: this.lang.confirm
    }).then(async (result) => {
      if (result.value) {
        if (options.method === 'callback') {
          let res = await options.callback(options.cValue)
          return res
        }

        return true
      }
    })
  }
}

我的组件脚本：

let res = await this.sweetAlert({
  method: ALERT_METHOD[2], // it is 'confirm'
  icon: ALERT_TYPE[2], // it is warning
  title: this.lang.deactivate, // added globally
  text: this.lang.deactivate_warning, // added globally
})

if (res) {
  this.activeSwitchDis = true // in my data
  this.activeChanged = true // in my data
  // this.axiosGet is a globally adde this.axios.get
  let response = await this.axiosGet(`product/deactive/${this.editProduct.pId}`)
  // this.resOk is globally added and check for 200
  if (this.resOk(response.status)) {
    // these are my data and funcs no prob with theme
    this.changeError(false)
    this.active = false
    this.activeChanged = false
    this.activeSwitchDis = false
    this.setEditProductActive(this.active)
  } else {
    // these are my data and funcs no prob with theme
    this.active = true
    this.activeChanged = false
    this.activeSwitchDis = false
  }
}

问题是，只有当我确认sweetAlert时，才必须运行axios

Answer 1

methods:{
  async funcOne(){
    // do some thing
    await someAsyncFunctionOrLogic();
    return true
  }
}


//in component.vue
methods:{
  async funcTwo(){
    let x = await this.funcOne()
    if(x){
    // do something
    }else{
    // do something
    }
  }
}

Answer 2

由于js在运行时，它不会等待funcOne()的结果

由于示例中的funcOne() 不是异步函数，因此这是不正确的：调用将等待函数完成并返回其值。

我该怎么做？ [...]，我知道我应该使用Promise或async/await。但是不知道怎么做！

那么最好阅读the documentation for Promises和the async/await Syntax for functions，因为您需要对它们有适当的了解才能有效地使用它们。

更新

由于您的实际代码：sweetAlert()的实现实际上不会返回任何内容，因为return的作用域是另一个函数：

# abbreviated code:
async function sweetAlert(options) {
  if (...) {
    this.$swal({...}).then(async (result) => {
      if (...) {
        let res = await options.callback(options.cValue)
        return res
      }

      return true
    })
  }
}

因此，return res和return true的作用域实际上是传递给then()处理程序的函数。该链将返回另一个诺言，该诺言将以该return的值解决。要将其作为sweetAlert()的返回值，您需要对其进行return：

# abbreviated code:
function sweetAlert(options) {
  if (...) {
    // return the result of the chain here for sweetAlert()
    return this.$swal({...}).then(async (result) => {
      if (...) {
        let res = await options.callback(options.cValue)
        return res
      }

      return true
    })
  }
}

请注意，sweetAlert()仅在进入第一个if块时才会返回内容。还要注意，您没有在await函数中使用sweetAlert()（仅在其中的其他函数中）并返回Promise而不是原始值，您可以省略{{1 }}关键字。

或者，您也可以使用async进行完整操作：

async/await

如何使用一个函数导致另一个函数处于异步等待状态

2 个答案:

更新