Java's new project learning online notes-day12

3.6 access to data
3.6.1 asyncData method

Nuxt.js extends Vue.js and adds a method called asyncData, which will be called before each load of the component (page component only). It can be called before the server or route updates When this method is called, the first parameter is set as the context object of the current page. You can use the asyncData method to obtain data. Nuxt.js will return the data returned by the data fusion component data method returned by asyncData to the current component.
Note: since the asyncData method is called before component initialization, there is no way to reference the instance object of the component through this in the method.
Example:

In the example above user/_id.vue The page code is as follows:
[mw_shl_code=applescript,true] <template>  
<div>  Modify user information{{id}},Name:{{name}}   
</div> </template> <script>  
export default{ 
    layout:'test',     //Query user information according to id   
  asyncData(){   
    console.log("async Method")   
    return {   
      name:'Black horse programmer'   
    }   
  },  
   data(){   
    return {   
      id:''   
    }   
    },  
   mounted(){    
   this.id = this.$route.params.id;
    }
} </script> <style>   </style> [/mw_shl_code]
//This method is executed on the server side. Observe the "async method" printed out on the server console.
//This method returns the data model data, which is rendered on the server side, and finally responds to the front end. Refresh this page to view the page source code, and you can see that the name model data has been displayed in the page source code.
  3.6.2 async /await Method 
//Async and await can also be used in conjunction with promise to achieve synchronous calls. In nuxt.js, async/await is used to achieve synchronous calls.  
1,Test asynchronous call first, add a,b Two methods, and mounted Call in.

[mw_shl_code=applescript,true]methods:{ 
    a(){    
     return new Promise(function(resolve,reject){   
        setTimeout(function () {      
       resolve(1)     
      },2000)    
       })   
  },   
  b(){     
  return new Promise(function(resolve,reject){    
     setTimeout(function () {     
      resolve(2)   
      },1000)   
    })   
  } },   
    mounted(){    
     this.a().then(res=>{   
          alert(res)    
       console.log(res)     
    })        
this.b().then(res=>{    
       alert(res)    
       console.log(res)    
     })  
   }[/mw_shl_code]
//Observe the client, do not follow the order of method execution output, use Promise to realize asynchronous call.

2,Use async/await Complete synchronous call

[mw_shl_code=applescript,true]async asyncData({ store, route }) {      
     console.log("async Method")     
    var a = await new Promise(function (resolve, reject) {    
     setTimeout(function () {      
     console.log("1")   
        resolve(1)     
    },2000)    
   });   
    var a = await new Promise(function (resolve, reject) {    
     setTimeout(function () {    
       console.log("2")     
      resolve(2)    
     },1000)    
   });     
    return {      
       name:'Black horse programmer'  
     }     },
[/mw_shl_code]

Observing the server console, it is found that 1 and 2 are output according to the calling sequence of a and b methods, and async/await is used to complete synchronous calling.

Tags: Java Vue

Posted on Sun, 03 Nov 2019 16:12:54 -0800 by fugix