理解ES7中的async函數

curried 發布于2019-08-23 11:46 / 2318人閱讀

摘要：什么是標準引入了函數，使得異步操作變得更加方便。顧名思義是異步的意思，用于聲明一個函數是異步的。的作用正常情況下，命令后面是一個對象。表示函數等待返回結果了，再繼續執行。上面便是一種錯誤用法，并沒有在函數執行上下文中，而是在的回調函數中。

什么是Async、await

ES2017 標準引入了 async 函數，使得異步操作變得更加方便。async顧名思義是“異步”的意思，用于聲明一個函數是異步的。而await從字面意思上是“等待”的意思，就是用于等待異步完成。

基本用法 async函數的返回值

既然async函數是聲明一個異步函數，那么我們如何知道這個函數是否執行完成呢。我們觀察一下async函數的返回值就明白了。

async function lxcAsync() {
    return "LXC";
}

console.log(lxcAsync()); // Promise { "LXC" }

代碼輸出的結果是Promise { "LXC" }，可見async函數返回的是一個Promise對象，因此我們可以使用then方法添加回調函數，從而處理async函數返回的結果。

async function lxcAsync() {
    return "LXC";
}

lxcAsync().then((data) => {
    console.log(data);   // LXC
});

await的作用

正常情況下，await命令后面是一個 Promise 對象。當然也可以是原始類型和非Promise對象，但會被轉成一個立即resolve的 Promise 對象，這是等同于同步操作。await表示函數等待promise返回結果了，再繼續執行。

function delay() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("LXC");
        }, 2000);
    })
}

async function lxcAsync() {
    let de = await delay();
    console.log(de); //  2s后輸出LXC
}
lxcAsync();

注意點 await關鍵字只能用于async函數執行上下文中。

async function lxcAsync() {
   setTimeout(() => {
     await 1;   //await is only valid in async function
   },1000)
}
lxcAsync();

上面便是一種錯誤用法，await并沒有在lxcAsync函數執行上下文中，而是在setTimeout的回調函數中。

async function lxcAsync() {
   setTimeout(() => {
     await 1;   //await is only valid in async function
   },1000)
}
lxcAsync();

如果我們希望在某個異步函數的回調函數中使用await（如果使用過jest，應該會知道jest的異步測試就有這種需求）,我們可以使用下列方式

function lxcAsync() {
   setTimeout(async () => {
     await 1;
   },1000)
}
lxcAsync();

reject錯誤處理

如果await后面的Promise對象返回的是reject，那么我們需要如何處理呢？這時我們需要try-catch來處理。

function delay() {
    return new Promise((resolve, reject) => {
        reject("LXC");
    })
}

async function lxcAsync() {
    try {
        let de = await delay();
        console.log(de); 
    } catch (error) {
        console.log(error);  //輸出LXC
    }

}
lxcAsync();

GPU云服務器云服務器這個函數怎么理解你理解中的云服務器ecs是什么 javascript中的函數 php中的變量函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97435.html

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
翻譯：Taming the asynchronous beast with ES7

摘要：讓我們使用它從數組中返回一個值數組在中，我們可以這樣做，這是一種更簡單的方法最重要的部分是創建數組，該數組立即調用所有的我們在主函數中等待這些。所以在我們真正等待完成之前，主函數就退出了。原文：https://pouchdb.com/2015/03/0... PouchDB最棘手的方面之一是它的API是異步的。在Stack Overflow、Github和IRC上，我看到了不少困惑的...

Eastboat 2019-08-23 18:31 評論0 收藏0
ES6&ES7中的異步之async函數

摘要：更好的語義和分別表示異步和等待，比起和更容易理解。前邊聲明關鍵字，表示內部有內部操作，調用函數會返回一個對象。等價于其中函數就是自動執行器。 async函數定義 async函數其實就是之前說過的Generator的語法糖，用于實現異步操作。它是ES2017的新標準。讀取兩個文件: const fs = require(fs) const readFile = function(f...

dongxiawu 2019-08-21 17:36 評論0 收藏0
快速理解和使用 ES7 await/async

摘要：是最重要特性之一，它是目前為止最佳的異步解決方案了。雖然沒有在中錄入，但很快就到來，目前已經在階段。表示暫停，表示執行下一步，如果你不了解也沒關系，可以忽略它直接學習。 await/async 是 ES7 最重要特性之一，它是目前為止 JS 最佳的異步解決方案了。雖然沒有在 ES2016 中錄入，但很快就到來，目前已經在 ES-Next Stage 4 階段。直接上例子，比如我們需要...

Kross 2019-08-20 11:35 評論0 收藏0
用co玩轉異步

摘要：否則不會得到異步之后的值對象的值，并沒有在中進行處理，而是直接作為返回值返回到對象外面了這就是的魔法。當生成器函數內的邏輯執行完畢且沒有錯誤之后，這個對象返回值變為狀態，且將生成器的返回值作為出來的值。之前我在關于Promise的文章中提到了co這個庫。在這篇文章里，我將寫一寫自己對它的認識。 Trust me，用了co庫，你不想用別的，來它半斤異步調用你一口能吃仨。但是我對Tj大...

microelec 2019-08-20 10:31 評論0 收藏0