3.6 獲取數(shù)據(jù)
3.6.1 asyncData 方法

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

在上邊例子中的user/_id.vue中添加，頁面代碼如下： [mw_shl_code=applescript,true] <template> <div> 修改用戶信息{{id}},名稱：{{name}} </div> </template> <script> export default{ layout:'test', //根據(jù)id查詢用戶信息 asyncData(){ console.log("async方法") return { name:'黑馬程序員' } }, data(){ return { id:'' } }, mounted(){ this.id = this.$route.params.id;} } </script> <style> </style> [/mw_shl_code] 此方法在服務(wù)端被執(zhí)行，觀察服務(wù)端控制臺(tái)打印輸出“async方法”。 此方法返回data模型數(shù)據(jù)，在服務(wù)端被渲染，最后響應(yīng)給前端，刷新此頁面查看頁面源代碼可以看到name模型數(shù) 據(jù)已在頁面源代碼中顯示。3.6.2 async /await方法 使用async 和 await配合promise也可以實(shí)現(xiàn)同步調(diào)用，nuxt.js中使用async/await實(shí)現(xiàn)同步調(diào)用效果。 1、先測試異步調(diào)用，增加a、b兩個(gè)方法，并在mounted中調(diào)用。[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] 觀察客戶端，并沒有按照方法執(zhí)行的順序輸出，使用Promise實(shí)現(xiàn)了異步調(diào)用。2、使用async/await完成同步調(diào)用[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]

觀察服務(wù)端控制臺(tái)發(fā)現(xiàn)是按照a、b方法的調(diào)用順序輸出1、2，實(shí)現(xiàn)了使用async/await完成同步調(diào)用。

轉(zhuǎn)載于:https://blog.51cto.com/13517854/2401453

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。