这次彻底搞懂async&await
1.async 函数返回一个promise对象,可以使用then方法添加回调函async function show() {return {a:23,b:34}}console.log(show()) // //Promise {<fulfilled>: {…}}show().then(res=>{console.log('res',res) // res {a: 23, b:
·
1.async 函数返回一个promise对象,可以使用then方法添加回调函
async function show() {
return {a:23,b:34}
}
console.log(show()) // //Promise {<fulfilled>: {…}}
show().then(res=>{
console.log('res',res) // res {a: 23, b: 34}
})
2.await 关键字存在async函数表达式中,用于等待Promise对象,暂停执行,等到异步操作完成后,恢复async函数的执行并返回解析值
async function test1() {
console.log('执行')
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('延迟3秒后返回成功')
resolve({ a: '1' })
}, 3000)
})
}
async function test2() {
let x = await test1()
console.log('x', x)
return x
}
test2().then((res) => {
console.log('res', res)
})
// 执行结果如下
执行
延迟3秒后返回成功
x { a: '1' }
res { a: '1' }
// 如果屏蔽掉resolve({a: '1'}),仅打印
执行
延迟3秒后返回成功
3.如果是普通函数就不会等待执行,而是直接执行await后面的语句
async function test3() {
setTimeout(() => {
console.log('普通函数')
})
}
async function test4() {
await test3()
console.log('直接执行')
}
test4()
// 执行结果
直接执行
普通函数
// 如果去掉延迟函数
async function test3() {
console.log('普通函数')
}
async function test4() {
await test3()
console.log('直接执行')
}
test4()
// 执行结果
普通函数
直接执行
4.捕获异常
// 返回的reject状态被外层的catch捕获,然后终止了后面的执行。
function testAwait() {
return Promise.reject("error");
}
async function test1() {
await testAwait();
console.log('test1');// 没有打印
}
test1().then(v=>{
console.log(v)
}).catch(e=>{
console.log(e) // 'erroe'
})
5.try catch 捕获
function test1() {
return new Promise((resolve, reject) => {
reject("error")
})
}
async function test2() {
try {
await test1()
} catch (e) {
console.log("报错", e)
}
}
test2().then((res) => {
console.log("执行成功", res) // 打印:执行成功undefined
}).catch(err => {
console.log('err', err)
})
// 打印结果
报错 error
执行成功 undefined
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)