The async/await syntax can be finicky at times and may not always

Question

The async/await syntax can be finicky at times and may not always

Using Vue, I want to implement async/await to sequence my functions A and B.

Result is set to false by default.    

mounted() {
  this.A();
  this.B();
}

async A() {
  this.result = await this.$api...
}

async B() {
  if(this.result) {
    let data = await this.$another1 api...
  } else {
    let data = await this.$another2 api...
  }
}

I expect that after function A calls the API and returns a value for 'result,' function B will execute its job.

Sometimes, however, the API in function B calls 'another2 api' before 'this.result' gets its value even if the result is 'true' after function A receives a value from $api.

https://i.sstatic.net/3nIF3.png

This is the normal behavior I anticipate.

https://i.sstatic.net/6RLg3.png

This error occurs occasionally when I refresh the page.

How can I resolve this issue?

javascript vue.js

Answer 1

Answer №1

Ensure to define mounted as an async function.

async mounted() {
  await this.initializeA();
  await this.initializeB();
}

Answer 2

Ensure to define mounted as an async function.

async mounted() {
  await this.initializeA();
  await this.initializeB();
}

Answer 3

Answer №2

A function will return a promise. If your mounted() method is not async and cannot utilize await, you will need to use then.

this.A().then(()=>{
   this.B();
});

(Apologies, the code snippet above is in typescript. You'll have to adapt it to regular javascript as it's not my expertise.)

Answer 4

A function will return a promise. If your mounted() method is not async and cannot utilize await, you will need to use then.

this.A().then(()=>{
   this.B();
});

(Apologies, the code snippet above is in typescript. You'll have to adapt it to regular javascript as it's not my expertise.)

Answer 5

Answer №3

Make sure to instruct the mounted function to wait for the completion of the initial action before proceeding with the subsequent one. Don't forget to modify the mounted() function with the async keyword.

async mounted() {
  await this.performActionA();
  this.performActionB();
}

Answer 6

Make sure to instruct the mounted function to wait for the completion of the initial action before proceeding with the subsequent one. Don't forget to modify the mounted() function with the async keyword.

async mounted() {
  await this.performActionA();
  this.performActionB();
}

Answer 7

Answer №4

activated() {
  Promise.all([this.fetchData1(), this.fetchData2()])
         .then((response) => {
               console.log(response)
         })
}

async fetchData1() {
  const result1 = await this.$apiCall1...
  return result1
}

async fetchData2() {
  if(this.result1) {
         const data1 = await this.$fetchApi1...
         return data1
  } else {
          const data2 = await this.$fetchApi2...
          return data2
  }
}

Answer 8

activated() {
  Promise.all([this.fetchData1(), this.fetchData2()])
         .then((response) => {
               console.log(response)
         })
}

async fetchData1() {
  const result1 = await this.$apiCall1...
  return result1
}

async fetchData2() {
  if(this.result1) {
         const data1 = await this.$fetchApi1...
         return data1
  } else {
          const data2 = await this.$fetchApi2...
          return data2
  }
}

The async/await syntax can be finicky at times and may not always

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

RxJs will only consider the initial occurrence of a specific type of value and ignore any subsequent occurrences until a different type of value is encountered

Tips for troubleshooting and debugging a Vue.js application using the Chrome browser

What are the best practices for implementing serialization in NestJS?

Renaming personalized elements in Aurelia templates

What is the best way to utilize the filter search method within the SAILJS REST API?

Return an array with only emails included

What steps should be taken to make mocha utilize the HTTP response?

fullpage.js: the content exceeds the height limit

Is the functioning of closures identical when applied to class methods?

How can I implement an AJAX request with MongoDB in Node/Express?

Update the JavaScript to modify the styling based on the specific value of the

Identifying the moment when the body scroll reaches the top or bottom of an element

Issues with displaying HTML5 audio player in iOS Chrome and Safari browsers

Please provide either a render prop, a render function as children, or a component prop to the Field(auto) component

Contrast and combine information from two JavaScript arrays of objects

Using JQuery to monitor the loading of a newly selected image src attribute

Tips for validating a URL in Cypress without having to actually visit the page

Utilizing Material UI Pickers and Formik to efficiently handle Date, Time, and Second components

Guide on smoothly transitioning between 2 points within a requestAnimationframe iteration

`Optimizing bundle size in Webpack using braintree-web integration with TypeScript`