异步编程（Promise，Iterator，Generator，async/await）

// 1.Promise
{
	// Promise
	function ajax() {
		return  new Promise((resolve, reject) => {
			let name = "to";
			setTimeout(() => resolve(name),1000);
		})
	};
	
	/**
	 * ajax()
	 * 		.then(() => {
				console.log("first");
				let name = "kk";
				let id = 12;
				return new Promise((resolve, reject) => {
					resolve(name);
					console.log(id);
				})
			}).then((sk) => {
				console.log(sk);
			})
	 */

	// Promise.all   Promise.race
	const url1 = "https://www.baidu.com/img/baidu_jgylogo3.gif";
	const url2 = "https://www.baidu.com/img/bd_logo1.png?qua=high";
	const url3 = "https://cn.vuejs.org/images/logo.png";
	function getImage(imgurl) {
		return new Promise((resolve, reject) => {
			const img = document.createElement("img");
			img.src = imgurl;
			img.onload = () => resolve(img);   // 图片加载到的事件
			let err = new Error("数据源出错");
			img.onerror = (err) => reject(err);  // 加载出错事件
		})
	};
	function showImg(imgs) {
		imgs.forEach( item => {
			document.body.appendChild(item);
		})
	};
	function showRaceImg(img) {
		document.body.appendChild(img);
	};
	
	//Promise.all(): 全部的promise的状态改变完成再进行then调用
	Promise.all([
		getImage(url1),
		getImage(url2),
		getImage(url3)
	]).then( imgs => showImgs(imgs))
	//Promise.race(): 只要有一个promise的状态改变就进行then调用
	Promise.race([
		getImage(url1),
		getImage(url2),
		getImage(url3)
	]).then( imgs => showImgs(imgs))
	
}



// 2.Iterator
{
	const arr = [1, 2, 3];
	for(let val of arr) {
		console.log("val---->",val);
	};
	
	// Iterator 默认存放在数据集合的Symbol.iterator属性里，本质是一个方法
	const fn = arr[Symbol.iterator]();
	console.log(fn.next());   // 第一次调用时生成一个遍历器对象指向第一个数据
	console.log(fn.next());
	console.log(fn.next());
	console.log(fn.next());
	
	// 原生支持iterator的数据集合有： array/string/set/map  函数中的argument支持iterator的数据集合都可以使用 for...of循环
	const obj = {
		name: "apple",
		id: 12,
		price: 45,
		[Symbol.iterator]() {
			let index = 0;
			let value = Object.values(this);
			return {
				next() {
					if(index < values.length) {
						return {
							value: values[index++],
							done: false,
						}
					}else {
						return {
							done: true
						}
					}
				}
			}
		}
	}
	for( let val of obj) {
		console.log("obj---->",val);
	}
}



// 3.Generator
{
	const Say = function* () {
		yield "a"
		yield "b"
		yield "c"
	};
	const fn = say();
	console.log("fn.next()---->",fn.next());
	console.log("fn.next()---->",fn.next());
	console.log("fn.next()---->",fn.next());
	console.log("fn.next()---->",fn.next());	
}

{
	// 实现Object的iterator接口 进行for...of 循环
	const obj = {
		name: "vue",
		price: 54,
		id: 123,
		a: 1
	};
	obj[Symbol.iterator] = function* () {
		for( let key of Object.keys(obj)) {
			yield obj[kay];
		}
	};
	for(const val of obj) {
		console.log("obj---->",val);
	};
}

{
	// 任何时候都要一定数量的状态
	const state = function* () {
		while(1) {
			yield "success"
			yield "fail"
			yield "pending"
		}
	};
	const status = state();
	console.log("status.next()--->",status.next());
	console.log("status.next()--->",status.next());
	console.log("status.next()--->",status.next());
	console.log("status.next()--->",status.next());
	console.log("status.next()--->",status.next());
	console.log("status.next()--->",status.next());
	console.log("status.next()--->",status.next());
}

{
	// 长轮询
	function fn1() {
		return new Promise(resolve => {
			setTimeout(() => {
				console.log("查询中");
				resolve({ code: 1 });
			}, 1000)
		})
	};
	const ajax = function* () {
		yield fn1();
	};
	function autoAjax() {
		const status = ajax().next();
		status.value.then(res => {
			if(res.code === 1){
				console.log("用户付款成功");
			}else {
				console.log("未付款");
				setTimeout( autoAjax(), 500);
			}
		})
	};
	autoAjax();
}


	// 长轮询
	function fn1() {
		return new Promise(resolve => {
			setTimeout(() => {
				console.log("查询中");
				resolve({ code: 1 });
			}, 1000)
		})
	};
	function autoAjax() {
		fn1().then(res => {
			if(res.code === 1){
				console.log("用户付款成功");
			}else {
				console.log("未付款");
				setTimeout( autoAjax(), 500);
			}
		})
	};
	autoAjax();
}

{
	// Generator 函数异步编程
	const ajax = function* () {
		console.log("任务start");
		yield function(cb) {
			setTimeout( () => {
				console.log("异步任务执行结束");
				cb && cb();
			}, 1000 )
			console.log("end");
		};
	};
	const fn = ajax();
	const first = fn.next();
	first.value( () => fn.next() )
}


// 4.async/await
{
	async function fn1() {
		await console.log(11);
		await console.log(22);
		await console.log(33);
	};
	fn1();
}

{
	function fn1() {
		setTimeout(() => {
			console.log("fn1-->",task1);
		}, 1000)
	};
	function fn2() {
		setTimeout(() => {
			console.log("fn2-->",task2);
		}, 1000)
	};
	function fn3() {
		setTimeout(() => {
			console.log("fn3-->",task3);
		}, 1000)
	};
	
	async function init() {
		await fn1();
		await fn2();
		await fn3();
	};
	init();
}

{
	function fn1() {
		return new Promise(resolve => {
			setTimeout(() => {
				console.log("任务1");
				resolve();
			}, 1000)
		})
	};
	function fn2() {
		return new Promise(resolve => {
			setTimeout(() => {
				console.log("任务2");
				resolve();
			}, 1000)
		})
	};
	function fn3() {
		return new Promise(resolve => {
			setTimeout(() => {
				console.log("任务3");
				resolve();
			}, 1000)
		})
	};
	
	async function init() {
		await fn1();
		await fn2();
		await fn3();
	};
	init();
}

{
	async function init() {
		const str = "lucy";
		let a1 = await new Promise((resolve, reject) => {
			setTimeout(() => {
				console.log(1);
				resolve(str);
			}, 1000)
		});
		
		await new Promise(resolve => {
			setTimeout(() => {
				console.log(a1);
				resolve();
			}, 1000)
		});
	};
	init();
}