js--Promise

今天说说Promise对象。在说该对象的时候先来看看几个问题。
一、问题
1、同步和异步的基本概念
2、常见的异步程序：计时器、读取文件、ajax请求
3、异步编程：回调函数
4、单线程：Js是单线程的，所以函数是一个个执行
5、事件循环：虽然是单线程，但是通过事件循环和异步，解决了并发的问题
6、使用回调函数的问题：回调地狱（callback hell）
7、解决方案：promise
8、async函数
二、回调地狱示例
1、应用的场景就是出去玩的时候想和奶茶和吃火锅，但是奶茶的制作比较快1秒就完成，火锅得需要两秒才可以，但是我就是想先吃火锅再和奶茶。通过es5的语法利用回调函数来实现

//一秒制作成奶茶
function getTea(fn){
	setTimeout( () => {
		fn("奶茶")
	},1000)
}
//两秒制作成火锅
function getHotpot(fn){
	setTimeout( () =>{
		fn("火锅")
	},2000)
}

//先吃火锅再喝奶茶通过回调函数实现
getHotpot(function(data){
	console.log(data);
		getTea(function(data){
			console.log(data)
			......

		})
})

通过上面的代码就可以看出通过回调函数来一层层的实现自己的问题很难维护。这就是回调地狱。
为了解决这个问题es6中提出了Promise来解决这个异步的问题

三、通过Promise来实现异步
1、Promise的基本语法

let p = new Promise(function(resolve){
	resolve("hello world"); //resolve可以将异步的数据传递出来
})
p.then( function(data){    //数据传出来后通过then来获取到异步数据
	console.log(data)
} )

2、还是上面的问题，先吃火锅后喝奶茶，通过promise来实现

function getTea(){
	return new Promise(function(resolve){
		setTimeout( () =>{
			resolve("奶茶")
		},1000)
	})

}
function getHotpot(){
	return new Promise(function(resolve){
		setTimeout( () =>{
			resolve("火锅")
		},2000)
	})
}

getHotpot().then( function(data){
		console.log(data);
			return getTea();
		}).then(function(data){
			console.log(data)
})

四、通过async函数来实现异步

function getTea(){
	return new Promise(function(resolve){
		setTimeout( () =>{
			resolve("奶茶")
		},1000)
	})
}

function getHotpot(){
	return new Promise(function(resolve){
		setTimeout( ()=>{
			resolve("火锅")
		},2000)
	})
}

async function getData(){
	let hotpot = await getHotpot(); //await后的对象是promise对象
		console.log(hotpot);
	let tea = await getTea();
		console.log(tea)
}
getData();