异步·promise
什么是回调地狱
- 现在有个需要需要先执行A,在执行B,
加入按照下面这么执行会先打印B,在打印A,因为A的延迟比较久。
不管getA,和getB的位置怎么改变都是一样,因为setTimeout也是异步程序。
function getA(fn) {
setTimeout(() => {
fn('A')
}, 1000)
}
function getB(fn) {
setTimeout(() => {
fn('B')
}, 500)
}
//这么执行会先打印b,再打印A,不管getA,和getB的位置怎么改变都是一样
getA(function (data) {
console.log(data)
})
getB(function (data) {
console.log(data)
})
因此我们可以借助回调让异步程序按照我们想要的执行顺序来执行。
// 现在又个需要需要先执行A,在执行B,
function getA(fn) {
setTimeout(() => {
fn('A')
}, 1000)
}
function getB(fn) {
setTimeout(() => {
fn('B')
}, 500)
}
//这么执行会先打印b,再打印A
// getA(function (data) {
// console.log(data)
// })
// getB(function (data) {
// console.log(data)
// })
// 借助回调的方法可以这么写
getA(function (data) {
console.log(data)
getB(function (data) {
console.log(data)
})
})
// 假设来了A,b,c,d呢,这就形成了回调地狱
如果再来两个b,c,d,e,f那么就产生了如下代码,也就是回调地狱,这样的代码显然是难以维护的。
getA(function (data) {
console.log(data)
getB(function (data) {
console.log(data)
getC(function (data) {
console.log(data)
getD(function (data) {
console.log(data)
getE(function (data) {
console.log(data)
getF(function (data) {
console.log(data)
getG(function (data) {
console.log(data)
getH(function (data) {
console.log(
data)
})
})
})
})
})
})
})
})
解决回调地狱
自从es6出现后,我们便有了解决回调地狱的方法。那就是promise对象
创建一个promise对象我们可以用new关键字,通过.then可以获取到对应的值。
let p = new Promise(function(resolve){
resolve('hello world')
})
p.then(function(res){
console.log(res)
})
加入promiese来看看效果,
这样好看多了
// 现在又个需要需要先执行A,在执行B,
function getA() {
return new Promise(function (resolve) {
setTimeout(() => {
resolve("A")
}, 500)
})
}
function getB() {
return new Promise(function (resolve) {
setTimeout(() => {
resolve("B")
}, 1000)
})
}
getA().then(
function (data) {
console.log(data)
return getB()
}
).then(
function (data) {
console.log(data)
return getB()
}
).then(
function (data) {
console.log(data)
return getB()
}
).then(
function (data) {
console.log(data)
return getB()
}
).then(
function (data) {
console.log(data)
return getB()
}
)
通过promise可以让一定程度上让异步回调,代码更易读,但是还是不那么好,这时候引入async ,await,如此让异步代码看起来像同步代码一样。
async function getdata(){
let a = await getB()
let b = await getB()
console.log(A,b)
}