async/await --- 异步处理
- async用法(作为关键字放到函数前面)
async function timeout() {
return 'timeout'
}
调用timeout函数会返回一个promise对象。
console.log(timeout());
看下打印结果
async函数的调用返回的是一个promise对象,还有status和value,如果async函数中有返回值,内部调用Promise.solve()方法把它转化成一个promise对象返回
async function timeout() {
return new Error('rejected');
}
console.log(timeout())
如果是想要获取async函数的执行结果,需要调用promise的then或者catch来给它注册回调函数
async function timeout() {
return 'timeout'
}
timeout().then(result => {
console.log(result)
})
如果async函数执行完,返回的promise没有注册回调函数,比如仅仅内部做了一次for循环,那么函数的调用就是执行函数体,跟普通函数无异,唯一区别就是函数执行完会返回一个promise对象
async function timeout() {
for (var i = 0; i < 5; i++) {
console.log(`async -- ${i}`)
}
}
console.log(timeout());
console.log('out')
async 函数的执行会返回一个promise对象,并且把内部的值进行promise的封装。如果promise对象通过then或catch方法注册了回调函数,async函数执行完以后,注册的回调函数就会放到异步队列中,等待执行。
写一个函数,返回一个promise对象,该函数作用是2s之后让数值乘2
const doubleAfterTwoSeconds = (num) => {
return new Promise((resolve,rejected) => {
setTimeout(()=>{
resolve(2 * num)
},2000)
})
}
再写一个async函数,从而可以使用await关键字,await后面放置的就是返回promise对象的一个表达式,所以await后面可以跟上doubleAfterTwoSeconds函数的调用
const returnDoubleVak= async () => {
const result = await doubleAfterTwoSeconds(10);
console.log(result);
}
调用returnDoubleVak函数
returnDoubleVak()
打开控制台,2s之后,输入20
此时代码的执行过程: 调用returnDoubleVak函数,在它里面遇到了await(await表示等待),代码就暂停到这里,不再往下执行,它等待后面的promise对象执行完毕,然后拿到promise resolve的值并进行返回,返回值拿到之后,它继续向下执行。
简单修改下returnDoubleVak 函数,计算三个数的值
const returnDoubleVak = async () => {
const firstResult = await doubleAfterTwoSeconds(10);
const secondResult = await doubleAfterTwoSeconds(20);
const thridResult = await doubleAfterTwoSeconds(30);
console.log(firstResult + secondResult + thridResult);
}
returnDoubleVak()
6s后,控制台输出120,由此可看出,写异步代码就像写同步代码一样了。
当js引擎在等待promise resolve的时候,它并没有真正的暂停工作,它可以处理一些其他的事情,如果我们在returnDoubleVak 函数后面console.log(100),会先打印100。