記錄--通過手寫,分析async await核心原理

来源:https://www.cnblogs.com/smileZAZ/archive/2022/09/22/16720415.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 async await 語法是 ES7出現的,是基於ES6的 promise和generator實現的 generator函數 在之前我專門講個generator的使用與原理實現,大家沒瞭解過的可以先看那個手寫generator核心 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

前言

async await 語法是 ES7出現的,是基於ES6的 promise和generator實現的

generator函數

在之前我專門講個generator的使用與原理實現,大家沒瞭解過的可以先看那個手寫generator核心原理,再也不怕面試官問我generator原理

這裡就不再贅述generator,專門的文章講專門的內容。

await在等待什麼

我們先看看下麵這代碼,這是async await的最簡單使用,await後面返回的是一個Promise對象:

async function getResult() {
    await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
            console.log(1);
        }, 1000);
    })
}

getResult()

但不知你有沒有想過一個問題,為什麼會等到返回的promise的對象的狀態為非pending的時候才會繼續往下執行,也就是resolve執行之後,才會繼續執行,就像下麵的代碼一樣

async function getResult() {
    await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
            console.log(1);
        }, 1000);
    })
    console.log(2);
}

getResult()

可以看到運行結果是先列印了1,再列印2了,也就是說明在返回的promise對象沒執行resolve()前,就一直在await,等它執行。然後再執行下麵的程式,那這個是怎麼實現的呢?

原理實現

我們看一下下麵的代碼,輸出順序是什麼?

async function getResult() {
    await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
            console.log(1);
        }, 1000);
    })
    

    await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2);
            console.log(2);
        }, 500);
    })

    await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(3);
            console.log(3);
        }, 100);
    })

}

getResult()

沒錯是 1,2,3.

那用generator函數專門來實現這個效果呢

我一開始這樣來實現:

function* getResult(params) {
    
    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
            console.log(1);
        }, 1000);
    })

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2);
            console.log(2);
        }, 500);
    })

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(3);
            console.log(3);
        }, 100);
    })
}
const gen = getResult()

gen.next();
gen.next();
gen.next();

但是發現列印順序是 3,2,1.明顯不對。

這裡的問題主要是三個 new Promise幾乎是同一時刻執行了。才會出現這種問題,所以需要等第一個promise執行完resolve之再執行下一個,所以要這麼實現

function* getResult(params) {

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
            console.log(1);
        }, 1000);
    })

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2);
            console.log(2);
        }, 500);
    })

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(3);
            console.log(3);
        }, 100);
    })
}
const gen = getResult()

gen.next().value.then(() => {
    gen.next().value.then(() => {
        gen.next();
    });
});

可以看到這樣就列印正常了。

特別 需要解釋下。gen.next().value 就是返回的promise對象,不理解的可以看看文首介紹的那篇generator的 文章。手寫generator核心原理,再也不怕面試官問我generator原理

優化

但是呢,總不能有多少個await,就要自己寫多少個嵌套吧,所以還是需要封裝一個函數,顯然,遞歸實現最簡單

function* getResult(params) {

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
            console.log(1);
        }, 1000);
    })

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2);
            console.log(2);
        }, 500);
    })

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(3);
            console.log(3);
        }, 100);
    })
}
const gen = getResult()

function co(g) {
    g.next().value.then(()=>{
        co(g)
    })
}

co(gen)

再來看看列印結果

可以發現成功執行了,但是為什麼報錯了?

這是因為generator方法會返回四次,最後一次的value是undefined。

而實際上返回第三次就表示已經返回done,代表結束了,所以,我們需要判斷是否是已經done了,不再讓它繼續遞歸

所以可以改成這樣

function* getResult(params) {

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
            console.log(1);
        }, 1000);
    })

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2);
            console.log(2);
        }, 500);
    })

    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(3);
            console.log(3);
        }, 100);
    })
}
const gen = getResult()

function co(g) {
    const nextObj = g.next();
    if (nextObj.done) {
        return;
    }
    nextObj.value.then(()=>{
        co(g)
    })
}

co(gen)

可以看到這樣就實現了。

完美,這個co其實也是大名鼎鼎的co函數的簡單寫法

本篇文章關於async 和 await的原理揭秘就到此為止了,再講下去就不禮貌了。

本文轉載於:

https://juejin.cn/post/7136424542238408718

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 近日, 在一個小型項目中, 遇到了一個觸及我知識盲區的bug. 項目用的是MySQL 5.7.25, 其中有一張表 config_data, 包含四個欄位, id, name, value, expireAt. 其中id為主鍵, name建有唯一索引, 表的用途大概就是存放一些有時效性的配置. 以上 ...
  • Hadoop的第一個產品是HDFS,可以說分散式文件存儲是分散式計算的基礎,也可見分散式文件存儲的重要性。如果我們將大數據計算比作烹飪,那麼數據就是食材,而Hadoop分散式文件系統HDFS就是燒菜的那口大鍋。這些年來,各種計算框架、各種演算法、各種應用場景不斷推陳出新,讓人眼花繚亂,但是大數據存儲的 ...
  • 前記 (可跳過這段來自本up的羅里吧嗦。。。) 在做上一個項目的時候,需要用到本地資料庫,以前做公司項目用的是輕量級資料庫Realm,做自己小項目用的是greenDAO,大學學的是SQL server,但是在flutter中,相關插件用的資料庫是SQLite(sqflite插件),但本人還沒接觸過S ...
  • 7月28日,在袋鼠雲2022產品發佈會上,袋鼠雲技術負責人思樞正式宣佈旗下產品「大數據基礎平臺EasyMR」發佈。 EasyMR是袋鼠雲自研的大數據基礎平臺,提供Hadoop、Hive、Spark、Trino、HBase、Kafka等組件,完全相容Apache開源生態;支持企業級安全管控,一鍵開啟L ...
  • 日常開發我們對一條DML語句較為熟悉,很多開發人員都瞭解sql的執行過程,比較熟悉,但是DDL是如何執行的呢,大部分開發人員可能不太關心,也認為沒必要瞭解,都交給DBA吧。 其實不然,瞭解一些能儘量避開一些ddl的坑,那麼下麵帶大家一起瞭解一下DDL執行的方式,。 ...
  • 2022-09-22 (4)set操作 ①添加操作(sadd): 例: sadd student A B ②查看操作(smembers):例: smembers student ③移除操作(srem):例: srem student A (5)zset(有序集合而且裡面的元素是不能重覆的)操作 ①添 ...
  • 最新版Other問題,請查看我最近的一片文章 我主要開發小型應用,周期較短,提審較頻,使用帳號也多,正常申請的三方購買的都有使用。提審時經常會遇到這樣那樣的問題,單獨說other-other,也曾遇到過不下10次,我將會導致出現這個問題的原因分為幾類: 1、帳號問題: 大概半年前的那段時間蘋果對帳號 ...
  • AU上傳ipa出現下圖紅框提示說明成功上傳,如果App Store後臺沒有出現構建版本, 請登錄 apple賬號對應的郵箱查看反饋,特別留意垃圾郵箱,無論成功還是失敗,apple都會發郵件 一、首先登錄iTunes Connect 後臺、查看ipa構建情況 https://appstoreconne ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...