Promise是es6新增的语法,解决了回调地狱的问题
1. 概念
- 什么是回调地狱?
需要拿异步数据不能用return拿数据,
只能用回调函数拿,
但是如果要控制拿数据的顺序,
就需要函数内嵌套函数,套娃,
但是嵌套多了,
代码就不利于维护,
那么这种就叫做回调地狱
(案例二种的方法三就是回调地狱)
- 如何解决回调地狱?
es5通过回调函数拿数据,es6通过promis对象的then方法拿异步数据,这样的话就更容易维护,不会出现回调地狱
resolve可以将异步数据传递出去,然后通过promise对象的then方法中获取数据
- 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
})
- 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