promise async await使用

在文章 ES7 中的 async await 中介紹了 async/await。本文將分析介紹當 async/await 遇上 forEach 出現的一些問題和解決方案。

問題描述

 
                var getNumbers = () => { 
               
                return Promise.resolve([1, 2, 3]) 
               
                 } 
               
                var multi = num => { 
               
                return new Promise((resolve, reject) => { 
               
                 setTimeout( 
                () => { 
               
                if (num) { 
               
                 resolve(num * num) 
               
                 }  
                else { 
               
                 reject( 
                new Error('num not specified')) 
               
                 } 
               
                 },  
                1000) 
               
                 }) 
               
                 } 
               
                async function test () { 
               
                var nums = await getNumbers() 
               
                 nums.forEach( 
                async x => { 
               
                var res = await multi(x) 
               
                console.log(res) 
               
                 }) 
               
                 } 
               
                 test()

在這個例子中，通過 forEach 遍歷的將每一個數字都執行 multi 操作。代碼執行的結果是：1 秒后，一次性輸出1，4，9。這個結果和我們的預期有些區別，我們是希望每間隔 1 秒，然后依次輸出 1，4，9；所以當前代碼應該是並行執行了，而我們期望的應該是串行執行。

問題分析

JavaScript 中的循環數組遍歷

在 JavaScript 中提供了如下四種循環遍歷數組元素的方式：

for
這是循環遍歷數組元素最簡單的方式

 
                  for(i = 0; i < arr.length; i++) { 
                 
                   console.log(arr[i]); 
                 
                   }

for-in
for-in 語句以任意順序遍歷一個對象的可枚舉屬性，對於數組即是數組下標，對於對象即是對象的 key 值。注意 for-in 遍歷返回的對象屬性都是字符串類型，即使是數組下標，也是字符串 “0”, “1”, “2” 等等。[不推薦使用 for-in 語句]

 
                  for (var index in myArray) { 
                 
                   console. 
                  log(myArray[index]); 
                 
                   }

forEach
forEach 方法用於調用數組的每個元素，並將元素傳遞給回調函數；注意在回調函數中無法使用 break 跳出當前循環，也無法使用 return 返回值

                   myArray.forEach( 
                  function (value) { 
                 
                   console. 
                  log(value); 
                 
                   });

for-of
for-of 語句為各種 collection 集合對象專門定制的，遍歷集合對象的屬性值，注意和 for-in 的區別

 
                  for (var value of myArray) { 
                 
                   console.log( 
                  value); 
                 
                   }

分析問題

在本例中 forEach 的回調函數是一個異步函數，異步函數中包含一個 await 等待 Promise 返回結果，我們期望數組元素串行執行這個異步操作，但是實際卻是並行執行了。

forEach 的 polyfill 參考：MDN-Array.prototype.forEach()，簡單點理解：

                 Array.prototype.forEach = function (callback) { 
               
                // this represents our array 
               
                for (let index = 0; index < this.length; index++) { 
               
                // We call the callback for each entry 
               
                 callback( 
                this[index], index, this) 
               
                 } 
               
                 }

相當於 for 循環執行了這個異步函數，所以是並行執行，導致了一次性全部輸出結果：1，4，9

 
                async function test () { 
               
                var nums = await getNumbers() 
               
                // nums.forEach(async x => { 
               
                // var res = await multi(x) 
               
                // console.log(res) 
               
                // }) 
               
                for(let index = 0; index < nums.length; index++) { 
               
                 ( 
                async x => { 
               
                var res = await multi(x) 
               
                console.log(res) 
               
                 })(nums[index]) 
               
                 } 
               
                 }

解決問題

方式一

我們可以改造一下 forEach，確保每一個異步的回調執行完成后，才執行下一個

 
                async function asyncForEach(array, callback) { 
               
                for (let index = 0; index < array.length; index++) { 
               
                await callback(array[index], index, array) 
               
                 } 
               
                 } 
               
                async function test () { 
               
                var nums = await getNumbers() 
               
                 asyncForEach(nums,  
                async x => { 
               
                var res = await multi(x) 
               
                console.log(res) 
               
                 }) 
               
                 }

方式二

使用 for-of 替代 for-each。

for-of 可以遍歷各種集合對象的屬性值，要求被遍歷的對象需要實現迭代器 (iterator) 方法，例如 myObject[Symbol.iterator]() 用於告知 JS 引擎如何遍歷該對象。一個擁有 [Symbol.iterator]() 方法的對象被認為是可遍歷的。

 
                var zeroesForeverIterator = { 
               
                 [ 
                Symbol.iterator]: function () { 
               
                return this; 
               
                 }, 
               
                next: function () { 
               
                return {done: false, value: 0}; 
               
                 } 
               
                 };

