学习ES6之迭代器生成器异步处理，初级篇

生成器（generator的应用）

在上一篇博客上，我写了对数组的扩展、迭代器与生成器的介绍和使用场景，今天我分享一下对生成器处理异步问题的方法

第一个：回调地狱问题

何为回调地狱呢？如果接触过jquery ajax的朋友，一定知道通过用$.get或者$.post的方法获得请求时，请求到的结果在success中，就像这样：

$(function(){
	$.ajax({
		method: "get",
		url: "你数据的网址",
		success(res){
			console.log(res) //res就是你获取到的数据
			//但是我还想继续获取数据，就得再在里面再进行ajax请求
			$.ajax({
				//	再进行一起请求
			});
		}
	})

})

像上面这种ajax里面再套用ajax的方法，一个是扩展性不好，一个就是可读性太差了，写着写着就乱套了，这种问题就叫做回调地狱问题。
处理这种问题，可以用到生成器的方法来解决。

$(function(){
	//1.先生成一个生成器 叫做main()
	function* main(){
		//切记这里的arr不是yield requestData('输入一个数据源的网址')返回的值
		//而是在requestData函数里next()的赋值
		let arr = yield requestData('http://wthrcdn.etouch.cn/weather_mini?citykey=101010100');
		console.log(arr);
	}
	//2.生成一个迭代器
	const ite = main();
	//恢复yield，让程序走完
	ite.next();
	//3.发起请求
	function requestData(url){
		$.ajax({
			url,
			method: 'get',
			success(res){
				//作用是给arr赋值
				ite.next(res);
			},
			error(msg){
				console.log(msg);
			}
		})
	}
})

通过这种方法，在main函数里就可以对获取到的arr进行操作了

第二个：按顺序加载

如果我们在js里面按照顺序调用所写的函数，那么运行出的结果，可不一定是你本应该运行结果的顺序。举个例子，就明白了：

//我做一个伪场景
//创造一个函数才给三个函数排序
function* main(){
	openData();
	yield getData();
	close();
}
const ite = main();
ite.next();

function openData(){
	console.log('开启正在加载页面')
}
function getData(){
	console.log('调用getData()方法');
	setTimeout(()=>{
		console.log('加载完毕')
		ite.next();
	},3000)
}
function close(){
	console.log('关闭正在加载页面')
}

好了今天就分析这么多，下次我将分析，另外集中处理异步的方法。