Javaの新しいプロジェクト学成オンラインノート-day 12(六)

3.6データの取得  3.6.1 asyncDataメソッド  Nuxt.jsはVue.jsを拡張し、asyncDataというメソッドを追加しました.asyncDataメソッドは、コンポーネント(ページコンポーネントに限定)がロードされるたびに呼び出されます.サービス側またはルーティングの更新前に呼び出すことができます.このメソッドが呼び出されると、最初のパラメータが現在のページのコンテキストオブジェクトに設定され、asyncDataメソッドを使用してデータを取得できます.Nuxt.jsはasyncDataで返されたデータ融合コンポーネントdataメソッドで返されたデータを現在のコンポーネントに一括して返します.注:asyncDataメソッドはコンポーネントの初期化前に呼び出されるため、このメソッドではコンポーネントのインスタンスオブジェクトを参照することはできません.例:上の例でのuser/id.vueに追加します.ページコードは次のとおりです.
[AppleScript] テキスト表示 
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 < template >     < div >   { { id } } , ： { { name } }    < / div > < / template > < script >     export default {      layout : 'test' ,      / / id       asyncData ( ) {         console. log ( "async " )         return {           name : ' '        }       } ,       data ( ) {         return {           id : ''        }         } ,       mounted ( ) {         this. id = this.$route.params. id ;      }   } < / script > < style >    < / style >
このメソッドは、サービス側で実行され、サービス側コンソールの印刷出力「asyncメソッド」を観察します.この方法はdataモデルデータを返し、サービス側でレンダリングされ、最後にフロントエンドに応答して、このページをリフレッシュしてページソースコードを表示すると、nameモデルデータがページソースコードに表示されていることがわかります.  3.6.2 async/awaitメソッド  同期呼び出しはasyncとawaitを使用してpromiseと組み合わせても実現でき、nuxt.jsではasync/awaitを使用して同期呼び出し効果を実現します.   1、非同期呼び出しを先にテストし、a、bの2つの方法を追加し、mountedで呼び出す. 
[AppleScript] テキスト表示 
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 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 )           } )       }
クライアントを観察し,メソッド実行の順序で出力せず,Promiseを用いて非同期呼び出しを実現した.2、async/awaitを使用して同期呼び出しを完了する 
[AppleScript] テキスト表示 
?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 async asyncData ( { store , route } ) {             console. log ( "async " )           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 : ' '        }      } ,
サービス側コンソールを観察すると,a,bメソッドの呼び出し順に1,2を出力し,async/awaitを用いて同期呼び出しを完了することが実現された.