3.6 獲取數據
3.6.1 asyncData 方法

Nuxt.js 擴展了 Vue.js，增加了一個叫 asyncData 的方法， asyncData 方法會在組件（限于頁面組件）每次加載 之前被調用。它可以在服務端或路由更新之前被調用。 在這個方法被調用的時候，第一個參數被設定為當前頁面的 上下文對象，你可以利用 asyncData 方法來獲取數據，Nuxt.js 會將 asyncData 返回的數據融合組件 data 方法 返回的數據一并返回給當前組件。
注意：由于 asyncData 方法是在組件 初始化 前被調用的，所以在方法內是沒有辦法通過 this 來引用組件的實例 對象。
例子：

在上邊例子中的user/_id.vue中添加，頁面代碼如下： [mw_shl_code=applescript,true] <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> [/mw_shl_code] 此方法在服務端被執行，觀察服務端控制臺打印輸出“async方法”。 此方法返回data模型數據，在服務端被渲染，最后響應給前端，刷新此頁面查看頁面源代碼可以看到name模型數 據已在頁面源代碼中顯示。3.6.2 async /await方法 使用async 和 await配合promise也可以實現同步調用，nuxt.js中使用async/await實現同步調用效果。 1、先測試異步調用，增加a、b兩個方法，并在mounted中調用。[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] 觀察客戶端，并沒有按照方法執行的順序輸出，使用Promise實現了異步調用。2、使用async/await完成同步調用[mw_shl_code=applescript,true]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:'黑馬程序員' } }, [/mw_shl_code]

觀察服務端控制臺發現是按照a、b方法的調用順序輸出1、2，實現了使用async/await完成同步調用。

轉載于:https://blog.51cto.com/13517854/2401453

總結

以上是生活随笔為你收集整理的Java的新项目学成在线笔记-day12（六）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。