终极异步处理方案async、await，相比传统异步处理方案有什么优势？

最新推荐文章于 2023-01-03 23:09:47 发布

SYWsuperman

最新推荐文章于 2023-01-03 23:09:47 发布

阅读量542

点赞数 2

分类专栏： ES6 文章标签： es6 ajax

本文链接：https://blog.csdn.net/qq_45516476/article/details/105349222

版权

本文探讨了async、await与传统异步处理方式的区别，指出async如何解决逻辑分散、不符合单一职责原则、不灵活等问题。通过实例展示了async、await如何使异步代码更加优雅和易于阅读，降低代码阅读难度，避免回调地狱。

摘要由CSDN通过智能技术生成

写在前面

声明

首先，这篇博客较为主观，仅代表个人观点，如果您有不同意见或者发现本文有错误，您可以留言或者加我的微信15011177648

需要的基础技能

async、await是es2017(es8)的新功能，也是Promise的语法糖，想学习async、await的话需要先了解Promise的使用
传送门：Promise使用
想了解Promise的实现原理，可以去看看我之前的博客
传送门：Promise实现原理

async、await简单介绍

被async关键字修饰的函数一定返回一个promise对象

 <script>
    (async function getPromise() {
        let pro = ajax();
        console.log(pro)
    })()
    async function ajax() {
        return 1
    }
</script>

在这里插入图片描述

如果这个函数又被await修饰，则返回promise的PromiseValue

<script>
    (async function getPromise() {
        let pro = await ajax();
        console.log(pro)
    })()
    async function ajax() {
        return 1
    }
</script>

在这里插入图片描述

async、await是一个Promise的语法糖，以下两种方式相等

<script>
    (async function () {
        await request();
        console.log('后续处理')
    })()
    async function request() {
        return new Promise((resolve, reject) => {
            ajax('', () => {
                resolve()
                console.log('请求完成')
            })
        })
    }
    function ajax(remark, cb = () => { }) {
        $.ajax({
            url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
            method: 'get',
            success: cb
        })
    }
</script>

<script>
    (function () {
        new Promise((resolve, reject) => {
            ajax('', () => {
                resolve()
                console.log('请求完成')
            })
        }).then(() => {
            console.log('后续处理');
        })
    })()
    function ajax(remark, cb = () => { }) {
        $.ajax({
            url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
            method: 'get',
            success: cb
        })
    }
</script>

通过async与await，异步的处理就变得更优雅，更容易阅读

async、await与之前的异步处理方式的不同

我认为，async的异步处理方式与之前的异步处理方式最大的不同在于回调函数的位置
在之前的异步处理方案中，回调函数作为一个参数传入异步处理函数
而在使用async时，回调函数直接像同步函数一样写在之前函数的下方即可
之后把之前的调用方式成为传统调用，async、await叫做async调用

例：传统调用

<body>
    <div>
        <span>两个接口依次调用：</span>
        <button id="twoAPI">click me</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $('#twoAPI').click(() => {
        test1()
    })

    function test1() {
        ajax('no1', () => {
            test2()