mdn文档:
1. async 函数
函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定
2. await 表达式
await右侧的表达式一般为promise对象, 但也可以是其它的值
如果表达式是promise对象, await返回的是promise成功的值
如果表达式是其它值, 直接将此值作为await的返回值
3. 注意:
await必须写在async函数中, 但async函数中可以没有await
如果await的promise失败了, 就会抛出异常, 需要通过try...catch来捕获处理
async函数的返回值是一个promise对象
async函数返回的promise的结果由函数执行的结果决定
async function fn1() {
return 1
throw 2
return Promise.reject(3)
return Promise.resolve(3)
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(4)
}, 1000);
})
} const result = fn1()
console.log(result)
result.then(
value => {
console.log('onResolved()', value)
},
reason => {
console.log('onRejected()', reason)
}
)
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// resolve(5)
reject(6)
}, 1000);
})
}
function fn4() {
return 6
}
async function fn3() {
try {
// const value = await fn2() // await右侧表达为promise,
得到的结果就是promise成功的value
const value = await fn1()
console.log('value', value)
} catch (error) {
console.log('得到失败的结果', error)
}
const value = await fn4() // await右侧表达不是promise, 得到的结果就是它本身
console.log('value', value)
}
fn3()4，async/await和Promise的关系
◆执行async函数,返回的是Promise对象
◆await 相当于Promise的then
◆try..catch 可捕获异常,代替了Promise 的catch
imooc
!(async function () {
const p1 = P romise. reso lve (300 )
const data = await p1 /1 await 相当于Promise then
console. log( 'data' ,data )
})()
!(async function () {
const data1 = await 400 // await Promise. resolve(400)
console. log( 'data1' ,data1)
})()
(async function () {
copst p4 = Promise. reject('err1') 1/ rejected 状态
const res = await p4 //await -> then
console. Log('res',res )
)()
5, for ... of常用于异步的遍历
!(async function() {
for(Let i of nums){
const res = awaitmuti
console. Log( res)
}
})()
6,宏任务和微任务
◆宏任务: setTimeout , setInterval , Ajax，DOM事件
◆微任务: Promise async/ await
◆微任务执行时机比宏任务要早(先记住)
//微任务: DOM渲染前触发
Promise. resolve(). then() => {
console. log( ' length1 '
$( ' #container' ). children().length ) // 3
alert( 'Promise then') // DOM渲染了吗?
}
// 宏任务: DOM渲染后触发
setTimeout(() => {
console. Log( ' Length2',
$( ' #container' ). children().length ) // 3
alert( 'setT imeout') // DOM渲染了吗?
