【特别甜的语法糖】async 与 await

HelloWorldZ

发布于 2024-03-20 18:43:25

1360

发布于 2024-03-20 18:43:25

文章被收录于专栏：前端开发

async 和 await

异步编程谁来管？交给 Promise 来就好了

需求：一个定时器完成，再执行下一个定时器，请使用 Promise 方式来设计实现

如下两个定时器的设置，在控制台是等待 1s 后，同时输出 1 2

setTimeout(()=> {
    console.loog(1);
}, 1000)

setTimeout(()=> {
    console.log(2);
}, 1000)

如下两个定时器的设置，可以完成需要，但是回调多了，就是回调地狱

<script>
    setTimeout(() => {
        console.log(1);
        setTimeout(() => {
            console.log(2);
        }, 1000)
    }, 1000)
</script>

我们使用 Promise 来管理

let promise1 = new Promise(resolve => {
    setTimeout(() => {
        resolve(1);
    }, 1000)
})
promise1.then(res => {
    console.log(res);
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(2)
        },1000)
    })
}).then(res => {
    console.log(res)
})

但是能不能可以更加简洁使用 Promise 呢？

语法糖：async 与 await

简化 Promise 写法

async

async 修饰一个函数，控制其返回的结果是一个 Promies 实例，可以理解为将同步函数（或异步函数），修饰成 Promise 管理的异步函数。

    <script>
        async function func() {
            return Promise.resolve(10)
        }
        func().then(res => {
            console.log(res);
        })
    </script>

await

await 可以理解为把一个异步操作修饰为同步的效果（但是它还是异步）

    <script>
        async function func() {
            let res;
            // => await 会等待当前的 Promise 实例返回一个正确的实例后再往下走
            res = await new Promise(resolve => {
                setTimeout(() => {
                    resolve(1)
                }, 1000)
            })
            console.log(res);

            res = await new Promise(resolve => {
                setTimeout(() => {
                    resolve(2)
                }, 1000)
            })
            console.log(res);
        }
        func()
    </script>

对如下功能做修改

        let promise1 = new Promise(resolve => {
            asyncCall(data => {
                resolve(1)
            })
        })

        let promise2 = new Promise(resolve => {
            otherAsyncCall(data => {
                resolve(2)
            })
        })

        promise1.then(() => {
            return promise2;
        }).then(() => {

        })

使用 acync await

        let promise1 = new Promise(resolve => {
            asyncCall(data => {
                resolve(1)
            })
        })

        let promise2 = new Promise(resolve => {
            otherAsyncCall(data => {
                resolve(2)
            })
        })
        async function func() {
            await promise1;
            await promise2;
        }

当 axios 请求碰见 acync await

        async function func() {
            let userInfo = await axios.get('/user/info')
            let score = await axios.get('/user/score', {
                param: {
                    id: userInfo.id
                }
            })
            console.log(score)
        }

以上便是ES7系列新增加的关于对Promise的一种新的写法和处理方式，能够在 Promise then链解决回调地狱的基础之上，再简化结果。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

异步