async简介
async作为关键字放到函数前面,表示函数是异步函数,意味着该函数执行不会阻塞后面代码的执行。
async function timeout() {
return 'hello world';
}
timout()
此时没有任何输出。
console.log(timeout())
此时console.log输出一个promise对象。
说明async函数返回的是promise对象;若要获取promise对象返回值,需要用then方法:
async function timeout(){
return 'hello world'
}
timeout().then(result=>{
console.log(result)
})
console.log('虽然在后面,但是我先执行')
控制台中,先打印‘虽然在后面,但是我先执行’,后打印‘hello world’。说明异步函数没有阻塞后面代码执行。
console.log(timeout())
上述代码打印的promise有一个resolved,
Promise {<resolved>:"hello world"}
这是async函数内部实现原理:如果async函数中有返回值,则当调用该函数时,内部会调用Promise.solve()方法把他转化为promise.resolve对象作为返回;但如果内部报错,则调用Promise.reject()返回一个promise对象。
据此修改timeout函数:
async function timeout(flag){
if(flag){
return "hello world"
}else{
return "failure"
}
}
console.log(timeout(true))
console.log(timeout(false))
控制台打印如下:
Promise{<resolved>:'hello world'}
Promise{<rejected>:'failure'}
await简介
await是等待的意思,await关键字后面可以放任何表达式,不过更多的是放一个返回promise对象的表达式,注意await关键字只能放到async函数里面
构造一个函数,返回promise对象,作用是2秒以后让输入值乘以2:
function doubleAfter2seconds(num){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(2*num)
},2000)
})
}
现在再写一个async函数,从而可以使用await关键字,await后面放置的就是可以返回promise对象的表达式,即上面的doubleAfter2seconds函数:
async function test(){
let result = await doubleAfter2seconds(100)
console.log(result)
}
调用test函数,打开控制台,2s后输出200。
代码执行过程:调用test函数,里面遇到await,await表示等候,代码走到这,就暂停在这里不继续向下执行了,等候promise对象执行完毕。然后拿到promise.resolve的值并返回。返回值拿到以后,再继续执行。具体到上述代码:遇到await之后,代码暂停执行,等待doubleAfter2seconds(100)执行完毕,doubleAfter2seconds(100)返回的promise开始执行,2秒之后,promise resolve了,返回了200,赋值给result,暂停结束,代码才开始继续执行。
这个函数无法看出async/await的作用,但如果把三个doubleAfter2seconds()函数的结果相加呢?
async function tribleTest(){
let first = await doubleAfter2seconds(100);
let second = await doubleAfter2seconds(100);
let third = await doubleAfter2seconds(100);
console.log(first + second + third);
}
6秒后,输出600。异步函数变成同步。