今天看別人的單元測試代碼的時候碰到了一段代碼 await Vue.nextTick(),初看起來不是很懂,後來經過查資料弄懂了,記錄下來,供之後開發時參考,相信對其餘人也有用。async
咱們都用過 Vue.nextTick,可是在用的時候會在裏面加一個回調函數的,可是有人直接這麼使用:函數
await Vue.nextTick();
這是爲何呢?使用場景又是什麼呢?單元測試
要了解這段代碼的含義,咱們首先來看 Vue.nextTick() 若是不加回調函數會怎樣?測試
經過查閱官方文檔,能夠知道,Vue.nextTick() 裏面若是加了回調,則會在下次 DOM 更新循環結束以後執行延遲迴調。若是在修改數據以後當即使用這個方法,則能夠獲取更新後的 DOM。若是沒有提供回調且在支持 Promise 的環境中 則會返回一個 Promise!!!spa
因此 await Vue.nextTick() 至關於在 await 後面加了一個 Promise。code
await 後面加一個 Promise 又會怎樣呢?開發
經過查閱資料,咱們能夠知道,await 後面必須跟 Promise,不然會報錯;若是跟了 Promise,那麼當執行到這裏的時候,會先返回,等 Promise 返回後,再繼續執行下面的代碼。好比下面這段代碼:文檔
async function f1() { console.log('xxxx'); await new Promise(); console.log('tttt'); }
當執行到 await new Promise(); 時,會先返回,等 Promise resolve 以後再才執行下面的 console.log('tttt');回調函數
下面是一個簡單的示例:it
function genPromise() { return new Promise(resolve => { console.log('await start'); setTimeout(() => { console.log('await end'); resolve(); }, 0); }); } async function f1() { console.log('xxxx'); await genPromise(); console.log('should be after await end'); } f1();
最後的打印結果是:
xxxx await start await end should be after await end
因此 await Vue.nextTick() 就和這個相似,它會在等 DOM 更新以後再執行後面的代碼,其實就至關於把裏面的代碼拿出來寫在後面了(仔細一想,這不就是 await 的常規用法嗎?)。