重学前端学习笔记（十七）--Promise里的代码为什么比setTimeout先执行？

xiongzenghui 发布于2019-08-30 10:54 / 2988人阅读

摘要：版本以及之前，本身还没有异步执行代码的能力，宿主环境传递给引擎，然后按顺序执行，由宿主发起任务。采纳引擎术语，把宿主发起的任务称为宏观任务，把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

一、引言

一个 JavaScript 引擎会常驻于内存中，它等待着 宿主 把 JavaScript 代码或者函数传递给它执行。

1、ES3版本以及之前，JavaScript 本身还没有异步执行代码的能力，宿主环境传递给 JavaScript 引擎，然后按顺序执行，由宿主发起任务。

2、ES5之后，JavaScript 引入了 Promise，不需要浏览器的安排，JavaScript 引擎本身也可以发起任务。

3、采纳JSC引擎术语，把宿主发起的任务称为宏观任务，把JavaScript引擎发起的任务称为微观任务。

二、宏观和微观任务

JavaScript 引擎等待宿主环境分配宏观任务，在 Node 术语中，把这个部分称为事件循环。

1、用伪代码来表示：跑在独立线程中的循环

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

2、整个循环做的事情基本上就是反复 等待 - 执行，这里的执行过程，其实都是一个宏观任务。可以大致理解为：宏观任务的队列就相当于时间循环。

3、在宏观任务中，JavaScript 的 Promise 还会产生异步代码，JavaScript 必须保证这些异步代码在一个宏观任务中完成，因此，每个宏观任务中又包含了一个微观任务队列：如下图所示

例如：Promise 永远在队列尾部添加微观任务。setTimeout 等宿主 API，则会添加宏观任务。

三、Promise

JavaScript 语言提供的一种标准化的异步管理方式，当进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个承诺，函数的调用方可以在合适的时机，选择等待这个承诺兑现。

3.1、基本用法示例

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

Promise 的 then 回调是一个异步的执行过程。

3.2、Promise 函数中的执行顺序

    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });
    r.then(() => console.log("c"));
    console.log("b")

    // 输出顺序：a  b  c

3.3、setTimeout 混用的 Promise

    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });
    setTimeout(()=>console.log("d"), 0)
    r.then(() => console.log("c"));
    console.log("b")

    // 输出顺序：a  b  c  d

Promise 产生的是 JavaScript 引擎内部的微任务，而 setTimeout 是浏览器 API，它产生宏任务。所以d 必定在 c 之后输出。

3.4、一个耗时 1 秒的 Promise

    setTimeout(()=>console.log("d"), 0)
    var r = new Promise(function(resolve, reject){
        resolve()
    });
    r.then(() => {
        var begin = Date.now();
        while(Date.now() - begin < 1000);
        console.log("c1")
        new Promise(function(resolve, reject){
            resolve()
        }).then(() => console.log("c2"))
    });

    // 输出顺序：c1  c2  d

这个例子很好的解释了微任务优先的原理。

3.5、如何分析异步执行的顺序

1、首先我们分析有多少个宏任务

2、在每个宏任务中，分析有多少个微任务

3、根据调用次序，确定宏任务中的微任务执行次序

4、根据宏任务的触发规则和调用次序，确定宏任务的执行次序

5、确定整个顺序

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            console.log("b");
            setTimeout(resolve,duration);
        })
    }
    console.log("a");
    sleep(5000).then(()=>console.log("c"));

    // 输出顺序：a  b  c（c要等5秒）

第一个宏观任务中，包含了先后同步执行的 console.log("a"); 和 console.log("b");。

setTimeout 后，第二个宏观任务执行调用了 resolve，然后 then 中的代码异步得到执行，调用了 console.log("c")。

四、新特性：async/await

async/await 是 ES2016 新加入的特性，它提供了用 for、if 等代码结构来编写异步的方式，并且运行时基础是 Promise。

1、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")
}

foo();

// 输出顺序：a  b（b要等两秒）

2、async 嵌套

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

foo2();

// 输出顺序：a（a等两秒） b（b也等两秒）

个人总结

看完这篇确实帮我解决了之前困扰我的问题，赞一个。。。明天也要加油鸭。。。。

混合云专线服务学习编程先学什么前端比java哪个难 java做后台比前端雅克比迭代c语言代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114640.html

重学前端学习笔记（十七）--Promise里的代码为什么比setTimeout先执行？

摘要：版本以及之前，本身还没有异步执行代码的能力，宿主环境传递给引擎，然后按顺序执行，由宿主发起任务。采纳引擎术语，把宿主发起的任务称为宏观任务，把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的...

pinecone 2019-08-02 16:18 评论0 收藏0
重学前端学习笔记（十七）--Promise里的代码为什么比setTimeout先执行？

摘要：版本以及之前，本身还没有异步执行代码的能力，宿主环境传递给引擎，然后按顺序执行，由宿主发起任务。采纳引擎术语，把宿主发起的任务称为宏观任务，把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的...

zorpan 2019-08-26 13:47 评论0 收藏0
重学前端学习笔记（十七）--Promise里的代码为什么比setTimeout先执行？

摘要：版本以及之前，本身还没有异步执行代码的能力，宿主环境传递给引擎，然后按顺序执行，由宿主发起任务。采纳引擎术语，把宿主发起的任务称为宏观任务，把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的...

Kross 2019-08-05 17:02 评论0 收藏0
【16】winter重学前端 - JavaScript执行（一）：Promise里的代码为什么比se

摘要：即使耗时一秒的执行完毕，再的，仍然先于执行了，这很好地解释了微任务优先的原理。把整个代码分割成了个宏观任务，这里不论是秒还是秒，都是一样的。 js实现异步的几种形式回调函数事件监听 - 事件驱动模式发布/订阅 - 观察者模式 Promises对象 js异步历史一个 JavaScript 引擎会常驻于内存中，它等待着我们把JavaScript 代码或者函数传递给它执行在 ...

Vicky 2019-08-23 17:02 评论0 收藏0
重学前端学习笔记（二十七）--JavaScript的词法

摘要：模板语法四种词法定义二空白符号空白符号分类或称是，是缩进符，字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱...

jayzou 2019-08-30 11:04 评论0 收藏0