[完結篇] - 理解非同步之美 --- promise與async await （三）

天下沒有不散的宴席

**這個系列到這裡應該就是最後一節了，**前兩章著重講了promise，為什麼著重講promise呢？因為在用法上promise要比async await難一些，而且promise本身又不是一個語法糖。沒有掌握的時候用起來就會有很多顧慮，async await卻沒有這種顧慮，用法簡單、語義清晰。

基礎預熱：你好，JavaScript非同步程式設計---- 理解JavaScript非同步的美妙

理解非同步之美：Promise與async await（一）

理解非同步之美：Promise 與 async await（二）

下面就要開始學習async await了

不講講迭代器模式總覺得怪怪的

對於java語言來說，迭代器是一個很基本的模式，list與set結構都內建了迭代器。

但是javascript並沒有這種結果（ps：ES6提供了set，而且也可以實現迭代器），但是我們對這種模式實用的並不是特別多。 迭代器模式是指提供一種方法順序訪問一個聚合物件中的各個元素，而又不需要暴露該物件的內部表示。

so：迭代器就是在不暴露物件的內部表示的情況下，能夠遍歷整個元素

核心嘛就是：不暴露內部，可以遍歷內部

下面我們就來實現一個簡單的迭代器

// 在資料獲取的時候沒有選擇深拷貝內容，
// 對於引用型別進行處理會有問題
// 這裡只是演示簡化了一點
function Iterdtor(arr){
	let data = [];
    if(!Array.isArray(arr)){
        data = [arr];
    }else{
        data = arr;
    }
    let length = data.length;
    let index = 0;
    // 迭代器的核心next
    // 當呼叫next的時候會開始輸出內部物件的下一項
    this.next = function(){
    	let result = {};
    	result.value = data[index];
    	result.done = index === length-1? true : false;
    	if(index !== length){
            index++;
            return result;
    	}
    	// 當內容已經沒有了的時候返回一個字串提示
    	return 'data is all done'
    };
}
let arr = [1,2,3,4,5,6];
// 生成一個迭代器物件。
let iterdtor = new Iterdtor(arr);
iterdtor.next()
iterdtor.next()
複製程式碼

這就符合迭代器模式的特點，並沒有暴露內部的物件， 通過next的方法可以遍歷內部物件。

說到現在很多人應該還沒理解為什麼要說迭代器。

Generator函式執行後會返回一個迭代器

async函式是Generator的語法糖

這兩個理由是不是一下子就說明寫迭代器是很有用處的。

書寫一個簡單的Generator函式

function *Iterdtor(){
	console.log(1);
	yield '123';
	console.log(2);
	yield '234';
	console.log(3);
	return '345'
}
let iterator = Iterdtor();
複製程式碼

我們執行了一下Generator函式返回一個迭代器。通過next方法，可以阻塞性的去執行Generator的程式碼。

一說到阻塞大家就想到同步等待阻塞執行緒導致頁面十分卡頓，明明不是一件很好的事情，為什麼要用這種東西呢？

下面我們就聊聊這種阻塞性的方式有什麼好處呢？

在Generator函式中，迭代器呼叫next函式後，會一直執行到有yield標示的位置停止。等待next的下一次呼叫後，程式碼會繼續執行到下個yield表示。沒有yield的話就一執行到最後return的位置（沒有return就會一直執行完所有的程式碼，這句話好像是個廢話）。

程式碼就像擠牙膏一樣，擠一點出一點擠一點出一點，最後沒有卡頓的地方，一口氣擠到底。

所以說如果實用Generator的方式來處理非同步的請求會是怎樣的一種感覺。

// 虛擬碼
let ajaxSign = false;
function *ajaxGetSomething(){
    ajaxSomethingOne().then(res=>{ajaxSign = true})
    yield
    ajaxSign = false;
    ajaxSomethingSecond().then(res=>{ajaxSign = true})
}
let iterator = ajaxGetSomething();
iterator.next();
while(ajaxSign){
    iterator.next()
}
複製程式碼

如果以這種方式來實現非同步的請求會怎樣，

1:有一個標誌代表ajax請求完成。

2:當標誌為true時代表ajax執行完成，可以進行下一個事件了。

3:當標誌為false程式碼ajax還未執行完成，繼續阻塞下面的程式碼。

4:當第一個標誌為true時，執行next（），然後發現到下一個yield之間有非同步的程式碼，將標誌設定為false，開始執行ajax的事情，阻塞著後面的內容。

5:當ajax完成後把標誌設定為true，開始2的內容做的事情不斷執行著直到整個迭代器完成。

粗俗的while迴圈實現next的呼叫是不可取的（畢竟虛擬碼）

這種方式讓我們體會到另一種處理非同步的方式，就是阻塞時的去執行多個序列的非同步任務，這樣可以感受同步的寫法去書寫非同步的程式碼，也就不會在不合適的時間去拿去非同步的產生的資料，你阻塞著執行緒，你不等他執行完，你取值的操作也做不了呀。

如何實用async await

