ES6 --- Promise & Generator & 普通 【异步操作】

总结这三种【异步操作】

对 Promise 和 Generator 不太了解，可以看我写的 ES6知识点总结 ！

1.老老实实写回调【普通的】

1. 没有逻辑性的就是只请求读取数据

   $.ajax({
   	url:"xxx",
   	dataType:"json",
   	success(res1){
   			$.ajax({
   				url:"xxx",
   				dataType:"json",
   				success(res2){
   						$.ajax({
   							url:"xxx",
   							dataType:"json",
   							success(res2){
   								//完事
   							},
   							error(){
   								alert('错了！！！')
   							}
   						});
   				},
   				error(){
   					alert('错了！！！')
   				}
   			});
   	},
   	error(){
   		alert('错了！！！')
   	}
   });
   

   ---

2. 带逻辑的一步步获取数据 – 普通回调

   //假如要获取用户数据，然后判断是不是VIP成员 && 普通成员
   $.ajax({
   	url:"getUserData",
   	dataType:"json",
   	success(userData){
   		//判断成员信息是不是VIP
   		if(userData.type == "VIP"){
   			//如果是，继续请求 每个VIP成员数据
   			$.ajax({
   				url:"getVIPItems",
   				dataType:"json",
   				success(items){
   					//做该做的事，比如渲染成员列表等等
   				},
   				error(err){
   					alert('错了！！！')
   				}
   			})
   		}else{
   			//若果不是VIP成员，请求不是VIP成员的数据
   			$.ajax({
   				url:"getItems",
   				dataType:"json",
   				success(items){
   					//做该做的事
   				},
   				error(err){
   					alert('错了！！！')
   				}
   			})
   		}
   	},
   	error(){
   		alert('错了！！！')
   	}
   })
   

2.Promise ------ (一次性读一堆)

1. 没有逻辑性，一次读取一堆请求；(如果没有逻辑操作，用这个比较好用)

   Promise.all([
   	$.ajax({
   		url:"xxx1",
   		dataType:"json"
   	}),
   	$.ajax({
   		url:"xxx2",
   		dataType:"json"
   	}),
   	$.ajax({
   		url:"xxx3",
   		dataType:"json"
   	})
   ]).then(function(result0){
   	//完事
   },function(err){
   	alert('错了！！！')
   })
   

   ---

2. 带逻辑的读取数据 -----Promise(带逻辑的话比普通的还麻烦)

   Promise.all([
   	$.ajax({
   		url:"getUserData",
   		dataType:"josn"
   	})
   ]).then(result=>{
   	let userdata=result[0];
   	if(userData.type == "VIP"){
   		//判断如果是VIP成员，则请求VIP成员的数据
   		Promise.all([
   			$.ajax({
   				url:"getVIPItems",
   				dataType:"json"
   			})
   		]).then(result=>{
   			let items = result[0];
   			//做该做的事，比如 生成列表
   		},err=>{
   			alert('错了！！！')
   		})
   	}else{
   		//如果不是VIP成员则请求普通成员数据
   		Promise.all([
   			$.ajax({
   				url:"getItems",
   				dataType:"json"
   			})
   		]).then(result=>{
   			let items = result[0];
   			//做该做的事
   		},err=>{
   			alert('错了！！')
   		})
   	}
   },err=>{
   	alert('错了！！！')
   })
   

3.Generator ----- (其实就是对Promise小小的封装) (逻辑性)

1. 没有逻辑性请求数据

   1. 自己封装一个函数(前提是懂逻辑)
   2. 提供大家下载的一个
      在项目目录中打开cmd，输入： cnpm i yield-runner-blue ，然后在 yield-runner-blue 这个文件中有一个 index.js 文件，就只用这一个就行了

   //runner 这个函数是封装好的
   runner(function *(){
   	let data1 = yield $.ajax({
   		url:"xxx1",
   		dataType:"json"
   	});
   	let data2 = yield $.ajax({
   		url:"xxx2",
   		dataType:"json"
   	});
   	let data3 = yield $.ajax({
   		url:"xxx3",
   		dataType:"json"
   	});
   	console.log(data1,data2,data3);
   	//完事
   })
   
   

2. 带逻辑的步步获取数据 — generator (如果是有逻辑的获取数据，用这个最简单)

   runner(function* (){
   	//获取成员数据
   	let userData = yield $.ajax({
   		url:"getUserData",
   		dataType:"json"
   	});
   	//判断是否是VIP，是的话请求VIP成员数据
   	if(userData.type == "VIP"){
   		let items == yield $.ajax({
   			url:"getVIPItems",
   			dataType:"json"
   		});
   	}else{
   		//否则请求非VIP成员的数据
   		let items = yield $.ajax({
   			url:"getItems",
   			dataType:"json"
   		});
   	}
   	//做该做的事
   })