JavaScript之async和await修饰符

最新推荐文章于 2024-05-24 11:47:51 发布

cloudOnSkyline

最新推荐文章于 2024-05-24 11:47:51 发布

阅读量407

点赞数

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125889130

版权

案例专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文主要介绍JavaScript中async和await修饰符的使用，async和await两种语法的结合可以让异步代码像同步代码一样。

1.async修饰符

（1）return不是promise对象，对应状态为成功状态，返回的值即可通过then方法的第一个回调函数获取

（2）return的是promise对象，其状态与then方法的调用一一对应

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.return不是promise对象，对应状态为成功状态，返回的值即可通过then方法的第一个回调函数获取
        async function p() {
            return 'success'
        }
        p().then(resolve => console.log(resolve));
        // 2.return的是promise对象，其状态与then方法的调用一一对应
        async function p1() {
            return new Promise((resolve, reject) => {
                let flag = false;
                if (flag) {
                    resolve('success')
                } else {
                    reject('fail');
                }
            })
        };
        p1().then(resolve => console.log(resolve), reject => console.log(reject))
    </script>
</body>

</html>

</html>

2.await修饰符

（1）await必须写在async内部
（2）await后一般接promise对象，获取的是该promise对象成功状态的值
（3）须等待await中的代码执行完，才会执行后续操作

（4）利用try..catch捕获错误状态的信息

（5）利用async和await封装ajax

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.await必须写在async内部
        // 2.await后一般接promise对象，获取的是该promise对象成功状态的值
        // 3.须等待await中的代码执行完，才会执行后续操作
        // async function a() {
        //     console.log(1);
        //     let a = await new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //             console.log(2);
        //             // resolve后才能执行后续操作
        //             resolve(3);
        //         }, 3000)
        //     });
        //     console.log(a);
        // }
        // a();
        // 4.利用try..catch捕获错误状态的信息
        // async function b() {
        //     try {
        //         let b = await new Promise((resolve, reject) => {
        //             reject('错误信息');
        //         })
        //     } catch (erro) {
        //         console.log(erro);
        //     }

        // }
        // b();
        // 5.async await ajax的封装
        // async function sendAjax(url) {
        //     return new Promise((resolve, reject) => {
        //         let http = new XMLHttpRequest();
        //         http.open("GET", url);
        //         http.send();
        //         http.onreadystatechange = function() {
        //             if (http.readyState == 4) {
        //                 if (http.status == 200) {
        //                     resolve(JSON.parse(http.response));
        //                 }
        //             }
        //         }
        //     })
        // }

        // async function demo() {
        //     let a = await sendAjax('http://127.0.0.1:5500/test.json');
        //     console.log(a);
        //     if (a.code == 200) {
        //         console.log('有数据');
        //     } else {
        //         console.log('无数据');
        //     }
        // }
        // demo();
    </script>
</body>

</html>