Using the result of one function in another function when using async await

Question

Using the result of one function in another function when using async await

I am facing an issue with running a function based on the return value of another function:

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

Can someone guide me on how to achieve this? Since JavaScript is runtime, it does not wait for the result of funcOne(). I believe I should implement Promise or async/await, but I'm unsure of the correct approach.

UPDATE

After following the suggestions provided, I still couldn't get it to work. Let me explain the scenario:

I have integrated sweet alert functionality. If a confirmation is received from the sweet alert, an axios request should be sent. Here is the code snippet:

utils.js serves as a globally added 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
      }
    })
  }
}

Code snippet in my component script:

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

The issue lies in ensuring that the axios call is only made upon confirming the sweet alert.

javascript vue.js vuejs2 nuxt.js

Answer 1

Answer №1

When using JavaScript, it's important to note that since it is runtime, it won't wait for the result of the function funcOne().

In the context of your code example, if the funcOne() function is not asynchronous, the call will indeed wait for the function to complete and return its value.

If you're unsure about how to handle this situation and think you should be using Promise or async/await, I recommend checking out the documentation on Promises and async/await Syntax for functions for a better understanding.

Update

Regarding your code snippet: your implementation of sweetAlert() does not return anything because the return statements are scoped within another function:

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

      return true
    })
  }
}

To properly capture the return value of the chain as the return value of sweetAlert(), you need to explicitly return it:

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

It's worth noting that sweetAlert() will only return something if it enters the first if block. Additionally, if you don't use await directly in the sweetAlert() function and return a Promise instead of a raw value, you can omit the async keyword from the function.

Alternatively, you can opt for a full implementation with 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

When using JavaScript, it's important to note that since it is runtime, it won't wait for the result of the function funcOne().

In the context of your code example, if the funcOne() function is not asynchronous, the call will indeed wait for the function to complete and return its value.

If you're unsure about how to handle this situation and think you should be using Promise or async/await, I recommend checking out the documentation on Promises and async/await Syntax for functions for a better understanding.

Update

Regarding your code snippet: your implementation of sweetAlert() does not return anything because the return statements are scoped within another function:

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

      return true
    })
  }
}

To properly capture the return value of the chain as the return value of sweetAlert(), you need to explicitly return it:

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

It's worth noting that sweetAlert() will only return something if it enters the first if block. Additionally, if you don't use await directly in the sweetAlert() function and return a Promise instead of a raw value, you can omit the async keyword from the function.

Alternatively, you can opt for a full implementation with 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 3

Answer №2

methods:{
  async actionOne(){
    // perform a task
    await executeAsyncTask();
    return true
  }
}


//inside component.vue
methods:{
  async actionTwo(){
    let result = await this.actionOne()
    if(result){
    // carry out an operation
    }else{
    // execute another operation
    }
  }
}

Answer 4

methods:{
  async actionOne(){
    // perform a task
    await executeAsyncTask();
    return true
  }
}


//inside component.vue
methods:{
  async actionTwo(){
    let result = await this.actionOne()
    if(result){
    // carry out an operation
    }else{
    // execute another operation
    }
  }
}

Using the result of one function in another function when using async await

Answer №1

Update

Answer №2

Similar questions

Troubleshooting npm audit error involving loadVirtual and ENOLOCK

How can you create an animation that plays forward on the first click and then reverses on the second

Having trouble with Isotope masonry functionality

Guide to Implementing <audio/> in a Nuxt-js Application

"Apply a class to a span element using the onClick event handler in JavaScript

What is the process for encrypting a string in JavaScript?

The three.js library encountered an ERROR 404 ( File Not Found ) when trying to import an existing file

display a dropdown menu with a default selection

Tips for utilizing the Ace editor validator without the need to create a new Ace editor instance

The performance of dom-repeat may be impacted when dealing with sizable objects, such as those containing base64 encoded images

React fails to display image on the server

Having trouble getting ngAnimate to work properly?

Validation issue with Reactive Forms not functioning as expected

Transmit an array in a post request with Node.js using the application/x-www-form-urlencoded content type

Personalized JavaScript Arrays

There seems to be a caching issue in ReactJS and Spring Data Rest that could be causing problems with

What is the process for accessing a URL using a web browser and receiving a plain text file instead of HTML code?

ParsleyJS always seems to miss the mark when it comes to

The call stack size has reached its maximum limit due to running 2 Collection.find commands

Getting attribute values from custom tags in AngularJS is a common task that can be