await是es7。 async和await是ES7中新增內容,是對於非同步操作的解決方案。 async顧名思義是「非同步」的意思,async用來宣告一個函數是異步的;而await從字面意思上是「等待」的意思,就是用來等待非同步完成。 async和await有一個嚴格規定,兩者都離不開對方,且await只能寫在async函數中。
本教學操作環境:windows7系統、ECMAScript 7版、Dell G3電腦。
在最新的ES7(ES2017)中提出的前端非同步特性:async、await。
async和await是ES7中新增內容,對於非同步操作的解決方案,它是Generator函數的語法糖。
async|await也是非阻塞的。
async顧名思義是「非同步」的意思,async用來宣告一個函數是異步的。而await從字面意思上是「等待」的意思,就是用來等待非同步完成。
async和await它們兩有一個嚴格規定,兩者都離不開對方,但是,await只能寫在async函數中。
async如何處理傳回值
async的回傳值是一個promise對象,也就是說它會直接透過promise中的方法將回傳值封裝成一個promise物件。
async function Async() { return "hello world"; } const result = Async(); console.log(result);
從結果看來async函數傳回的是promise對象,它會直接將回傳值封裝成一個promise物件。
如果沒有回傳值
async function Async() { console.log("hello world"); } let result1 = Async(); console.log(result1);
從結果看來async函數傳回的是promise對象,當時值是undefined。因此。在沒有await的情況下,回傳一個 promise 對象,並不會阻塞後面的語句。
但是await是在等待什麼呢
function time(s) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } async function Async(value, s) { await time(s); console.log(value); } Async('hello world', 50);
指定 50 毫秒以後,輸出hello world。
一般用await去等待async函數完成,await 等待的是一個表達式,表達式的計算結果是 promise 物件或其它值,因此,await後面實際上可以接收普通函數呼叫或直接量。
如果await等到的不是promise對象,表達式運算結果就是它等到的東西。
如果是promise對象,await會阻塞後面的程式碼,等promise物件處理成功,得到的值為await表達式的運算結果。雖然await阻塞了,但await在async中,async不會阻塞,它內部所有的阻塞都被封裝在一個promise物件中異步執行。
任何一個await語句後面的 Promise 物件變成reject狀態,那麼整個async函數都會中斷執行。
async function Async() { await Promise.reject('出错了'); await Promise.resolve('hello world'); // 不会执行 } let result1 = Async(); console.log(result1);
從結果看來,第二個await語句是不會執行的,因為第一個await語句狀態變成了reject。
#如果await後面的非同步運算出錯,那麼async函數傳回的 promise 物件就被reject了。
let a; async function f() { await Promise.reject('error'); a = await 1; // await 没有执行 } f().then(v => console.log(a));
從結果看來,當async函數中的await只要有一個出現reject狀態,則後面的await都不會執行。一般解決辦法用try…catch。
// 正确的写法 let a; async function f() { try { await Promise.reject('error') } catch (error) { console.log(error); } a = await 1; return a; } f().then(v => console.log(a)); // 1
從結果看來,這樣就很好的解決了這個問題,當有多個await不會執行時,可以都放在try…catch中。
async|await的優點:
javascript進階教學】
以上是await是es6還是es7的的詳細內容。更多資訊請關注PHP中文網其他相關文章!