如上就是一個最簡單的迭代器對象；for-of 遍歷對象時，先調用遍歷對象的迭代器方法 [Symbol.iterator]()，該方法返回一個迭代器對象(迭代器對象中包含一個 next 方法)；然后調用該迭代器對象上的 next 方法。

每次調用 next 方法都返回一個對象，其中 done 和 value 屬性用來表示遍歷是否結束和當前遍歷的屬性值，當 done 的值為 true 時，遍歷就停止了。

 
                for (VAR of ITERABLE) { 
               
                 STATEMENTS 
               
                 }

等價於：

 
                var $iterator = ITERABLE[Symbol.iterator](); 
               
                var $result = $iterator.next(); 
               
                while (!$result.done) { 
               
                VAR = $result.value; 
               
                STATEMENTS 
               
                $result = $iterator.next(); 
               
                 }

由此可以知道 for-of 和 forEach 遍歷元素時處理的方式是不同的。使用 for-of 替代 for-each 后代碼為：

 
                async function test () { 
               
                var nums = await getNumbers() 
               
                for(let x of nums) { 
               
                var res = await multi(x) 
               
                console.log(res) 
               
                 } 
               
                 }

之前寫了篇文《這一次，徹底理解Promise原理》，剖析了Promise的相關原理,反應不錯，這次把學習到的相關的知識也寫下。

我們都知道，Promise解決了回調地獄的問題，但是如果遇到復雜的業務，代碼里面會包含大量的 then 函數，使得代碼依然不是太容易閱讀。

基於這個原因，ES7 引入了 async/await，這是 JavaScript 異步編程的一個重大改進，提供了在不阻塞主線程的情況下使用同步代碼實現異步訪問資源的能力，並且使得代碼邏輯更加清晰，而且還支持 try-catch 來捕獲異常，非常符合人的線性思維。

所以，要研究一下如何實現 async/await。總的來說，async 是Generator函數的語法糖，並對Generator函數進行了改進。

Generator函數簡介

Generator 函數是一個狀態機，封裝了多個內部狀態。執行 Generator 函數會返回一個遍歷器對象，可以依次遍歷 Generator 函數內部的每一個狀態，但是只有調用next方法才會遍歷下一個內部狀態，所以其實提供了一種可以暫停執行的函數。yield表達式就是暫停標志。

有這樣一段代碼：

function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator(); 復制代碼

調用及運行結果：

hw.next()// { value: 'hello', done: false } hw.next()// { value: 'world', done: false } hw.next()// { value: 'ending', done: true } hw.next()// { value: undefined, done: true } 復制代碼

由結果可以看出，Generator函數被調用時並不會執行，只有當調用next方法、內部指針指向該語句時才會執行，即函數可以暫停，也可以恢復執行。每次調用遍歷器對象的next方法，就會返回一個有着value和done兩個屬性的對象。value屬性表示當前的內部狀態的值，是yield表達式后面那個表達式的值；done屬性是一個布爾值，表示是否遍歷結束。

Generator函數暫停恢復執行原理

要搞懂函數為何能暫停和恢復，那你首先要了解協程的概念。

一個線程（或函數）執行到一半，可以暫停執行，將執行權交給另一個線程（或函數），等到稍后收回執行權的時候，再恢復執行。這種可以並行執行、交換執行權的線程（或函數），就稱為協程。

協程是一種比線程更加輕量級的存在。普通線程是搶先式的，會爭奪cpu資源，而協程是合作的，可以把協程看成是跑在線程上的任務，一個線程上可以存在多個協程，但是在線程上同時只能執行一個協程。它的運行流程大致如下：

協程A開始執行
協程A執行到某個階段，進入暫停，執行權轉移到協程B
協程B執行完成或暫停，將執行權交還A
協程A恢復執行

協程遇到yield命令就暫停，等到執行權返回，再從暫停的地方繼續往后執行。它的最大優點，就是代碼的寫法非常像同步操作，如果去除yield命令，簡直一模一樣。

執行器

通常，我們把執行生成器的代碼封裝成一個函數，並把這個執行生成器代碼的函數稱為執行器,co 模塊就是一個著名的執行器。

Generator 是一個異步操作的容器。它的自動執行需要一種機制，當異步操作有了結果，能夠自動交回執行權。兩種方法可以做到這一點：

回調函數。將異步操作包裝成 Thunk 函數，在回調函數里面交回執行權。
Promise 對象。將異步操作包裝成 Promise 對象，用then方法交回執行權。

一個基於 Promise 對象的簡單自動執行器：

function run(gen){ var g = gen(); function next(data){ var result = g.next(data); if (result.done) return result.value; result.value.then(function(data){ next(data); }); } next(); } 復制代碼

我們使用時，可以這樣使用即可，


