之前写了Promise解决回调地狱的问题,现在来看看async/await来解决回调地狱问题,听大佬说这个是Promise的升级版
我们先看一组函数:
function Test() {
setTimeout(function () {
let name = '测试'
console.log(name)
}, 1000)
}
function Test2() {
let name = Test()
console.log('我后执行')
}
Test2()
展示结果:
我们发现先执行了Test2()后才执行Test()
我们再用async/await改一下看看:
function Test() {
setTimeout(function () {
let name = '测试'
console.log(name)
}, 1000)
}
async function Test2() {
await Test()
console.log('我后执行')
}
Test2()
展示结果:
结果没有变,不是说async/await可以解决异步回调吗?开始查资料,看看async和await到底是什么鬼?
通过打印Test(),我们看下结果:
async function Test() {
await setTimeout(function () {
let name = '测试'
return name
}, 1000)
}
console.log(Test())
结果展示:
我们发现async返回了一个Promise对象,所以这样我们可以通过then来获取结果值,现在获取结果看一下:
Test()
.then(res => {
console.log(res)
})
展示结果:
我们发现结果是undefined,???,await等待究竟是什么?我们现在再写一个
function Test() {
return new Promise(resolve => {
setTimeout(function () {
let name = '测试'
resolve(name)
}, 1000)
})
}
async function Test2() {
await Test()
.then(res => {
console.log(res)
})
console.log('我后执行')
}
Test2()
结果展示:
我们发现当await后面返回一个Promise对象时,能够打印出来结果,而且,是先打印await后面的的值,再执行后面数据,当然,await后面其他返回值也没关系,只是会立即执行,不过那样就没有意义了…
await必须是在async函数里面,是根函数,即使async函数里面有个函数,在这个函数里面写await也是没有效果的
async/await
async用来申明里面包裹的内容可以进行同步的方式执行,await则是进行执行顺序控制,每次执行一个await,程序都会暂停等待await返回值,然后再执行之后的await。
await后面调用的函数需要返回一个promise,另外这个函数是一个普通的函数即可,而不是generator。
await只能用在async函数之中,用在普通函数中会报错。
await命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中
看下下面的代码:
function first() {
return new Promise(resolve => {
setTimeout(function () {
let num = 0
resolve(num)
},10000)
})
}
function second(data) {
return new Promise(resolve => {
setTimeout(function () {
data++
resolve(data)
})
},5000)
}
function third(data) {
return new Promise(resolve => {
setTimeout(function () {
data++
resolve(data)
}, data)
},1000)
}
async function Test() {
try {
let s1 = await first()
console.log(s1)
let s2 = await second(s1)
console.log(s2)
let s3 = await third(s2)
console.log(s3,s2,s1)
}
catch (err) {
console.log(err)
}
}
Test()
展示结果:是同时打印出来的,等待了10s,并不会逐一打印