重学前端-总结：16、JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行

落日映苍穹つ 2021-09-28 05:46 235阅读 0赞

# 重学前端-总结：16、JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行 #

### 文章目录 ###

*  重学前端-总结：16、JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行
 *  前言
 *  宏观和微观任务
 *   *  Promise
     *  新特性：async/await
 *  小练习

# 前言 #

*  在 ES5 之后，JavaScript 引入了 PromiseJavaScript 引擎本身也可以发起任务
 *  宿主发起的任务称为宏观任务
 *  把 JavaScript 引擎发起的任务称为微观任务

# 宏观和微观任务 #

JavaScript 引擎等待宿主环境分配宏观任务，在操作系统中，通常等待的行为都是一个事件循环，所以在 Node 术语中，也会把这个部分称为事件循环。  
用伪代码来表示，大概是这样的：

while(TRUE) {    r = wait();    execute(r);}

我们可以看到，整个循环做的事情基本上就是反复“等待 - 执行”。当然，实际的代码中并没有这么简单，还有要判断循环是否结束、宏观任务队列等逻辑，这里为了方便你理解，我就把这些都省略掉了。

有了宏观任务和微观任务机制，我们就可以实现 JS 引擎级和宿主级的任务了，例如：Promise 永远在队列尾部添加微观任务。setTimeout 等宿主 API，则会添加宏观任务。

## Promise ##

Promise 是 JavaScript 语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过 Promise 的 then 方法的回调）。

Promise 的基本用法示例如下：

function sleep(duration) { 
            return new Promise(function(resolve, reject) { 
                setTimeout(resolve,duration);
            })
        }
        sleep(1000).then( ()=> console.log("finished"));

总结一下如何分析异步执行的顺序：

*  首先我们分析有多少个宏任务；
 *  在每个宏任务中，分析有多少个微任务；
 *  根据调用次序，确定宏任务中的微任务执行次序；
 *  根据宏任务的触发规则和调用次序，确定宏任务的执行次序；
 *  确定整个顺序。

Promise 是 JavaScript 中的一个定义，但是实际编写代码时，我们可以发现，它似乎并不比回调的方式书写更简单，但是从 ES6 开始，我们有了 async/await，这个语法改进跟 Promise 配合，能够有效地改善代码结构。

## 新特性：async/await ##

async/await 是 ES2016 新加入的特性，它提供了用 for、if 等代码结构来编写异步的方式。它的运行时基础是 Promise，面对这种比较新的特性，我们先来看一下基本用法。

async 函数必定返回 Promise，我们把所有返回 Promise 的函数都可以认为是异步函数。

async 函数是一种特殊语法，特征是在 function 关键字之前加上 async 关键字，这样，就定义了一个 async 函数，我们可以在其中使用 await 来等待一个 Promise。

function sleep(duration) { 
        return new Promise(function(resolve, reject) { 
            setTimeout(resolve,duration);
        })
    }
    async function foo(){ 
        console.log("a")
        await sleep(2000)
        console.log("b")
    }

# 小练习 #

我们现在要实现一个红绿灯，把一个圆形 div 按照绿色 3 秒，黄色 1 秒，红色 2 秒循环改变背景色，你会怎样编写这个代码呢?

<div id="traffic-light" class="my">
     hello 
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/5dc5e1d94b2c4b2f8f47412384d8dca6.png