概述
异步回调容易导致callback hell。
Promise then catch链式调用虽把层级铺开，但也是基于回调函数。
async/await能彻底消灭回调函数，用同步语法编写异步代码。async/await和promise并不冲突。
使用场景
await后面不仅可以跟promise，还可以跟async
代码示例
function loadImg(src) {
const promise = new Promise((resolve, reject) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
reject(new Error(`图片加载失败 ${src}`))
}
img.src = src
})
return promise
}
async function loadImg1() {
const src1 = 'http://www.imooc.com/static/img/index/logo_new.png'
const img1 = await loadImg(src1)
return img1
}
async function loadImg2() {
const src2 = 'https://avatars3.githubusercontent.com/u/9583120'
const img2 = await loadImg(src2)
return img2
}
(async function () {
// 注意：await 必须放在 async 函数中，否则会报错
try {
// 加载第一张图片
const img1 = await loadImg1()
console.log(img1)
// 加载第二张图片
const img2 = await loadImg2()
console.log(img2)
} catch (ex) {
console.error(ex)
}
})()
和promise的关系
执行 async 函数，返回的是 Promise 对象
await 相当于 Promise 的 then
try...catch 可捕获异常，代替了 Promise 的 catch
- async 封装 Promise
- await 处理 Promise 成功
- try...catch 处理 Promise 失败
async
async 函数返回结果都是 Promise 对象（如果函数内没返回 Promise ，则自动封装一下）
async function fn2() {
return new Promise(() => {})
}
console.log( fn2() )
async function fn1() {
return 100
}
console.log( fn1() ) // 相当于 Promise.resolve(100)
await
await 后面跟 Promise 对象：会阻断后续代码，等待状态变为 resolved ，才获取结果并继续执行
await 后续跟非 Promise 对象：会直接返回
(async function () {
const p1 = new Promise(() => {})
await p1
console.log('p1') // 不会执行
})()
(async function () {
const p2 = Promise.resolve(100)
const res = await p2
console.log(res) // 100
})()
(async function () {
const res = await 100
console.log(res) // 100
})()
(async function () {
const p3 = Promise.reject('some err')
const res = await p3
console.log(res) // 不会执行
})()
try...catch
try...catch 捕获 rejected 状态
(async function () {
const p4 = Promise.reject('some err')
try {
const res = await p4
console.log(res)
} catch (ex) {
console.error(ex)
}
})()
异步本质
await 是同步写法，但本质还是异步调用。
即，只要遇到了 await ，后面的代码都相当于放在 callback 里。
async function async1 () {
console.log('async1 start')
await async2()
console.log('async1 end') // 关键在这一步，它相当于放在 callback 中，最后执行
}
async function async2 () {
console.log('async2')
}
console.log('script start')
async1()
console.log('script end')