首頁  >  文章  >  web前端  >  await是es6還是es7的

await是es6還是es7的

青灯夜游
青灯夜游原創
2022-11-16 19:47:352032瀏覽

await是es7。 async和await是ES7中新增內容,是對於非同步操作的解決方案。 async顧名思義是「非同步」的意思,async用來宣告一個函數是異步的;而await從字面意思上是「等待」的意思,就是用來等待非同步完成。 async和await有一個嚴格規定,兩者都離不開對方,且await只能寫在async函數中。

await是es6還是es7的

本教學操作環境:windows7系統、ECMAScript 7版、Dell G3電腦。

在最新的ES7(ES2017)中提出的前端非同步特性:async、await。

一、什麼是async和await

async和await是ES7中新增內容,對於非同步操作的解決方案,它是Generator函數的語法糖。

  • async|await是寫非同步的新方法,之前ES6中用的是promise。
  • async|await是建立在promise基礎之上的新寫法。
  • 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);

await是es6還是es7的
從結果看來async函數傳回的是promise對象,它會直接將回傳值封裝成一個promise物件。

如果沒有回傳值

async function Async() {
    console.log("hello world");
}
let result1 = Async();
console.log(result1);

await是es6還是es7的

從結果看來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是es6還是es7的
從結果看來,第二個await語句是不會執行的,因為第一個await語句狀態變成了reject。

三、Async函數的錯誤處理

#如果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的優點:

    ##async| await解決了回調地獄的問題
  • async|await支援並發執行
  • async|await對非同步處理更加簡潔
  • async|await可以在try…catch中捕獲錯誤
【推薦學習:

javascript進階教學

以上是await是es6還是es7的的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn