Promise从入门到精通（第4章 async 和 await）

第4章 async 和 await

第4章 async 和 await

4.1. mdn文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

4.2. async函数

函数的返回值为 promise 对象
promise 对象的结果由 async 函数执行的返回值决定(和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>Documenttitle>
head>
<body>
    <script>
        // async函数返回结果是一个Promise
        async function main(){
            // 1.如果返回值是一个非Promise，那么返回的Promise状态为fulfilled，结果值为返回的结果
            // return "123";

            // 2.如果返回值是一个Promise，那么返回的Promise状态为Promise的状态，结果值为Promise返回的结果
            // return new Promise((resolve,reject)=>{
            //     reject("123");
            // });

            // 3.如果返回值是抛出的异常，那么返回的Promise状态为reject，结果值为抛出的异常
            throw "error";
        }
        let result = main()
        console.log(result);
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4.3 await函数

4.3.1. await 表达式

await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
如果表达式是 promise 对象, await 返回的是 promise 成功的值
如果表达式是其它值, 直接将此值作为 await 的返回值

**4.3.2 ** 注意

await 必须写在 async 函数中, 但 async 函数中可以没有 await
如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

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>Documenttitle>
head>

<body>
    <script>
        // async函数返回结果是一个Promise
        async function main() {
            let p = new Promise((resolve, reject) => {
                resolve("ok");
            })
            // 1.如果await右侧是Promise，那么返回的是 promise 成功的值
            let res = await p;
            console.log(res);

            // 2.如果await右侧不是Promise，那么直接将数据返回
            let res2 = await "123";
            console.log(res2);

            // 3.1.如果await右侧是Promise，但Promise执行失败，那么await会抛出异常，需要使用try-catch捕获
            let p2 = new Promise((resolve, reject) => {
                reject("ok");
            });

            try {
                let res3 = await p2;
            } catch (error) {
                console.log(error);
            }
        }
        main()
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

4.4 async和await结合案例

// 要求读取当前文件夹下三个文件，并合并输出

// 回调函数形式实现
fs.readFile('./1.html',(err, data1)=>{
    if(err) throw err;
    fs.readFile('./1.html',(err, data2)=>{
        if(err) throw err;
        fs.readFile('./1.html',(err, data3)=>{
            if(err) throw err;
            console.log(data1+data2+data3);
        })
    })
})

// async和await结合实现
const fs = require('fs');
const util = require('util');
const minReadFile = util.promisify(fs.readFile);

async function main(){
    try {
        let data1 = await minReadFile("./1.html");
        let data2 = await minReadFile("./2.html");
        let data3 = await minReadFile("./3.html");
        console.log(data1+data2+data3);
    } catch (error) {
        console.log(error);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4.5 async和await结合AJAX发送请求

     <script>        
		function sendAJAX(url){
            return new Promise((resolve, reject)=>{})
        }
        let btn = document.querySelector("#btn");

        btn.addEventListener('click', async function(){
            let duanzi = await sendAJAX("https://api.apiopen.top/getJoke");
            console.log(duanzi);
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11

相关阅读:
算法-递归算法
winform中也可以这样做数据展示✨
水滴低代码搭建——6倍提效，新品首发素材审核系统实践之路
flink测试redis sink报错
Unity Asset Bundle Browser 工具
MMWHS数据集
【网络编程开发系列】好端端的MQTT-broker重新部署后居然出现TLS握手失败了
应用部署引起上游服务抖动问题分析及优化实践方案
PHP array_combine() 函数
±15kV ESD 保护、3V-5.5V 供电、真 RS-232 收发器MS2232/MS2232T

原文地址：https://blog.csdn.net/cjhxydream/article/details/126020593