I always encounter a lot of problems in the development, and sometimes I will forget them if I don’t record them. Therefore, I plan to record them as I grow up, and it will be more beautiful if I am lucky enough to help my friends

In VUE we often have this requirement:

async created() {
    // We need to wait until the last code executes to get the value before we do anything else
    await this.userData(); // Get the userType
    // Get the userType to check that the user is not an agent and display different information
    if(this.userType==1) {this.isAgent=true; }}Copy the code

First, note:

  1. Hook functions only execute at the specified time (Vue life cycle), and the use of delayers and so on does not affect the execution of the cycle
  2. Async awiat = awiat = awiat = awiat = awiat = awiat = awiat = awiat = awiat = awiat
  3. Created/mounted If async/await is added, the code must be stored in the same hook function to execute code synchronously
  • Hook functions only execute at the specified time (Vue life cycle), and the use of delayers and so on does not affect the execution of the cycle
async created() {
    await setTimeout(() = > {
      console.log(1);
    }, 100);
    console.log(2);
  },
async mounted() {
  await setTimeout(() = > {
      console.log(3);
    }, 100);
    console.log(4);
}
// Output: 2 4 1 3
// Conclusion: so await added to setTimeout has no effect and the delayer does not affect the life cycle execution
Copy the code
  • Async awiat = awiat = awiat = awiat = awiat = awiat = awiat = awiat = awiat = awiat
// We can see from the above code that it is useless to await with delayers and other functions that need to be delayed
// await with sync code
Async and AWIAT are specifically designed to solve the problem of multi-layer nesting of promise callback functions
async created() {
    await this.userData(); // This function is responsible for making requests to get data. Axios uses promises
    // Get the userType to check that the user is not an agent and display different information
    if(this.userType==1) {this.isAgent=true; }}// Conclusion: The code below the periodic function will wait for the request to come back. But only that periodic function!
Copy the code
  • Created/mounted If async/await is added, the code must be stored in the same hook function to execute code synchronously
data() {
  return {
    name: ' '}},async created() {
// this.userinfo () sends a request for data and assigns the value to this.name ---- this.name = res.data.name
  await this.userInfo()
  ...
},
mounted() {
  console.log(this.name) // Print as ''
}

// Mounted is better than created because created adds async and await
// Mounted () {//
// In mounted, you cannot get this.name. So things like this that depend on the results of the previous code are best written in a bunch

async created() {
// this.userinfo () sends a request for data and assigns the value to this.name ---- this.name = res.data.name
  await this.userInfo() // The assignment succeeded
  console.log(this.name) // The printing succeeded
},
Copy the code

The end:

I think MY notes are not too deep questions, but DEEP I will not ha ha ha ~