function* foo() { let response1 = yield fetch('https://xxx') //返回promise對象 console.log('response1') console.log(response1) let response2 = yield fetch('https://xxx') //返回promise對象 console.log('response2') console.log(response2) } run(foo); 復制代碼

上面代碼中，只要 Generator 函數還沒執行到最后一步，next函數就調用自身，以此實現自動執行。通過使用生成器配合執行器，就能實現使用同步的方式寫出異步代碼了，這樣也大大加強了代碼的可讀性。

async/await

ES7 中引入了 async/await，這種方式能夠徹底告別執行器和生成器，實現更加直觀簡潔的代碼。根據 MDN 定義，async 是一個通過異步執行並隱式返回 Promise 作為結果的函數。可以說async 是Generator函數的語法糖，並對Generator函數進行了改進。

前文中的代碼，用async實現是這樣：

const foo = async () => { let response1 = await fetch('https://xxx') console.log('response1') console.log(response1) let response2 = await fetch('https://xxx') console.log('response2') console.log(response2) } 復制代碼

一比較就會發現，async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await，僅此而已。

async函數對 Generator 函數的改進，體現在以下四點：

內置執行器。Generator 函數的執行必須依靠執行器，而 async 函數自帶執行器，無需手動執行 next() 方法。
更好的語義。async和await，比起星號和yield，語義更清楚了。async表示函數里有異步操作，await表示緊跟在后面的表達式需要等待結果。
更廣的適用性。co模塊約定，yield命令后面只能是 Thunk 函數或 Promise 對象，而async函數的await命令后面，可以是 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時會自動轉成立即 resolved 的 Promise 對象）。
返回值是 Promise。async 函數返回值是 Promise 對象，比 Generator 函數返回的 Iterator 對象方便，可以直接使用 then() 方法進行調用。

這里的重點是自帶了執行器，相當於把我們要額外做的(寫執行器/依賴co模塊)都封裝了在內部。比如：

async function fn(args) { // ... } 復制代碼

等同於：

function fn(args) { return spawn(function* () { // ... }); } function spawn(genF) { //spawn函數就是自動執行器，跟簡單版的思路是一樣的，多了Promise和容錯處理 return new Promise(function(resolve, reject) { const gen = genF(); function step(nextF) { let next; try { next = nextF(); } catch(e) { return reject(e); } if(next.done) { return resolve(next.value); } Promise.resolve(next.value).then(function(v) { step(function() { return gen.next(v); }); }, function(e) { step(function() { return gen.throw(e); }); }); } step(function() { return gen.next(undefined); }); }); } 復制代碼

async/await執行順序

通過上面的分析，我們知道async隱式返回 Promise 作為結果的函數,那么可以簡單理解為，await后面的函數執行完畢時，await會產生一個微任務(Promise.then是微任務)。但是我們要注意這個微任務產生的時機，它是執行完await之后，直接跳出async函數，執行其他代碼(此處就是協程的運作，A暫停執行，控制權交給B)。其他代碼執行完畢后，再回到async函數去執行剩下的代碼，然后把await后面的代碼注冊到微任務隊列當中。我們來看個例子：

console.log('script start') async function async1() { await async2() console.log('async1 end') } async function async2() { console.log('async2 end') } async1() setTimeout(function() { console.log('setTimeout') }, 0) new Promise(resolve => { console.log('Promise') resolve() }) .then(function() { console.log('promise1') }) .then(function() { console.log('promise2') }) console.log('script end') // script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout 復制代碼

分析這段代碼：

執行代碼，輸出script start。
執行async1(),會調用async2(),然后輸出async2 end,此時將會保留async1函數的上下文，然后跳出async1函數。
遇到setTimeout，產生一個宏任務
執行Promise，輸出Promise。遇到then，產生第一個微任務
繼續執行代碼，輸出script end
代碼邏輯執行完畢(當前宏任務執行完畢)，開始執行當前宏任務產生的微任務隊列，輸出promise1，該微任務遇到then，產生一個新的微任務
執行產生的微任務，輸出promise2,當前微任務隊列執行完畢。執行權回到async1
執行await,實際上會產生一個promise返回，即

let promise_ = new Promise((resolve,reject){ resolve(undefined)}) 復制代碼

執行完成，執行await后面的語句，輸出async1 end

最后，執行下一個宏任務，即執行setTimeout，輸出setTimeout

注意

新版的chrome瀏覽器中不是如上打印的，因為chrome優化了,await變得更快了,輸出為:

// script start => async2 end => Promise => script end => async1 end => promise1 => promise2 => setTimeout 復制代碼

但是這種做法其實是違法了規范的，當然規范也是可以更改的，這是 V8 團隊的一個 PR ，目前新版打印已經修改。

知乎上也有相關討論,可以看看 www.zhihu.com/question/26…

參考資料

極客時間《瀏覽器工作原理與實踐》
阮一峰《es6入門》

Promise資料

《這一次，徹底理解Promise原理》

最后

歡迎加我微信(winty230)，拉你進技術群，長期交流學習...
歡迎關注「前端Q」,認真學前端，做個有專業的技術人...