如何使用一个函数导致另一个带有异步等待的函数

Question

如果另一个函数返回为真，我有一个应该运行的函数：

// 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

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

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

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

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

更新

现在到您的实际代码：您的sweetAlert() 实现实际上并没有返回任何东西，因为returns 的作用域是另一个函数：

# 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() 处理程序的函数。该链将返回另一个承诺，它将以 returns 的值解决。要将此作为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 块时才会返回一些内容。另请注意，您不要在 sweetAlert() 函数中使用 await（但仅在其中的其他函数中）并返回 Promise 而不是原始值，您可以省略 async 关键字。

或者，您也可以使用async/await：

async function sweetAlert(options) {
  if (options.method === 'confirm' || options.method === 'callback') {
    // await the return value here
    let result = await this.$swal({...})

    if (result.value) {
      if (options.method === 'callback') {
        let res = await options.callback(options.cValue)
        return res
      }

      // now this will return from sweetAlert()
      return true
    }
  }
}

Answer 2

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
    }
  }
}