系列文章目录

【JavaScript】Promise（零） —— 准备工作（实例对象、函数对象、回调函数分类、捕获抛出错误）

【JavaScript】Promise（一） —— 理解和使用（是什么、怎么使用、与 Ajax 配合使用、涉及的API）

【JavaScript】Promise（二） —— 几个关键问题

【JavaScript】Promise（三） —— async 与 await、宏任务与微任务

文章目录

• 系列文章目录
• • • • 一、async & await
      • • 1. async 和 await 的基本使用
        • 2. await 的应用
        • 3. async 与 await 的规则
        • 4. await 的原理
      • 二、宏任务与微任务
      • • 1. 基本理解
        • 2. 实例巩固
        • 3. 更难的一个例子

一、async & await

1. async 和 await 的基本使用

async 和 await 配合使用

	const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('a')
        }, 1000)
    })
    const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('b')
        }, 2000)
    })
    const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('c')
        }, 3000)
    });
	
    (async () => {
        try {
            const result1 = await p1
            console.log(result1);
            const result2 = await p2
            console.log(result2);
            const result3 = await p3
            console.log(result3);
        } catch (error) {
            console.log(error);
        }
    })()

2. await 的应用

	// 封装ajax请求
    function sendAjax(url) {
        return new Promise((resolve, reject) => {
            // 实例xhr
            const xhr = new XMLHttpRequest()
            // 绑定监听
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        resolve(xhr.response);
                    } else {
                        reject(`请求出了点问题`);
                    }
                }
            }
            xhr.open('GET', url)
            xhr.responseType = 'json'
            xhr.send()
        })
    }

    !(async () => {
        try {
            const result1 = await sendAjax('https://api.apiopen.top/api/sentences')
            console.log('第1次请求成功了', result1);
            const result2 = await sendAjax('https://api.apiopen.top/api/sentences')
            console.log('第2次请求成功了', result2);
            const result3 = await sendAjax('https://api.apiopen.top/api/sentences')
            console.log('第3次请求成功了', result3);
        } catch (error) {
            console.log(error);
        }
    })()

3. async 与 await 的规则

1. async 修饰的函数

2. await 表达式

3. 注意点

	const p = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('100')
        }, 500)
    })

    async function demo() {
        const a = await p
        console.log(a);
    }
    demo()

0.5s 后输出结果：

4. await 的原理

1. 使用 async 配合 await 这种写法：

2. 程序员的写法：

    const p = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('a')
        }, 1000)
    })
    async function demo() {
        const result = await p
        console.log(result);
        console.log(100);
    }
    demo()

1s 后一块输出：

3. 浏览器翻译后的代码：

    const p = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('a')
        }, 1000)
    })
    async function demo() {
        p.then(
            result => {
                console.log(result);
                console.log(100);
            }
        )
    }
    demo()

1s 后一块输出：

二、宏任务与微任务

1. 基本理解

宏队列：[宏任务1，宏任务2…]
微队列：[微任务1，微任务2…]

（宏任务：setTimeout、 setInterval,、DOM渲染、 AJAX）
（微任务：微任务有 Promise、async/await）

规则：微任务先于宏任务

实例：判断以下代码的输出顺序

    setTimeout(() => {
        console.log('timeout');
    }, 0)

    Promise.resolve(1).then(
        value => console.log('成功了', value)
    )
    Promise.resolve(2).then(
        value => console.log('成功了', value)
    )
    console.log('主线程');

执行顺序：主线程—微任务—宏任务

2. 实例巩固

    setTimeout(() => {
        console.log('timeout1');
        Promise.resolve(5).then(
            value => console.log('成功了2')
        )
    })
    setTimeout(() => {
        console.log('timeout3');
    })
    Promise.resolve(3).then(
        value => console.log('成功了4')
    )
    Promise.resolve(4).then(
        value => console.log('成功了5')
    )

执行顺序 4-5-1-2-3：

3. 更难的一个例子

分析下面代码的输出顺序：

	setTimeout(() => {
        console.log("0");
    }, 0)
    new Promise((resolve, reject) => {
        console.log('1');
        resolve()
    }).then(() => {
        console.log('2');
        new Promise((resolve, reject) => {
            console.log('3');
            resolve()
        }).then(() => {
            console.log('4');
        }).then(() => {
            console.log('5');
        })
    }).then(() => {
        console.log('6');
    })
    new Promise((resolve, reject) => {
        console.log('7');
        resolve()
    }).then(() => {
        console.log('8');
    })

结果如下：

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中…