【九月打卡】第1天 前端工程师2022版

课程名称：async await 基础知识

课程章节：认识 async 和 await 、使用 async 和 await

课程讲师： Alex

课程内容：

async/await 基础知识

1、 认识 async、await

①是什么

async await 是ES2017 新增的两个关键字

②有什么用

async 翻译过来就是 异步

可以声明一个 async 函数，表示函数里有异步操作。如何做？

首先我们有一个普通函数

function fn() {}

我们在这个普通函数的前面加上一个 async 用空格隔开

async function fn() {}

现在，fn 就由一个普通函数变为一个 async/异步 函数

那么，到底 async 函数有什么用？

async await 一般是连起来用的，所以async 主要就是给await 提供一个场所

await 异步等待

表示等待一个异步操作

表示紧跟在await后面的是异步的，需要等待结果

await需要和async一起使用

伪代码：

③为什么用

使异步(Promise)操作更简洁、更方便

使异步代码看起来像同步的，更容易理解

2 、使用 async/await

（实现一个效果：打开一个网站，弹出广告，隔几秒消失，再隔几秒弹出，又隔几秒消失……）

实现方式：通过操作 classname 让它显示和隐藏，显示就把这个class移除，隐藏就加上

classList获取的是元素的class值，none就是其中一个值，并设置了隐藏的样式

当class中有none类的时候，元素会隐藏；class中移除none类的时候，元素默认显示

demo：

<style>
        .ad{
            display: block;
            width: 300px;
            height: 150px;
            margin: 0 auto;
        }
        .none{
            display: none;
        }
    </style>

 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/ad.jpg" alt="前端体系课" class="ad none" id="ad">

这里用三种方式实现：

①普通函数

function ad() {
            const adDom = document.getElementById('ad');

            setTimeout( ()=> {
                // 显示
                adDom.classList.remove('none');

                setTimeout(() => {
                    // 隐藏
                    adDom.classList.add('none')
                    
                    //setTimeout
                },2000)
            },1000)
        }
        ad();

普通函数的问题已经出来了，如果我接下来再隔2秒需要隐藏，那么我需要在里面再开一个定时器，这样层层嵌套，就出现了回调地狱的问题

② promise函数

// 先写一个等待函数
        function wait(ms){
            return new Promise(resolve => {
                setTimeout(resolve,ms);
            });
        }
        function ad() {
            const adDom = document.getElementById('ad');

            wait(1000).then( () => {
                // 显示
                adDom.classList.remove('none');

                return wait(2000);
            }).then(() => {
                // 隐藏
                adDom.classList.add('none');

                return wait(1000);
            }).then( () => {
                // 显示
                adDom.classList.remove('none');

                return wait(2000);
            }).then(() => {
                // 隐藏
                adDom.classList.add('none');

            })
        }
        ad();

解决了回调地狱问题，将纵向发展的代码展开成横向的

虽然有进步，但是还是很麻烦

③ async/await 函数

// 先写一个等待函数
        function wait(ms){
            return new Promise(resolve => {
                setTimeout(resolve,ms);
            });
        }
        async function ad() {
            const adDom = document.getElementById('ad');

            await wait(1000);
            // 显示
            adDom.classList.remove('none');
            await wait(2000);
            // 隐藏
            adDom.classList.add('none');  
            
            await wait(1000);
            // 显示
            adDom.classList.remove('none');
            await wait(2000);
            // 隐藏
            adDom.classList.add('none'); 
        }
        ad();

由此可以看出，我们用 async/await 函数写出来的代码更简洁、方便，而且它看起来像同步代码

课程收获：

老师讲的非常细致，通俗易懂。这一节学的是 async/await 基础知识，通过学习我了解了什么是 async/await ，以及 async/await 有什么用、为什么用 async/await ，给以后的学习打下了基础。期待后面的学习