本篇內(nèi)容主要講解“vue的await怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue的await怎么使用”吧!

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：網(wǎng)站建設、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的博望網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

在vue中，await是等待的意思，await關(guān)鍵字只能放在async函數(shù)里，await配合async一起使用，相當于把異步函數(shù)變成了同步，await會等待后面表達式的返回結(jié)果之后才執(zhí)行下一步。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue的await用法是什么

先說一下async的用法，它作為一個關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個異步函數(shù)，因為async就是異步的意思， 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會阻塞后面代碼的執(zhí)行。 寫一個async 函數(shù)

async function timeout() {
　　return 'hello world';
}

語法很簡單，就是在函數(shù)前面加上async 關(guān)鍵字，來表示它是異步的，那怎么調(diào)用呢？async 函數(shù)也是函數(shù)，平時我們怎么使用函數(shù)就怎么使用它，直接加括號調(diào)用就可以了，為了表示它沒有阻塞它后面代碼的執(zhí)行，我們在async 函數(shù)調(diào)用之后加一句

console.log;
async function timeout() {
    return 'hello world'
}
timeout();
console.log('雖然在后面，但是我先執(zhí)行');

打開瀏覽器控制臺，我們看到了

async 函數(shù) timeout  調(diào)用了，但是沒有任何輸出，它不是應該返回 'hello world',  先不要著急， 看一看timeout()執(zhí)行返回了什么？ 把上面的 timeout() 語句改為console.log(timeout())

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('雖然在后面，但是我先執(zhí)行');

繼續(xù)看控制臺

原來async 函數(shù)返回的是一個promise 對象，如果要獲取到promise 返回值，我們應該用then 方法， 繼續(xù)修改代碼

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('雖然在后面，但是我先執(zhí)行');

看控制臺

我們獲取到了"hello world',  同時timeout 的執(zhí)行也沒有阻塞后面代碼的執(zhí)行，和 我們剛才說的一致。

這時，你可能注意到控制臺中的Promise 有一個resolved，這是async 函數(shù)內(nèi)部的實現(xiàn)原理。如果async 函數(shù)中有返回一個值 ,當調(diào)用該函數(shù)時，內(nèi)部會調(diào)用Promise.solve() 方法把它轉(zhuǎn)化成一個promise 對象作為返回，但如果timeout 函數(shù)內(nèi)部拋出錯誤呢？ 那么就會調(diào)用Promise.reject() 返回一個promise 對象， 這時修改一下timeout 函數(shù)

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 調(diào)用Promise.resolve() 返回promise 對象。
console.log(timeout(false)); // 調(diào)用Promise.reject() 返回promise 對象。

如果函數(shù)內(nèi)部拋出錯誤， promise 對象有一個catch 方法進行捕獲。

timeout(false).catch(err => {
    console.log(err)
})

async 關(guān)鍵字差不多了，我們再來考慮await 關(guān)鍵字，await是等待的意思，那么它等待什么呢，它后面跟著什么呢？其實它后面可以放任何表達式，不過我們更多的是放一個返回promise 對象的表達式。注意await 關(guān)鍵字只能放到async 函數(shù)里面

現(xiàn)在寫一個函數(shù)，讓它返回promise 對象，該函數(shù)的作用是2s 之后讓數(shù)值乘以2

// 2s 之后返回雙倍的值

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

現(xiàn)在再寫一個async 函數(shù)，從而可以使用await 關(guān)鍵字， await 后面放置的就是返回promise對象的一個表達式，所以它后面可以寫上 doubleAfter2seconds 函數(shù)的調(diào)用

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}
testResult();

打開控制臺，2s 之后，輸出了60.

現(xiàn)在我們看看代碼的執(zhí)行過程，調(diào)用testResult 函數(shù)，它里面遇到了await, await 表示等一下，代碼就暫停到這里，不再向下執(zhí)行了，它等什么呢？等后面的promise對象執(zhí)行完畢，然后拿到promise resolve 的值并進行返回，返回值拿到之后，它繼續(xù)向下執(zhí)行。具體到 我們的代碼, 遇到await 之后，代碼就暫停執(zhí)行了， 等待doubleAfter2seconds(30) 執(zhí)行完畢doubleAfter2seconds(30) 返回的promise 開始執(zhí)行，2秒 之后，promise resolve 了， 并返回了值為60， 這時await 才拿到返回值60， 然后賦值給result， 暫停結(jié)束，代碼才開始繼續(xù)執(zhí)行，執(zhí)行 console.log語句。

就這一個函數(shù)，我們可能看不出async/await 的作用，如果我們要計算3個數(shù)的值，然后把得到的值進行輸出呢？

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, 我們可以看到，寫異步代碼就像寫同步代碼一樣了，再也沒有回調(diào)地域了。

注意：

async 和 await 基于 promise 的。 使用 async 的函數(shù)將會始終返回一個 promise 對象。 這一點很重要，要記住，這可能是你遇到的容易犯錯的地。

在使用 await 的時候我們暫停了函數(shù)，而非整段代碼。

async 和 await 是非阻塞的。

你仍然可以使用 Promise 例如 Promise.all()。

到此，相信大家對“vue的await怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！

分享標題：vue的await怎么使用
標題URL：http://aaarwkj.com/article22/ihhpcc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、軟件開發(fā)、移動網(wǎng)站建設、網(wǎng)站策劃、微信小程序、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)