How to deal with data acquisition failure caused by synchronous execution of functions in Vue

Problem description

There are two functions in mount in Vue.
After the first function is executed, assign a value to userInfo in data
But the second function gets userInfo and is a null value

Explanation of reasons

This may be because the second function occurs before the first function is executed when obtaining userInfo.
In Vue, the mount function is executed synchronously.
When the mount() method of the Vue instance is called, Vue will immediately execute the functions passed to the mount() method, which will be executed synchronously before the Vue instance is mounted on the DOM.
These functions are generally used to perform some initialization operations, such as data acquisition, event listening, etc.
If there are tasks that require asynchronous operations, asynchronous operations should be handled in these synchronously executed functions.

Summary of the reasons

Vue's mount function execution is synchronous, which means that the second function has already started to be executed before the first function is executed.。

Solution

One way to solve this problem is to use Promise or async/await to ensure that the first function is executed and then the second function is executed.

Promise solution

For example, you can wrap the first function in a Promise, assign a value to userInfo in the Promise callback function, and return a Promise object. Then use the await keyword in the second function to wait for the first function to execute before obtaining userInfo.

  data() {
    return {
      userInfo: null
    }
  },
  mounted() {
    const promise = new Promise((resolve, reject) =&gt; {
      // After the first function is executed, assign a value to userInfo      resolve('Some data');
    });

    ((data) =&gt; {
       = data;
      // The userInfo obtained by the second function is no longer an empty value      ();
    });
  },
  methods: {
    secondFunction() {
      (); // Output 'Some data'    }
  }
});

By using Promise, you can ensure that the first function is executed and the second function is executed, thereby avoiding the situation where the userInfo is null.

async/await solution

The mounted function can be defined as async and use the await syntax to wait for the execution of two asynchronous functions. Here is the sample code using async/await:

  data() {
    return {
      userInfo: null
    }
  },
  async mounted() {
    await ();
    await ();
    (); // Output 'Some data'  },
  methods: {
    firstFunction() {
      return new Promise((resolve) =&gt; {
        setTimeout(() =&gt; {
           = 'Some data';
          resolve();
        }, 1000);
      });
    },
    secondFunction() {
      return new Promise((resolve) =&gt; {
        // Another asynchronous operation can be performed here        resolve();
      });
    }
  }

In the above code, we declare the mounted function as async and use await to wait for the execution of the two asynchronous functions. In the mounted function, we execute firstFunction and secondFunction in turn, and output the value of userInfo at the end.

This is the article about the handling of data acquisition failure caused by synchronous execution of functions in Vue. For more related content on Vue data acquisition, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!