回调函数,Promise对象,async函数的使用,解决回调地狱的问题

Promise是es6新增的语法,解决了回调地狱的问题

1. 概念

1. 什么是回调地狱?

需要拿异步数据不能用return拿数据,
只能用回调函数拿,
但是如果要控制拿数据的顺序,
就需要函数内嵌套函数,套娃,
但是嵌套多了,
代码就不利于维护,
那么这种就叫做回调地狱
(案例二种的方法三就是回调地狱)

2. 如何解决回调地狱?

es5通过回调函数拿数据,es6通过promis对象的then方法拿异步数据,这样的话就更容易维护,不会出现回调地狱
resolve可以将异步数据传递出去,然后通过promise对象的then方法中获取数据

3. promis是什么?

promis是Es6提供的对象,
想创建promis对象就需要new这个关键字
let p = new Promise()
这个p有个一then()方法,通过这个then可以拿到异步数据

let p = new Promise(function(resolve){
	resolve('hello world')
})

p.then(function(data){
	console.log(data)//hello world
})

4. promise的作用

可以解决异步问题,这种异步的程序比回调地狱更加好维护
但是一层层的then看上去也不是那么友好,那么就可以使用async函数

回调函数会引起一个难以维护的弊端

2.用回调函数来获取异步数据案例

例一:
获取奶茶的方法
function getTea(){
	setTimeout(()=>{
		return '奶茶'//这个return是拿不到这个'奶茶'的数据,所以需要使用异步传入一个fn,如例二
	},500)
}

例二:
获取奶茶的方法
function getTea(fn){
	setTimeout(()=>{
		fn('奶茶')
	},500)
}
获取火锅的方法
function getHotpot(fn){
	setTimeout(()=>{
		fn('火锅')
	},1000)
}

=调用案例二 的方法=

方法一:
调用获取奶茶的方法
getTea(function(data){
	console.log(data)
})

调用获取火锅的方法
getHotpot(function(data){
	console.log(data)
})
打印出来   奶茶  火锅//因为火锅需要1秒,奶茶需要0.5秒,所以火锅打印在后

方法二:
如果想先打印火锅,后打印奶茶,则
getHotpot(function(data){
	console.log(data)	
	getTea(function(data){
		console.log(data)
	})
})
打印出来   火锅  奶茶

方法三:
但是如果调用的方法太多的话,就变成在调用函数内一层层调用方法,这样的调用就是回调地狱
getHotpot(function(data){
	console.log(data)	
	getTea(function(data){
		console.log(data)
		getTea(function(data){
			console.log(data)
		})
	})
})
需要拿异步数据不能用return拿数据,只能用回调函数拿,
但是如果要控制拿数据的顺序,
就需要函数内嵌套函数,套娃,
但是嵌套多了,
代码就不利于维护,
那么这种就叫做回调地狱

3.使用Promise改造函数获取异步数据案例

function getTea(){
	return new Promise(function(resolave){
		setTimeout(()=>{
			resolave('奶茶')
		},500)	
	})
}

function getHotpot(fn){
	return new Promise(function(resolave){
		setTimeout(()=>{
			fn('火锅')
		},1000)
	})
}
//先吃火锅再喝奶茶
getHotpot().then(function(data){
	console.log(data)
	return getTea()
}).then(function(data){
	console.log(data)
})
打印出 火锅  奶茶
第二个then调的是第一个then的返回值的promise

4.使用async函数获取异步数据案例

注:
getHotpot的返回值是一个promise对象
在await后面加一个promise对象,
就可以直接把resolave传出来的数据赋值给前面的值,
看起来更像同步的方法

async function getData(){
	let hotpat = await getHotpot()
	console.log(hotpat)
	let tea = await getTea()
	console.log(tea)
}
打印出 火锅  奶茶

await是异步方法,看起来更像同步的方法,执行完第一个await之后,等到获取到数据之后,再执行下面的await