關(guān)注「松寶寫(xiě)代碼」舱馅，精選好文刀荒，每日一題
?時(shí)間永遠(yuǎn)是自己的
每分每秒也都是為自己的將來(lái)鋪墊和增值
作者：saucxs ｜ songEagle
一、前言
2020.12.23 日剛立的 flag干毅，每日一題硝逢，題目類(lèi)型不限制，可以是：算法題叫乌，面試題憨奸，闡述題等等排宰。
本文是「每日一題」第 6 題：面試官問(wèn)：Async/Await 如何通過(guò)同步的方式實(shí)現(xiàn)異步那婉？
[圖片上傳失敗...(image-42b49d-1611417496818)]
往期「每日一題」：
二韭脊、Async/Await 如何通過(guò)同步的方式實(shí)現(xiàn)異步沪羔？
這個(gè)題目本身不是特別難象浑，只能說(shuō)是作為社招的基礎(chǔ)面試題，但是如果想回答好這道題也不是很容易篓吁。
不信接著往下看：
1、概括的說(shuō)
一個(gè)函數(shù)如果加上 async 冻押，那么該函數(shù)就會(huì)返回一個(gè) Promise翼雀。
await 只能在 async 函數(shù)中使用狼渊，可以把 async 看成將函數(shù)返回值使用 Promise.resolve() 包裹了下类垦。
async 和 await 相比直接使用 Promise 來(lái)說(shuō)蚤认，優(yōu)勢(shì)在于處理 then 的調(diào)用鏈，能夠更清晰準(zhǔn)確的寫(xiě)出代碼蘸嘶。缺點(diǎn)在于濫用 await 可能會(huì)導(dǎo)致性能問(wèn)題训唱，因?yàn)?await 會(huì)阻塞代碼况增，也許之后的異步代碼并不依賴(lài)于前者训挡，但仍然需要等待前者完成澜薄，導(dǎo)致代碼失去了并發(fā)性。
我們來(lái)看一下代碼實(shí)例：
async function test() {
return "1";
}
console.log(test()); // -> Promise {<resolved>: "1"}
我們?cè)賮?lái)看一下這個(gè)實(shí)例：
function sleep() {
return new Promise(resolve => {
setTimeout(() => {
console.log('finish')
resolve("sleep");
}, 2000);
});
}
async function test() {
let value = await sleep();
console.log("object");
}
test()
上面代碼會(huì)先打印 finish 然后再打印 object 弥锄。因?yàn)?await 會(huì)等待 sleep 函數(shù) resolve ，所以即使后面是同步代碼饭庞，也不會(huì)先去執(zhí)行同步代碼再來(lái)執(zhí)行異步代碼舟山。
2、亮點(diǎn)回答
首先寒矿，js 是單線(xiàn)程的（重復(fù)三遍）符相，所謂單線(xiàn)程啊终，
意思就是說(shuō)：執(zhí)行代碼是一行一行的往下走（即所謂的同步）蓝牲，
如果上面的沒(méi)執(zhí)行完泰讽，那就只能等著已卸。
還是舉個(gè)例子：
function test() {
let d = Date.now();
for (let i = 0; i < 1e8; i++) {}
console.log(Date.now() - d); // 62ms左右
}
function test1() {
let d = Date.now();
console.log(Date.now() - d); // 0
}
test();
test1();
上面僅僅是一個(gè) for 循環(huán)，而在實(shí)際應(yīng)用中翎嫡，會(huì)有大量的網(wǎng)絡(luò)請(qǐng)求惑申，它的響應(yīng)時(shí)間是不確定的圈驼，這種情況下也要等待嗎望几？
顯然是不行的，因而 js 設(shè)計(jì)了異步惕味，即 發(fā)起網(wǎng)絡(luò)請(qǐng)求（諸如 IO 操作名挥，定時(shí)器）禀倔，由于需要等服務(wù)器響應(yīng)参淫，就先不理會(huì)涎才，而是去做其他的事兒憔维，等請(qǐng)求返回了結(jié)果的時(shí)候再說(shuō)（即異步）。
那么如何實(shí)現(xiàn)異步呢检吆？其實(shí)我們平時(shí)已經(jīng)在大量使用了蹭沛，那就是 callback摊灭，實(shí)現(xiàn)異步的核心就是回調(diào)鉤子帚呼，將 cb 作為參數(shù)傳遞給異步執(zhí)行函數(shù)煤杀，當(dāng)有了結(jié)果后在觸發(fā) cb沪哺。想了解更多辜妓，可以去看看 event-loop 機(jī)制。
之前這種函數(shù)嵌套酪夷，大量的回調(diào)函數(shù)晚岭，使代碼閱讀起來(lái)晦澀難懂腥例，不直觀燎竖，形象的稱(chēng)之為回調(diào)地獄（callback hell）构回，所以為了在寫(xiě)法上能更通俗一點(diǎn)纤掸，es6+陸續(xù)出現(xiàn)了 Promise借跪、Generator掏愁、Async/await果港，力求在寫(xiě)法上簡(jiǎn)潔明了辛掠，可讀性強(qiáng)萝衩。
async/await 是參照 Generator 封裝的一套異步處理方案欠气，可以理解為 Generator 的語(yǔ)法糖预柒，
所以了解 async/await 就不得不講一講 Generator,以后我們可以講一下這個(gè)。
而 Generator 又依賴(lài)于迭代器Iterator憔古，以后我們可以講一下這個(gè)淋袖。
終于找到源頭了：?jiǎn)蜗蜴湵砑赐耄院罂梢灾v一下這個(gè)剥懒。
可以看到初橘，async function 代替了 function*保檐，await 代替了 yield夜只，同時(shí)也無(wú)需自己手寫(xiě)一個(gè)自動(dòng)執(zhí)行器 run 了
現(xiàn)在再來(lái)看看async/await 的特點(diǎn)：
- 當(dāng) await 后面跟的是 Promise 對(duì)象時(shí)盐肃，才會(huì)異步執(zhí)行砸王，其它類(lèi)型的數(shù)據(jù)會(huì)同步執(zhí)行
- 返回的仍然是個(gè) Promise 對(duì)象，上面代碼中的 return 'done'; 會(huì)直接被下面 then 函數(shù)接收到
3耘成、進(jìn)階回答
async/await 是參照 Generator 封裝的一套異步處理方案瘪菌，可以理解為 Generator 的語(yǔ)法糖师妙，
所以了解 async/await 就不得不講一講 Generator,
而 Generator 又依賴(lài)于迭代器Iterator默穴，
所以就得先講一講 Iterator,
而 Iterator 的思想呢又來(lái)源于單向鏈表蓄诽，
終于找到源頭了：?jiǎn)蜗蜴湵?/p>
3.1 什么是單向鏈表仑氛？
我們看一下wiki的說(shuō)明：鏈表（Linked list）是一種常見(jiàn)的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)锯岖，是一種線(xiàn)性表出吹，但是并不會(huì)按線(xiàn)性的順序儲(chǔ)存數(shù)據(jù)趋箩，而是在每一個(gè)節(jié)點(diǎn)里存到下一個(gè)節(jié)點(diǎn)的指針（Pointer）叫确。由于不必須按順序儲(chǔ)存竹勉，鏈表在插入的時(shí)候可以達(dá)到 o(1)的復(fù)雜度次乓，比另一種線(xiàn)性表順序表快得多票腰，但是查找一個(gè)節(jié)點(diǎn)或者訪(fǎng)問(wèn)特定編號(hào)的節(jié)點(diǎn)則需要 o(n)的時(shí)間杏慰，而順序表響應(yīng)的時(shí)間復(fù)雜度分別是 o(logn)和 o(1)炼鞠。
總結(jié)一下鏈表優(yōu)點(diǎn)：
- 無(wú)需預(yù)先分配內(nèi)存
- 插入/刪除節(jié)點(diǎn)不影響其他節(jié)點(diǎn)谒主，效率高（典型的例子：git commit）
單向鏈表：是鏈表中最簡(jiǎn)單的一種霎肯，它包含兩個(gè)域，一個(gè)信息域和一個(gè)指針域肖抱。這個(gè)鏈接指向列表中的下一個(gè)節(jié)點(diǎn)，而最后一個(gè)節(jié)點(diǎn)則指向一個(gè)空值意述。
[圖片上傳失敗...(image-2b5c12-1611417496818)]
一個(gè)單向鏈表包含兩個(gè)值: 當(dāng)前節(jié)點(diǎn)的值和一個(gè)指向下一個(gè)節(jié)點(diǎn)的鏈接
單鏈特點(diǎn)：節(jié)點(diǎn)的鏈接方向是單向的荤崇；相對(duì)于數(shù)組來(lái)說(shuō)术荤，單鏈表的的隨機(jī)訪(fǎng)問(wèn)速度較慢瓣戚，但是單鏈表刪除/添加數(shù)據(jù)的效率很高子库。
理解 js 原型鏈/作用域鏈的話(huà)仑嗅，理解這個(gè)很容易张症，他們是相通的俗他。
3.2 Iterator
Iterator 翻譯過(guò)來(lái)就是迭代器（遍歷器）讓我們先來(lái)看看它的遍歷過(guò)程(類(lèi)似于單向鏈表)：
- 創(chuàng)建一個(gè)指針對(duì)象郭变，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置:
- 第一次調(diào)用指針對(duì)象的 next 方法涯保，將指針指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
- 第二次調(diào)用指針對(duì)象的 next 方法夕春，將指針指向數(shù)據(jù)結(jié)構(gòu)的第二個(gè)成員
- 不斷的調(diào)用指針對(duì)象的 next 方法片排，直到它指向數(shù)據(jù)結(jié)構(gòu)的結(jié)束位置
一個(gè)對(duì)象要變成可迭代的，必須實(shí)現(xiàn) @@iterator 方法迫卢，即對(duì)象（或它原型鏈上的某個(gè)對(duì)象）必須有一個(gè)名字是 Symbol.iterator 的屬性（原生具有該屬性的有：字符串乾蛤、數(shù)組家卖、類(lèi)數(shù)組的對(duì)象上荡、Set 和 Map）：
當(dāng)一個(gè)對(duì)象需要被迭代的時(shí)候（比如開(kāi)始用于一個(gè) for..of 循環(huán)中）酪捡，它的 @@iterator 方法被調(diào)用并且無(wú)參數(shù)沛善，然后返回一個(gè)用于在迭代中獲得值的迭代器
3.3 Generator
Generator：生成器對(duì)象是生成器函數(shù)（GeneratorFunction）返回的，它符合可迭代協(xié)議和迭代器協(xié)議议薪，既是迭代器也是可迭代對(duì)象，可以調(diào)用 next 方法偏序，但它不是函數(shù)焊唬，更不是構(gòu)造函數(shù).
調(diào)用一個(gè)生成器函數(shù)并不會(huì)馬上執(zhí)行它里面的語(yǔ)句赶促，而是返回一個(gè)這個(gè)生成器的迭代器對(duì)象鸥滨，當(dāng)這個(gè)迭代器的 next() 方法被首次（后續(xù)）調(diào)用時(shí)谤祖，其內(nèi)的語(yǔ)句會(huì)執(zhí)行到第一個(gè)（后續(xù)）出現(xiàn) yield 的位置為止（讓執(zhí)行處于暫停狀）粥喜，yield 后緊跟迭代器要返回的值额湘∷跆簦或者如果用的是 yield*（多了個(gè)星號(hào)）供置，則表示將執(zhí)行權(quán)移交給另一個(gè)生成器函數(shù)（當(dāng)前生成器暫停執(zhí)行），調(diào)用 next() （再啟動(dòng)）方法時(shí)坊罢，如果傳入了參數(shù)活孩，那么這個(gè)參數(shù)會(huì)作為上一條執(zhí)行的 yield 語(yǔ)句的返回值，
我們來(lái)總結(jié)一下 Generator 的本質(zhì)询兴，暫停诗舰，它會(huì)讓程序執(zhí)行到指定位置先暫停（yield）眶根，然后再啟動(dòng)（next）属百，再暫停（yield）诸老，再啟動(dòng)（next）蹄衷，而這個(gè)暫停就很容易讓它和異步操作產(chǎn)生聯(lián)系厘肮，因?yàn)槲覀冊(cè)谔幚懋惒綍r(shí)：開(kāi)始異步處理（網(wǎng)絡(luò)求情耍属、IO 操作）厚骗，然后暫停一下领舰，等處理完了冲秽，再該干嘛干嘛锉桑。不過(guò)值得注意的是民轴，js 是單線(xiàn)程的（又重復(fù)了三遍）后裸，異步還是異步，callback 還是 callback旦部，不會(huì)因?yàn)?Generator 而有任何改變士八。
3.4 Async/Await
async/await 是 Generator 的語(yǔ)法糖梁呈，就是一個(gè)自執(zhí)行的generate函數(shù)蝗茁。利用generate函數(shù)的特性把異步的代碼寫(xiě)成“同步”的形式。
覺(jué)得這樣是不是可以清晰點(diǎn)了颈嚼。
Reference
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%8D%8F%E8%AE%AE
- http://es6.ruanyifeng.com/#docs/iterator
- http://es6.ruanyifeng.com/#docs/async
謝謝支持
1阻课、文章喜歡的話(huà)可以「分享限煞，點(diǎn)贊，在看」三連哦绊序。
2骤公、作者昵稱(chēng)：saucxs凌节，songEagle倍奢，松寶寫(xiě)代碼卒煞∨显＃「松寶寫(xiě)代碼」公眾號(hào)作者扮饶，每日一題甜无，實(shí)驗(yàn)室等岂丘。一個(gè)愛(ài)好折騰元潘，致力于全棧翩概，正在努力成長(zhǎng)的字節(jié)跳動(dòng)工程師，星辰大海牍鞠，未來(lái)可期难述。內(nèi)推字節(jié)跳動(dòng)各個(gè)部門(mén)各個(gè)崗位胁后。
3、長(zhǎng)按下面圖片文虏，關(guān)注「松寶寫(xiě)代碼」年鸳，是獲取開(kāi)發(fā)知識(shí)體系構(gòu)建搔确，精選文章膳算，項(xiàng)目實(shí)戰(zhàn)畦幢，實(shí)驗(yàn)室缆蝉，每日一道面試題黍瞧，進(jìn)階學(xué)習(xí)印颤，思考職業(yè)發(fā)展年局，涉及到JavaScript矢否，Node，Vue屑彻，React粪薛，瀏覽器汗菜，http陨界，算法痛阻，端相關(guān)阱当，小程序等領(lǐng)域录淡，希望可以幫助到你嫉戚，我們一起成長(zhǎng)～
[圖片上傳失敗...(image-23aaf0-1611417496818)]
字節(jié)內(nèi)推福利
- 回復(fù)「校招」獲取內(nèi)推碼
- 回復(fù)「社招」獲取內(nèi)推
- 回復(fù)「實(shí)習(xí)生」獲取內(nèi)推
后續(xù)會(huì)有更多福利
學(xué)習(xí)資料福利
回復(fù)「算法」獲取算法學(xué)習(xí)資料
往期「每日一題」
1彬檀、JavaScript && ES6
第 28 題：【每日一題】(28題)面試官:原型鏈與構(gòu)造函數(shù)結(jié)合方法繼承與原型式繼承的區(qū)別努潘？
第 17 題：【每日一題】(17題)面試官問(wèn)：JS中事件流娃闲，事件處理程序皇帮，事件對(duì)象的理解属拾？
第 13 題[每日一題]面試官問(wèn)：['1', '2', '3'].map(parseInt)輸出褒颈，原因，以及延伸应结？
第 6 題[每日一題]面試官問(wèn)：Async/Await 如何通過(guò)同步的方式實(shí)現(xiàn)異步玷坠？
第 3 道「「每日一題」面試官問(wèn)你對(duì) Promise 的理解八堡？可能是需要你能手動(dòng)實(shí)現(xiàn)各個(gè)特性」
