javascript:async/await

发布时间 2023-07-09 22:59:29作者: MARSHBAN

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