• 目录

async和await实现同步

阅读量: 70 编辑

async 和 await 实现同步

  • async：异步（无等待）

  • await：等待（是为了同步）

一、await 关键字只在 async 函数内有效。

async/await 的目的为了简化使用基于promise的API时所需的语法（比如then）。

async 函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise，那么它将会被隐式地包装在一个promise中。

promise 是异步无等待的。当没有使用 await 语句执行 async 函数时，它是非阻塞的。

async function foo() {
   return 1
}

等价于

function foo() {
   return Promise.resolve(1)
}

二、async函数可能包含0个或者多个await表达式。

await 表达式会暂停整个 async 函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。

promise的解决值会被当作该await表达式的返回值。await等待的就是解决值。

三、代码案例

JavaScript默认是异步执行

function delayPrint_1(time){
    setTimeout(() => {
        console.log("delayPrint_1, delay time = " + time)
    }, time); 
}

function test(){
    console.log("step 1")
    delayPrint_1(2000)
    delayPrint_1(1000)
    console.log("step 2")
}

//调用
test()

//输出结果是（对比代码执行顺序，可以看出是异步执行，谁快谁执行，并不阻塞）
step 1
step 2
delayPrint_1, delay time = 1000
delayPrint_1, delay time = 2000

如果想做到同步执行，怎么办呢？

借助 async 和 await 语法

//返回Promise对象
function delayPrint_2(time){
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("delayPrint_2, delay time = " + time)
            resolve('hello'); //返回解决值resolve（await等的就是他）
        }, time);
    });
    
}

//使用async 和 await
async function test(){
    console.log("step 1")
    await delayPrint_2(2000) //同步等待Promise的resolve
    await delayPrint_2(1000)
    console.log("step 2")
}

//函数调用
test()

//输出结果是（对比代码执行顺序，可以看出是同步执行，阻塞）
step 1
delayPrint_2, delay time = 2000
delayPrint_2, delay time = 1000
step 2

四、Promise 的 then 语法

then 也是为了同步，的意思是在执行完的结果中再执行其他的

这种结构较复杂，可以实现局部同步

function test(){
    console.log("step 1")
    
    //then 链
    delayPrint_2(2000).then(t1=>{	//在执行完2000的结果中
        delayPrint_2(1000).then(t2=>{	//再执行1000
            console.log(t2)
        })
    })
    
    console.log("step 2")
}

//函数调用
test()

//输出结果是（对比代码执行顺序，可以看出是 then 部分同步）
step 1
step 2
delayPrint_2, delay time = 2000
delayPrint_2, delay time = 1000
  • 目录