說到這裡如何使用他們就比較清晰明瞭了吧

async function ajaxGetData(){
    xxxx
    dosomething()
    await ajaxGetDataFirst()
    dosomething()
    await ajaxGetDataSecond()
    dosomething()
    xxx
}
ajaxGetData()
複製程式碼

這個時候我們使用async函式來處理非同步效果就很清晰了，

我們做了一些事情，然後到一個非同步的ajax請求後，等待ajaxGetDataFirst這個非同步的事件執行完畢後，開始繼續做一些事情，到了第二個ajax非同步請求ajaxGetDataSecond（），開始執行阻塞住函式的執行，等待非同步事件執行完畢後就繼續做下面的事情。用await關鍵字的時候就是在告訴下面的程式碼，這塊你得給我等著，wait我執行完了才能輪到你 understand？總之await吊極了。

await在什麼時候可以用？ 只有在async函式體內部使用，而且這個作用範圍是不可以繼承下去的。

在promise中怎麼使用async函式

 new Promsie(async (resolve,reject)=>{
     await xxx
 })
 // 這樣的async才能使await有效果，書寫在promise之外的話await就會像上面一樣報錯
複製程式碼

await 可以接收一個同步的事情嗎？繼續執行下去不阻塞

async函式的返回值是什麼？ async函式的返回值是一個promise物件,

？？？？ what 返回了一個promise物件。這有啥用呢？請聽下面分析 這就代表著你在執行完所有的非同步請求後還可以繼續將你需要的結果用return的方式儲存在一個promise物件中。promise的用處是什麼？他好像可以儲存一個值在指定情況下觸發一個回撥函式（這個不理解的可以看一下上一篇內容哈）所以這可以幫助我們把內部的非同步請求的資料丟擲到函式外部來。

下面的使用場景：

在使用場景中，我們有的時候需要非同步的一個結果，比如ajax請求的結果，這個時候我們希望得到這個非同步的結果怎麼辦？ 這個時候await可以幫助我，在執行完非同步的操作的時候拿到結果，在拿到結果後順序執行下去。直到return的時候把這個結果 return出去，

以下兩種寫法我們是都可以使用的

async function fn(){
	let result = await new Promise((resolve,reject)=>{
		setTimeout(()=>{
            resolve(100)
		},10000)
	}).then(res=>{
			return res
		})
	return result
}
let a = fn()
複製程式碼

async function fn(){
	let result = await new Promise((resolve,reject)=>{
		setTimeout(()=>{
            resolve(100)
		},10000)
	})
	return result
}
let a = fn()
複製程式碼

這兩種方式都可以等待非同步的promise執行完成之後再賦值給result，這個時候，我們返回的a就是一個pending狀態的promise物件，上一章節我們講過了promise的基本原理，後面的操作我就不多提了，所以得到你想要的內容的promsie你就會操作了。

這個時候我們async內的非同步操作的結果自然而然的可以丟擲到函式外部來使用，可以解決很多的業務的封裝問題了。

async 與 Generator的區別

async 與Generator的區別是什麼？

async是Generator的語法糖，Generator是可以用來實現async的，用Generator來實現async的核心就是實現這種不需next呼叫自執行的內容，這是我以後要進行學習的（目前時間不是很充裕，打算學好之後出一個特別篇好好實現以下async）

尾聲咯

這一節內容並沒有講很多async的內容，反而是先講了迭代器，再講了Generator，最後對async的使用簡單介紹了一下，這是我在學習async時的順序，async用起來容易、同步的寫法也比較熟悉，but！！！易用的東西往往代表著方法內部蘊含很多你不知道的東西， 這才是我們要挖掘的AV8D！！！！

總結一下

非同步的事情我們理解了，非同步程式執行的過程，瞭解了event table，任務佇列，巨集任務微任務的執行先後條件。瞭解了非同步promise的用法，promise的實現機制、async的用法，以及衍生出來的迭代器知識。

這一段時間和邊學習邊產出文章，有一種被大家鞭策的感覺，哈哈哈哈哈。鞭策這個詞有點怪怪的，這個過程中我發現學習不能只有興趣，興趣可以幫你研究你喜歡的內容時有無限的動力，上了發條一樣，在你低谷、沒有興趣的時候還需要鞭策來幫你去學習新的不擅長的知識，

以前非同步是我掌握最差的部分，在這一個階段的學習我收穫很多不知道身為讀者的你收穫了多少呢？ 只有你自己知道了

有結束也有開始

非同步的美妙我們就算是先告一段落。

下面的一個巨大的系列章節，我將會對vuer-router原始碼進行一個系統的學習，並且隨著學習之中產出文件喲，算是繼續鞭策和與大家一塊學習。 還是那個熟悉的結束語：每一個前端coder（boy and girl）你們永遠不是一個人在戰鬥~

我是一個應屆生，最近和朋友們維護了一個公眾號，內容是我們在從應屆生過渡到開發這一路所踩過的坑，已經我們一步步學習的記錄，如果感興趣的朋友可以關注一下，一同加油~