promise 回调地域解决方法

使用回调函数的问题：回调地狱(callback)
解决方法：promise、async函数
(async函数是promise的语法糖)

function getTea(fn){
	setTimeout(function(){
	fn('奶茶')
},1000)
}
function getHot(fn){
	setTimeout(function(){
	fn('火锅')
},2000)
}
getTea(function(data){
	console.log(data)
})
//喝奶茶
getHot(function(data){
	console.log(data)
})
//吃火锅

从上面看，哪个时间短先执行哪个，但现在就想先吃火锅再喝奶茶。

getHot(function(data){
	console.log(data)//吃火锅
	getTea(function(data){
	console.log(data)//喝奶茶
	//如果再有就一直往下套，形成回调地域
})
})

解决方法：promise

//基本用法
let p = new Promise(function(resolve,reject){
	resolve('hello world')
	//resolve可以将异步数据传递出来
})
//通过then拿到传递出来的数据
p.then(function(data){
	console.log(data)
	//这个data就是resolve传出来的值
})

那么之前的函数可以改写为

function getTea(){
	return new Promise(function(resolve){
		setTimeout(function(){
			resolve('奶茶')
		},1000)
	})	
}
function getHot(){
	return new Promise(function(resolve){
		setTimeout(function(){
			resolve('火锅')
		},2000)
	})	
}
//getTea()返回的是Promise对象
getTea().then(function(data){
	console.log(data)
	return getHot()
}).then(function(data){
	console.log(data)})
//第二个then调的第一个then的返回值

更好的解决方法
async函数

async function getData(){
	//直接获取resolve传递出来的异步数据
	let Hot = await getHot()；
	console.log(Hot);
	let Tea = await getTea()；
	console.log(Tea);
}
getData();
//这样的代码清爽很多，更好维护。把异步的程序写起来更像同步的程序

知识点
1、Promise

let p = new Promise(()=>{
	console.log(1)
})
p.then(()=>{
console.log(2)
})
//这样只会输出1，不会输出2
//什么时候会输出2呢
//let p = new Promise(()=>{
//	console.log(1)
//	resolve()  只有调用resolve时候才会执行then
//})

let p = new Promise((resolve)=>{
	resolve('hello world')
})
p.then((data)=>{
console.log(data)
})
//resolve传出来的值是then里的形参

2、async函数

async function fn(){
	return 1
}
let a = fn();
console.log(a)
//Promise{1}  返回的是Promise对象

如果想获取return出来的值

async function fn(){
	return 1
}
fn().then((data)=>{
console.log(data)
})

async中可以接await

let p = new Promise((resolve)=>{
	resolve('hello world')
})
async function fun(){
	let a = await p;
	//将resolve出的值赋值给a
	console.log(a);
}
fun();