class12：async 和 await

一、async和await

1. 回顾promise

我们可以人为设置promise的状态为成功或失败，默认是等待状态。resolve定义成功的状态，reject 定义失败的状态。用 .then 获取成功的状态，而用 .catch 获取失败的状态。

// index.html
<script>
    let promise = new Promise((resolve, reject) => {
        resolve("成功111");     //  成功
        // reject("失败222");   //  失败
    });

    promise.then((data) => {    
        console.log(data);
    }).catch((err) => {
        console.log(err);
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

结论：promise构造函数自动等待自身回调函数的变化，默认状态为等待，当回调函数从等待状态变为成功状态或失败状态时才会有返回值，代码才能继续执行，.then为异步代码。

2. async和await

async 和 await 关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

async 和函数一起使用，写在函数的前面，表示函数内部有异步代码；await 等待异步执行完毕获取到结果并赋值, 同时后续代码不再执行,需要等待await有了结果之后才会往下执行。

<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
    <script>     
        async function fun() {
            let result = await axios({
                method:"get",
                url:"/vvv",
            });
            console.log(result);  // 异步代码
            console.log("XXX");   // 同步代码
        }
        fun();

    script>

body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

案例：

async function fun() {
    let ar = 123;
    await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
        }, 5000)
    });
    console.log("222");
};
fun();
1
2
3
4
5
6
7
8
9
10

结果：等待5s后，控制台输出222。

深入了解async和await，可参考理解 JavaScript 的 async/await - SegmentFault 思否

相关阅读:
统一SQL 支持Oracle cast函数转换
CSS语法及其选择器
PCIe架构的处理器系统介绍
最强人工智能ChatGPT引领AIGC发展
工程总承包系列之工程总承包合同中的优先受偿权
C++并发与多线程(7) | 创建多个线程时数据共享的问题
电商api接口进行数据采集获取淘宝/天猫/京东/抖音多平台商品价格
974. 和可被 K 整除的子数组
算法|344.反转字符串 541. 反转字符串II 卡码网：54.替换数字 151.翻转字符串里的单词卡码网：55.右旋转字符串
华为云OBS文件上传下载工具类

原文地址：https://blog.csdn.net/qq_51667621/article/details/127130115

class12：async 和 await

目录

一、async和await

1. 回顾promise

2. async和await