generator-生成器
genrat-生成
普通函數(shù)——一路到底
generator函數(shù)——中間能停
本質(zhì)上是將其一個(gè)函數(shù)切割成幾個(gè)小型函數(shù)，然后通過next請求執(zhí)行
generator標(biāo)志*，即：function *show(){}
yield;//暫時(shí)放棄執(zhí)行
function *show(){
alert("A")
yield;//暫時(shí)放棄執(zhí)行
alert("B")
}
let genObj=show();
genObj.next();
genObj.next();
yield：既可以傳遞參數(shù)
function *show(num1 ,num2){
alert("A")
alert(`${num1},${num2}`) //100,444
let a = yield;//暫時(shí)放棄執(zhí)行
alert("B")
alert(a); //11
}
let gen = show(100,444);
gen.next(12);//第一個(gè).next沒辦法給yield傳參
gen.next(11);
yield又可以返回值
function *show(){
alert("aaa");
yield 1222;
alert("bbbbb");
return 55;
}
let gen = show();
let re1 = gen.next();
console.log(re1); //{value: 1222, done: false}
let re2 = gen.next();
console.log(re2); //{value: 55, done: true}
generator 實(shí)例
generator 好處就像寫同步操作一樣寫異步操作
runner(function *(){
let data1 = yield $.ajax({url:'1.txt',dataType:'json '});
let data2 = yield $.ajax({url:'2.txt',dataType:'json'});
let data3 = yield $.ajax({url:'3.txt',dataType:'json'});
console.log(data1,data2,data3);
})
異步操作：
1.回調(diào)
2.Promise
3.generator
//回調(diào)
$.ajax({
url:xxx,
dataType:'json;,
success(data1){
$.ajax({
????????url:xxx,
????????dataType:'json;,
????????success(data2){
????????$.ajax({
????????????url:xxx,
????????????dataType:'json;,
????????????success(data3){
????????????????//完事
????????????},
????????????error(){
????????????????alert("錯(cuò)了")
????????????}
????????})
????},
????error(){
????????alert("錯(cuò)了")
????}
????})
????},
????error(){
????????alert("錯(cuò)了")
????}
})
//Promise
Promise.all([
????????$.ajax({url:"xxx",dataType:"json"}),
????????$.ajax({url:"xxx",dataType:"json"}),
????????$.ajax({url:"xxx",dataType:"json"}),
????????$.ajax({url:"xxx",dataType:"json"}),
]).then(result=>{
//完事
},err=>{
alert('錯(cuò)了')
});
//generator適合摻雜一些邏輯
runner(function *(){
????????let data1=$.ajax({url:"xxx",dataType:"json"}),
????????let data2=$.ajax({url:"xxx",dataType:"json"}),
????????let data3=$.ajax({url:"xxx",dataType:"json"}),
????????let data4=$.ajax({url:"xxx",dataType:"json"}),
//完事
})
帶邏輯-普通函數(shù)
$.ajax({
????????url:”getUserData“,
????????dataType:"json",
????????success(results){
????????let userData=results[0];
????????if(userData.type=="VIP“){
$.ajax({
????url:'getVIPItems',
????dataType:'json',
????success(items){
????//處理一些事情,生成列表。顯示等
},error(){
????alert('報(bào)錯(cuò)了。。')
}
})
}else{
$.ajax({
????url:'getItems',
????dataType:'json',
????success(items){
????//處理一些事情
},error(){
????alert('報(bào)錯(cuò)了。。')
}
})
}
},
error(){
????alert("出錯(cuò)了。。。。“)
}
})
帶邏輯-Promise
Promise.all({
$.ajax({url:'getUserData',dataType:'json'})
}).then(result=>{
let userData=results[0];
if(userData.type=="VIP“){
$.ajax({
url:'getVIPItems',
dataType:'json',
success(items){
//處理一些事情
},error(){
alert('報(bào)錯(cuò)了。。')
}
})
} else{
$.ajax({
url:'getItems',
dataType:'json',
success(items){
//處理一些事情
},error(){
alert('報(bào)錯(cuò)了。。')
}
})
}
},err=>{
allert('失敗‘)；
})
帶邏輯-generator
不能寫成箭頭形式
runner(funciton *(){
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——適合一次讀一堆
generator——帶邏輯性
generator——KOA
*nodejs
