在vue中，await是等待的意思，await關鍵字只能放在async函數裡，await配合async一起使用，相當於把非同步函數變成了同步，await會等待後面表達式的返回結果之後才執行下一步。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
先說一下async的用法，它作為一個關鍵字放到函數前面，用來表示函數是一個非同步函數，因為async就是非同步的意思， 非同步函數也就表示該函數的執行不會阻塞後面程式碼的執行。寫一個async 函數
async function timeout() {
return 'hello world';
}語法很簡單，就是在函數前面加上async 關鍵字，來表示它是非同步的，那要怎麼呼叫呢？ async 函數也是函數，平常我們怎麼使用函數就怎麼使用它，直接加括號呼叫就可以了，為了表示它沒有阻塞它後面程式碼的執行，我們在async 函數呼叫之後加一句
console.log;
async function timeout() {
return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');打開瀏覽器控制台，我們看到了
async 函數timeout 呼叫了，但是沒有任何輸出，它不是應該返回'hello world', 先不要著急， 看一看timeout()執行返回了什麼？把上面的timeout() 語句改為console.log(timeout())
async function timeout() {
return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');繼續看控制台
原來async 函數回傳的是一個promise 對象，如果要取得到promise 回傳值，我們應該用then 方法， 繼續修改程式碼
async function timeout() {
return 'hello world'
}
timeout().then(result => {
console.log(result);
})
console.log('虽然在后面，但是我先执行');看控制台
我們取得了"hello world', 同時timeout 的執行也沒有阻塞後面程式碼的執行，和我們剛才說的一致。
這時，你可能注意到控制台中的Promise 有一個resolved，這是async 函數內部的實現原理。如果async 函數中有返回一個值,當調用該函數時，內部會調用Promise.solve() 方法把它轉化成一個promise 物件作為返回，但如果timeout 函數內部拋出錯誤呢？那麼就會調用Promise.reject() 傳回一個promise 對象， 這時修改一下timeout 函數
async function timeout(flag) {
if (flag) {
return 'hello world'
} else {
throw 'my god, failure'
}
}
console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。控制台如下：
# 如果函數內部拋出錯誤， promise物件有一個catch 方法進行捕獲。
timeout(false).catch(err => {
console.log(err)
})async 關鍵字差不多了，我們再來考慮await 關鍵字，await是等待的意思，那麼它等待什麼呢，它後面跟著什麼呢？其實它後面可以放任何表達式，不過我們更多的是放一個返回promise 對象的表達式。注意await 關鍵字只能放到async 函數裡面
現在寫一個函數，讓它返回promise 對象，該函數的作用是2s 之後讓數值乘以2
// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
} )
}現在再寫一個async 函數，從而可以使用await 關鍵字， await 後面放置的就是傳回promise物件的一個表達式，所以它後面可以寫上doubleAfter2seconds 函數的呼叫
async function testResult() {
let result = await doubleAfter2seconds(30);
console.log(result);
}
testResult();開啟控制台，2s 之後，輸出了60.
現在我們看看程式碼的執行過程，呼叫testResult 函數，它裡面遇到了await, await 表示等看看程式碼的執行過程，呼叫testResult 函數，它裡面遇到了await, await 表示等一下，程式碼就暫停到這裡，不再向下執行了，它等什麼呢？等後面的promise物件執行完畢，然後拿到promise resolve 的值並進行返回，返回值拿到之後，它繼續向下執行。具體到我們的程式碼, 遇到await 之後，程式碼就暫停執行了， 等待doubleAfter2seconds(30) 執行完畢doubleAfter2seconds(30) 傳回的promise 開始執行，2秒之後，promise resolve 了， 並傳回了值為60， 這開始執行，2秒之後，promise resolve 了， 並傳回了值為60， 這開始執行，2秒之後，promise resolve 了， 並傳回了值為60， 這時await 才拿到回傳值60， 然後賦值給result， 暫停結束，程式碼才開始繼續執行，執行console.log語句。
就這一個函數，我們可能看不出async/await 的作用，如果我們要計算3個數的值，然後把得到的值進行輸出呢？
async function testResult() {
let first = await doubleAfter2seconds(30);
let second = await doubleAfter2seconds(50);
let third = await doubleAfter2seconds(30);
console.log(first + second + third);
}6秒後，控制台輸出220, 我們可以看到，寫非同步程式碼就像寫同步程式碼一樣了，再也沒有回調地域了。
注意：
async 和 await 基於 promise 的。使用 async 的函數將會始終傳回一個 promise 物件。這一點很重要，要記住，這可能是你遇到的容易犯錯的地方。
在使用 await 的時候我們暫停了函數，而非整段程式碼。
async 和 await 是非阻塞的。
你還是可以使用 Promise 例如 Promise.all()。
【相關推薦：《vue.js教學》】
以上是vue的await用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
