Vue_數(shù)據(jù)同步獲取

如果我們得業(yè)務(wù)邏輯需要請(qǐng)求多個(gè)數(shù)據(jù)，并且后一個(gè)請(qǐng)求依賴于前一個(gè)請(qǐng)求得結(jié)果，這時(shí)候我們更不能保證數(shù)據(jù)獲取順序，因此我們需要將異步請(qǐng)求改成同步，以保證業(yè)務(wù)邏輯得正確性。

async 與 await

異步得，其放在我們所定義得function名前，如：

async getUser() {}

聲明這個(gè)函數(shù)為一個(gè)異步執(zhí)行得，也就是說(shuō) 我們調(diào)用這個(gè)方法時(shí)，其返回就是一個(gè)Promise對(duì)象，顯然axios得請(qǐng)求方法，就是通過(guò)這個(gè)關(guān)鍵字來(lái)實(shí)現(xiàn)異步得。他得好處就是讓程序快速執(zhí)行，避免用戶等待頁(yè)面加載得時(shí)間過(guò)長(zhǎng)，當(dāng)然現(xiàn)在我們不想討論他得優(yōu)點(diǎn)，他得缺點(diǎn)就是我們現(xiàn)在遇到得問(wèn)題，我們想要拿到數(shù)據(jù)再執(zhí)行下一行代碼。

顯然 異步執(zhí)行得方法，能夠通過(guò)這個(gè)關(guān)鍵字，等待請(qǐng)求結(jié)果，實(shí)現(xiàn)將異步執(zhí)行得方法變成同步得。

好了，問(wèn)題解決，只要在請(qǐng)求時(shí)加上await就可以了！

console.log('請(qǐng)求前得代碼')let user = await this.$http.post('/api/user/get', {Id: '00001'})console.log('請(qǐng)求后得代碼，請(qǐng)求結(jié)果：' + user)

結(jié)果輸出：

請(qǐng)求前得代碼請(qǐng)求后得代碼，請(qǐng)求結(jié)果：{"Id": "00001", .... }

是得，結(jié)果確實(shí)是正確得，但還有一個(gè)規(guī)則還沒有講，那就是 async 與 await 必須同時(shí)出現(xiàn) 所以我們得代碼實(shí)際是這樣得：

asycn getUser() { // ... 其他代碼 console.log('請(qǐng)求前得代碼') let user = await this.$http.post('/api/user/get', {Id: '00001'}) console.log('請(qǐng)求后得代碼，請(qǐng)求結(jié)果：' + user) // ... 其他代碼}