回调地狱和Promise对象

一、回调地狱
例子1：

//获取奶茶的方法
function getTea(fn){
	setTimeout(() => {
		fn("奶茶")
	},500)
}
//调用获取奶茶的方法
getTea(function(data){
	console.log(data)//奶茶
})
//获取火锅的方法
function getHotpot(fn){
	setTimeout(() => {
		fn("火锅")
	},800)
}
//调用获取火锅的方法
getHotpot(function(data){
	console.log(data)//火锅
})
//如果想先吃火锅再喝奶茶再进行。。。。
//这样就形成了回调地狱，很难维护
getHotpot(function(data)){//吃火锅
	console.log(data);
	getTea(function(data){//喝奶茶
		console.log(data);
			getTea(function(data){//喝奶茶
			console.log(data);
				getTea(function(data){//喝奶茶
				console.log(data);
			})
		})
	})
}

这里可见在ES6之前我们都是用回调来解决异步事件的。
二、Promise(ES6提供的的一个对象)
1、

//promise对象
//resolve可以将异步数据传递出去
let p = new Promise(function(resolve){
	resolve(123)
})
//通过then拿到异步数据
p.then(function(data){
	console.log(data);//123
})

对上面奶茶，火锅回调地狱进行改造

//获取奶茶的方法
function getTea(){
	return new Promise(function(resolve){
		setTimeout(() => {
			resolve("奶茶")
		},500)
	})
}
function getHotpot(){
	return new Promise(function(resolve){
		setTimeout(() => {
			resolve("火锅")
		},1000)
	})
}
//调用获取火锅的方法(getHotpot的值为promise对象)
getHotpot.then(function(data){
	console.log(data)//火锅
})

//调用获取奶茶的方法
getTea.then(function(data){
	console.log(data);//奶茶
})
//如果想先吃火锅再喝奶茶
getHotpot.then(function(data){
	console.log(data);//火锅
	//由于getTea是一个promise对象,返回一个promise可以继续连着then
	return getTea();
}).then(function(data){
	console.log(data)//奶茶
	//后面还可以进行很多事情
}).then(function(data){
	console.log(data)//....
}).then(function(data){
	console.log(data)//...
}).then(function(data){
	console.log(data)//..
})

注：虽然回调地狱好很多，但是代码看着还是比较冗余，因此下面我们介绍async函数
2、async函数
async函数里面可以加一个await，await可以加一个promise对象

async function getData(){
	//由于getTea返回的是一个promise对象
	//await可直接获取promise对象中resolve传递出来的异步数据，不需要再then
	//await会等待getTea拿到数据赋值给tea后再会执行后面的代码
	let tea = await getTea();
	console.log(tea);//奶茶
	let hotPot = await getHotpot();
	console.log(hotPot );//火锅
}
//调用
getData();

async函数中看起来更像是同步代码，await会等待getTea拿到数据赋值给tea后再会执行后面的代码。