JavaScript学习笔记（三十六）——async和await

最新推荐文章于 2024-04-16 16:02:46 发布

粽子师兄

最新推荐文章于 2024-04-16 16:02:46 发布

阅读量179

点赞数

分类专栏： javaScript 文章标签：多线程 async await javascript 异步

本文链接：https://blog.csdn.net/qq_45268602/article/details/108700338

版权

javaScript 专栏收录该内容

67 篇文章 3 订阅

订阅专栏

上一篇文章中，我们使用Promise处理异步行为，虽然我们的代码已经改观了很多了，基本已经可以维护了，但是对于一个程序员来说，这个样子是不够的。我们还需要更加的简化代码，所以我们就需要用到一个 es7 的语法了，叫做 async/await

async

async关键字用于定义异步函数(其实是Generator的语法糖)
定义：放在function关键字之前，表示“这是一个内部有异步行为的函数”

    async function aa() {
        console.log(1);
        console.log(2);
        console.log(3);
    }

执行：当执行的时候，会按照顺序执行内部代码

    async function aa() {
        console.log(1);
        console.log(2);
        console.log(3);
    }
    aa(); // 1 2 3

返回值
- async函数的返回值是一个Promise实例
- 该实例的状态取决于async函数的执行情况
  - 如果async函数执行顺利，中间没有任何异常发生，则Promise实例的状态变为resolved，此时接收到的数据是看函数里面的return返回的内容
  - 如果async函数执行异常，则Promise实例的状态变为rejected，此时接收到的数据的是报错的内容

    async function aa() {
        console.log(1);
        console.log(2);
        console.log(3);
    }
    let p = aa(); // 1 2 3
    p.then(() => {
        console.log("success"); // success
    }).catch(() => {
        console.log("failed"); 
    });

await

await关键字用于定义需要等待的代码(其实是yield的语法糖)
当执行到await时，JS线程会交出控制权
await 必须放在async函数里面，它表示“等待”，等后面的代码执行完
等待的代码执行完毕之后，才会继续往下执行后面的代码
await后面必须是Promise实例，如果不是，会通过Promise.resolve()，将后面的内容转为Promise实例
如果await后面的Promise实例转为成功状态，那么await前面的变量的值，就是该实例成功时传递的值
如果await后面的Promise实例转为失败状态，那么整个async函数终止执行，并将失败的数据传递给async函数的Promise实例去处理

总结：await等待后面的Promise实例状态变化之后，再继续执行当前async函数，等待的过程中，JS线程不会停留，而是跳出async函数，继续执行其他内容。

使用演示：

<!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>
    <!-- async和await一定是建立在Promise基础之上 -->
    <script src="AJAX.js"></script>
    <script>
    function taskOne() {
        return new Promise(function (resolve, reject) {
            AJAX.get("a.php", {}, function (data) {
                console.log(2);
                if (data.error === 0) {
                    resolve(data);
                } else {
                    reject(data);
                }
            })
        })
    }

    function taskTwo() {
        return new Promise(function (resolve, reject) {
            AJAX.get("b.php", {}, function (data) {
                console.log(4);
                if (data.error === 0) {
                    resolve(data);
                } else {
                    reject(data);
                }
            })
        })
    }

    function taskThree() {
        return new Promise(function (resolve, reject) {
            AJAX.get("c.php", {}, function (data) {
                console.log(6);
                if (data.error === 0) {
                    resolve(data);
                } else {
                    reject(data);
                }
            })
        })
    }

    async function demo() {
        var data1 = await taskOne();
        console.log(data1);
        var data2 = await taskTwo();
        console.log(data2);
        var data3 = await taskThree();
        console.log(data3);
        return;
    }
    let p = demo();
        p.then(function() {
            console.log("请求结束");
        })
        .catch(function(data) {
        })
    </script>
</body>
</html>