async
async关键字用于声明一个函数是异步函数,使用async关键字定义的函数会自动返回一个Promise对象。
函数的返回值会被包装在一个resolved的promise中,例如,下面的函数返回一个结果为1的resolved promise,让我们测试一下:
async function f() {
return 1;
}
f().then(val => {
console.log(val);
})//1
我们也可以显示地返回一个promise,效果是一样的:
async function f() {
return Promise.resolve(1);
}
f().then(val => {
console.log(val);
});//1
await
await 也是一个修饰符,只能放在async定义的函数内。可以理解为等待。
await 修饰的如果是Promise对象:可以获取Promise中返回的内容(resolve或reject的参数),且取到值后语句才会往下执行;
如果不是Promise对象:会立刻把这个非promise的东西当做await表达式的结果。
async function fun(){
let a = await 1;
let b = await new Promise((resolve,reject)=>{
setTimeout(function(){
resolve('setTimeout')
},3000)
})
let c = await function(){
return 'function'
}()
console.log(a,b,c)
}
fun(); // 3秒后输出: 1 "setTimeout" "function"
上述代码中,a的值后await修饰的不是promise对象,可以立即获得值a=1;b的值后await修饰的是一个promise对象,所以函数fun在执行的时候,“暂停”在此处,并在promise settle时,拿到result作为结果才会继续往下执行;同样c也可以立即获取到值c='function'。
值得注意的是,await只会阻塞当前函数内的处理逻辑,并不能阻塞浏览器,因为本质上它还是异步的。下面的例子可以说明这一点。
function getSomeThing() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('获取成功')
}, 3000)
})
}
let a=null;
async function test() {
console.log("等待前")
let a = await getSomeThing();
console.log(a)
console.log("等待后")
}
test();
a="改变a";
console.log(a);
//等待前
//改变
//获取成功
//等待后
参考教程:
https://blog.csdn.net/qq_42941302/article/details/109245356
https://zh.javascript.info/async-await