持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

之前没怎么了解过async/await，今天学习了一下，做个笔记

介绍

介绍一下async/await的使用方式

1. async定义一个异步函数，返回的是一个promise对象
2. await后跟一个promise对象，只有状态位 resolve时才会执行后续操作
3. 两者必须在同一个函数内使用，不然会报错

成功的promise对象

定义一个函数，返回promise对象，让他在5s后执行，我们尝试使用await中断异步执行，等到promise执行结束后，再去执行后续代码

function timer() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(100)
        }, 5000)
    })
}
async function demo() {
    console.log(Date.now());
    let x = await timer()
    console.log(x, Date.now());
}
demo()

定义一个函数timer，返回promise对象，5s后状态改为成功的promise对象，然后在demo函数内被await识别状态改变成resolve，再去还行下面代码，输出x的值

失败的promise对象

如果返回的是reject的promise对象，那么就会报错

我们可以用catch接收失败的peomise对象

function timer() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(100)
        }, 5000)
    })
}
async function demo() {
    console.log(Date.now());
    let x = await timer()
    console.log(x, Date.now());
}
demo().catch((err) => {
    console.log(err);
})

因为async会自动创建一个promise对象，所以在demo执行后我们可以用catch接收失败的promise对象，

promise的all方法

如果我们有好几个不关联的异步执行的promise函数，我们可以使用promise.all方法接收执行结果，效率比正常执行要快很多，我们来试一下

function test1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("test1", Date.now());
            resolve()
​
        }, 3000)
    })
}
function test2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
            console.log("test2", Date.now());
        }, 4000)
    })
}
async function demo() {
    console.log(Date.now()); //程序开始时间
    // await test1()
    // await test2()
    //await Promise.all([test1(), test2()])
}
demo()

分别定义test1，test2两个函数，在demo中正常引用，和使用promise.all方法使用，

先使用同步

async function demo() {
    console.log(Date.now()); //程序开始时间
    await test1()
    await test2()
}

在使用异步

async function demo() {
    console.log(Date.now()); //程序开始时间
    await Promise.all([test1(), test2()])
}

两个方法对比可以看到，在同步执行时大概需要7s的时间，而promise.all则只需要4s

结束

就打这里吧，大家要开心哦

\