在JS的世界里,異步操作是非常常見的,如果我們要在異步操作完后對結果進行處理,通過ES7標準的async和await可以很方便地實現。Vue的開發者們也不例外,想要在Vue中使用async或await就需要首先定義好這兩個關鍵詞。
在Vue中定義async的方式很簡單,只需要在需要異步操作的函數前加上async關鍵字即可:
method: { async getData() { const res = await fetch('/api/data'); const data = await res.json(); // 在這里處理fetch返回的結果 ... } }
上面的代碼演示了如何通過async關鍵字標識getDta方法是異步操作。我們可以看到,在方法體內部使用await關鍵字進行異步操作時,函數會掛起,等待異步操作完成后才會繼續往下執行。在此之前,我們需要了解一下await的語法。
await關鍵字的用法十分簡單,它只需跟隨一個Promise對象。這個Promise對象如果是一個resolved狀態,那么await直接返回Promise的結果。反之,則會阻塞當前線程,直到Promise處于resolved狀態為止。
async myAxios() { try { const response = await axios.get('https://api.example.com/data'); console.log(response.data) } catch (error from response) { console.log(error); } }
上面的代碼演示了如何使用await和axios來執行異步操作,我們可以看到,代碼首先使用了try…catch結構,確保任何的異常都能被抓捕住。接著,在try塊中,使用await關鍵字跟隨著axios.get方法,等待異步請求結束并接受響應數據,將其存儲在response對象中。最后,我們只要在try代碼塊中使用處理響應的代碼即可。
總的來說,async和await是JS世界里比較常用的一種異步處理方式。Vue也是JS的一個庫框架,因此我們也可以在Vue中使用async或await來進行異步操作。當我們越來越需要異步處理的時候,async和await也就會變得越來越重要。
下一篇vue 如何監聽對象