咱們本篇說的依然還是咱們的generator，實際上來說，咱們之前已經說了generator是啥以及generator里的yield怎麼個用法，那接下來呢，咱就要具體來看個例子了，東西咱都搞明白了，之前也說這個東西能解決非同步操作，那下面就來看看怎麼玩。

首先呢這個東西需要輔助一些玩意來用用，這是一個runner（點我下載），runner里有一些這個東西那個東西的，咱先不去提，先拿它來玩玩。

比方說咱先來幾個文件吧，咱們主要以數據讀取為最簡單的方式

好了，文件咱有了，接下來咱們來看看generator在咱們的數據讀取中有著怎樣的應用

事情是這樣的：

當然你也知道的，咱們一定要用到咱們的runner的，不然也沒必要把它請出來；當然，咱們也引入一個jquery，也不是一定要用到，但是有現成的，咱們就沒必要自己寫了。

然後這些東西湊齊之後，就開始召喚點什麼東西了

正常的ajax怎麼寫，我也不去跟大家多說，大家也都知道，一層摞一層、一層摞一層，摞的各種過癮。那麼有了runner之後，它呢，讓我們給它傳一個generator作為它的參數，然後像同步操作一樣去寫非同步操作，非常方便

咱們走一個

咱們可以看到三個文件中的數據都讀取到了，就這麼簡單，其實generator它的好處就是能夠讓我們像寫同步操作一樣去寫非同步操作，當然咱也簡單的解析它一下

其實跟咱前面說的generator的原理是一樣的，說白了，我現在把這個ajax，這個ajax其實給我的是一個promise對象，這個大家應該了解，然後咱們把這個promise對象yield出去，yield給咱們的runner，因為是咱們的runner在執行這個generator函數，咱先不扯細節，咱說大面，相當於第一個ajax產生的promise對象，給了咱們的runner，然後函數暫停，等什麼時候請求完了，函數控制權再還給咱們的generator函數，結果就給了data1，後面的也是一樣，讀取完了之後，結果給到data2和data3，當然這些不重要，至少在咱們看來，它和咱們寫平常函數沒什麼區別，老方便了。

面對非同步操作，咱們對比一下幾種方法：

1、回調

2、Promise

3、generator

//回調
$.ajax({
url: xxx,
dataType: json,
success(data1){
$.ajax({
url: xxx,
dataType: json,
success(data2){
$.ajax({
url: xxx,
dataType: json,
success(data3){
//完事
 },error(){
alert(錯了);
}
})
},error(){
alert(錯了);
}
})
},error(){
alert(錯了);
}
});

//Promise
Promise.all([
$.ajax({url: 用戶,dataType: json}),
$.ajax({url: xxx,dataType: json}),
$.ajax({url: xxx,dataType: json})
]).then(results=>{
//完事
},err=>{
alert(錯了)
});

//generator
runner(function *(){
let data1 = yield $.ajax({url: xxx,dataType: json});
let data2 = yield $.ajax({url: xxx,dataType: json});
let data3 = yield $.ajax({url: xxx,dataType: json});

//完事
});

我們可以看到，Promise和generator確實比傳統的ajax寫法要簡單很多，也方便很多，但是我們看到，generator和Promise好像也沒有特別大的區別，generator和Promise相比好像也沒有特別省事。沒錯，在這種情況下，generator和Promise確實沒有多大區別，但是Promise也有它不適用的地方，不適用的地方在哪呢？

你看，咱如果是連續請求數據，中間並沒有其他操作的話，那generator和Promise沒有太大區別，而generator的優點在於，它中間可以摻雜一些邏輯，比方說在Promise函數里我們第一個請求讀的是用戶數據，通過請求來的數據判斷是普通用戶還是VIP用戶，然後通過用戶身份再去請求下面的商品，那這個東西就歡樂了。

這種我管它叫帶邏輯的數據讀取，下面讓咱來看看帶邏輯的讀取是什麼樣的

//帶邏輯-普通回調
$.ajax({url: getUserData, dataType: json,success(UserData){
if(UserData.type==VIP){
$.ajax({url:getVipItems, dataType: json, success(items){
//生成列表、顯示....
 },error(err){
alert(錯了)
}})
}else{
$.ajax({url:getItems, dataType: json, success(items){
//生成列表、顯示....
 },error(err){
alert(錯了)
}})
}
},error(err){
alert(錯了)
}});

//帶邏輯-Promise
Promise.all([
$.ajax({url: getUserData, dataType: json})
]).then(results=>{
let data = results[0];
if(UserData.type == VIP){
Promise.all([
$.ajax({url: getVipItems, dataType: json})
]).then(results=>{
let items = results[0];
//生成列表、顯示....
 }, err=>{
alert(失敗)
})
}else{
Promise.all([
$.ajax({url: getItems, dataType: json})
]).then(results=>{
let items = results[0];
//生成列表、顯示....
 }, err=>{
alert(失敗)
})
}
},err=>{
alert(失敗)
});

//帶邏輯-generator

runner(function *(){
let userData = yield $.ajax({url: getUserData,dataType: json});
if(userData.type ==VIP){
let items = yield $.ajax({url: getVipItems, dataType: json});
}else{
let items = yield $.ajax({url: getItems, dataType: json});
}
//生成列表、顯示....
})

從咱們代碼里能看出來，說句不好聽的，帶邏輯的版本的Promise真心比直接用ajax還麻煩，反過來，咱們今天的主角，咱們的generator使用起來和咱平常寫代碼基本上一樣，這才叫生活，這才叫做東西。

所以咱們發現，generator最大的好處在於，當有了邏輯之後非常方便。

所以咱們知道了，Promise適用於一次讀一堆數據的情況，而generator比較適用於中間摻雜邏輯的情況，邏輯性比較強。

所以在合適的場景用合適的東西，就這麼點兒事。

反正呢，基本上來說，咱們也已經認識了generator，知道了yield怎麼玩，以及知道了generator怎麼用，也知道它適合用在什麼樣的場景，挺好、不錯，當然在後面的應用當中，咱們會對generator有更加深入的理解。

反正呢，這個generator有點麻煩，有點亂，有點熱鬧，咱們基本上就說這麼多，咱們接下來再看看其他的東西~


推薦閱讀：
相关文章