async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。
async
- async函数返回一个promise对象
async function fn () {
return 'async 函数'
}
console.log(fn());
image.png
- async，异步的意思，表示不会阻塞后面的同步代码,因为是promise对象，我们用then来获取数据
async function fn () {
return 'async 函数'
}
fn().then(value => {
console.log(value);
})
console.log('我会先执行');
image.png
- 处理异常,如果函数内部有返回一个值，内部会调用
Promise.resolve函数返回值，如果抛出错误，内部会调用Promise.reject函数，返回错误信息；我们可以用catch方法接受这个错误信息
async function fn (flag) {
if (flag) {
return 'success'
} else {
throw 'fail'
}
}
console.log(fn(true)); //Promise {<fulfilled>: 'success'}
console.log(fn(false)); //Promise {<rejected>: 'fail'}
fn(false).then(value => {
console.log(value);
}).catch (e => {
console.log(e); //fail
})
await
await操作符必须写在async函数内部，否则会报错
用于等待一个
Promise对象或者任何要等待的值返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。
await操作符会暂停当前async函数的执行，等待promise执行结束
//若正常处理(fulfilled)
async function fn () {
let f = await Promise.resolve(100)
console.log(f); //100
}
fn()
//若抛出异常(rejected)
async function fn () {
try {
await Promise.reject('出错了')
} catch (e) {
console.log(e); //出错了
}
}
fn()
//如果返回值不是promise,会当作正常处理的值返回
async function fn () {
let f = await 20
console.log(f); //20
}
fn()
使用场景
我们会在什么场景下使用async,await?
- promise解决了回调地狱的问题，而
async,await来进一步优化它 - 处理多重then方法的调用
var num = function (n) {
return new Promise ((resolve, reject) => {
setTimeout(resolve, n, n * 10)
})
}
let step1 = function (n) {
console.log('step1 ' + n);
return num(n)
}
let step2 = function (n) {
console.log('step2 ' + n);
return num(n)
}
let step3 = function (n) {
console.log('step3 ' + n);
return num(n)
}
//使用then链处理
function deal () {
var n1 = 10
step1(n1).then(n2 => step2(n2))
.then(n3 => step3(n3))
.then(res => res)
}
deal()
//使用`async,await`处理
async function deal () {
let n1 = 10
let n2 = await step1(n1)
let n3 = await step2(n2)
let res = await step3(n3)
return res
}
deal()
可以明显看出使用async,await之后，我们可以像使用同步代码一样处理异步任务，体验更佳
