Async和Await

最新推荐文章于 2024-08-27 20:38:19 发布

∑空白

最新推荐文章于 2024-08-27 20:38:19 发布

阅读量94

点赞数

文章标签： node.js vue.js javascript

本文链接：https://blog.csdn.net/weixin_52460166/article/details/120617241

版权

Async

async是异步的简写用于声明一个异步的function

async可以把普通函数改成异步函数，调用都是一样的返回一个promise对象

async配合await使用是一个阻塞的异步方法

async返回一个promise对象，无论函数内部有没有await都会返回promise对象

async函数内部return返回的值会成为then回调的第一个函数

async内部出现错误会成为then回调的第二个参数或被catch所捕获

async作为一个关键字放到函数前面，这样普通函数就会变为异步函数

await

await只能在async中使用，普通函数直接使用会报错

await后面是一个promise对象，返回该对象的结果

如果await后边不是一个promise对象则返回该对象的值

回调地狱

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //什么是回调地狱
        //比如存在异步任务的代码 不可以按照顺序执行
        //比如下面三句话我们如果想让他顺序执行   吃饭  睡觉   学习
        //我们可一通过下面的操作来实现
        setTimeout(function() {
            console.log('吃饭');
            setTimeout(function() {
                console.log('睡觉');
                setTimeout(function() {
                    console.log('学习');
                }, 1000)
            }, 2000)
        }, 3000)

        //所以回调地狱可以直接理解为回调函数中嵌套回调函数


        //如何用async await 解决回调地狱
        //async作为一个关键字放到声明函数前表示该函数为一个异步任务不会阻塞后边代码执行
        async function fn() {
            return '吃饭'
        }
        console.log(fn()); //Promise {<fulfilled>: "吃饭"
        //async返回数据时自动封装成一个promise对象 处理异步任务时也可以按照成功和失败来返回不同的数据，处理成功时用than方法来接收，失败时用catch方法来接收数据
        async function fn() {
            var flag = true;
            if (flag) {
                return '吃饭';
            } else {
                throw '处理失败'
            }
        }
        fn()
            .then(data => {
                console.log(data);
            })
            .catch(data => {
                console.log(data);
            })
            //当把flag设置false时会返回处理失败

        //await
        //我们先封装一个Promise的异步任务
        function fn(aa) {
            var P = new Promise(function(resolve, reject) {
                var flag = true
                setTimeout(function() {
                    if (flag) {
                        resolve(aa)
                    } else {
                        reject('处理失败')
                    }
                })
            })
            return P
        }


        //封装一个执行以上所说的异步任务的async函数
        async function fun() {
            var f1 = await fn('吃饭')
            var f2 = await fn('睡觉')
            var f3 = await fn('学习')
            console.log(f1, f2, f3);
        }
        fun()

        //结果为 吃饭 睡觉 学习
    </script>
</body>

</html>

∑空白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Async和Await

Asyncasync是异步的简写用于声明一个异步的functionasync可以把普通函数改成异步函数，调用都是一样的返回一个promise对象async配合await使用是一个阻塞的异步方法async返回一个promise对象，无论函数内部有没有await都会返回promise对象async函数内部return返回的值会成为then回调的第一个函数async内部出现错误会成为then回调的第二个参数或被catch所捕获async作为一个关键字放到函数前面，这样普通函数就会变为异
复制链接

扫一扫