JavaScript 笔记五:同步、异步、Promise

都是本人理解,笔记大致概念,不详细也并非完全正确,所以仅供参考。


同步、异步

JS 代码的执行,可以理解为任务的执行,则其中有同步任务和异步任务。

同步任务是指在主线程上的任务,只有前面一个执行完毕,才会再执行下一个。
同步任务好理解,异步任务的执行主要是以下步骤:

  1. 主线程任务进行,若发现异步任务,将其移入任务队列
  2. 主线程任务结束,开始执行任务队列的异步任务
  3. 任务队列任务进行,若发现异步任务,将其移入任务队列后
  4. 重复步骤3直至没有任务队列没有任务,结束。

Promise

都知道异步任务的 callback 的循环嵌套会让人抓狂,所以就有了 Promise,Promise主要解决了JS异步任务代码的可读性问题。

Promise 的三种状态

  • pending:初始状态,非成功或失败
  • fulfilled:操作成功完成
  • rejected:操作失败

Promise 的状态的改变是不可逆的,所以它只会有:

  • pending -> fulfilled
  • pending -> rejected

同步、异步、Promise 的执行顺序

有个问题,Promise 是不是异步操作?先看代码:

setTimeout(() => {
  console.log(1);
}, 0);
new Promise(resolve => {
  console.log(2);
  resolve();
  console.log(3);
}).then(res => {
  console.log(4);
});
console.log(5);

正确结果是:2、3、5、4、1 ,来一一解析。

先忽略1和5,如果说 Promise 是同步的,那么应该是 2、4、3,但结果为什么是2、3、4?
猜想是 Promise 将 resolve(); 的方法加了某种延迟,这种延迟不加入任务队列,而仅仅是等待 Promise 初始化函数结束而开始执行,所以结果是 2、3、4。

实际上,这种操作是存在的,称之为微任务,微任务的执行顺序介于主线程和任务队列之间。
PS:任务队列的任务也称之为宏任务

所以,在上述代码中,1被插入任务队列等待,而 Promise 初始函数先输出 2,再因为 resolve(); 为微任务而先输出3,然后因为微任务的执行顺序低于主线程,所以输出 5,最后微任务执行完毕,执行 then 输出 4,最后才执行到任务队列,输出 1,所以最后的结果是:2、3、5、4、1。

如果宏任务包含微任务,那么先后顺序是?
答案:执行宏任务 > 执行包含的微任务 > 执行下一个宏任务。

new Promise(resolve1 => {
  console.log(1);
  setTimeout(() => {
    resolve1();
  }, 0);
  setTimeout(() => {
    console.log(2);
  }, 0);
})
  .then(() => {
    return new Promise(resolve2 => {
      resolve2();
      console.log(3);
    });
  })
  .then(() => {
    console.log(4);
  });
console.log(5);

答案?1、5、3、4、2

解析一下:主线程进行,Promise 初始化函数里输出 1,将宏任务 setTimeout - resolve1(); 和setTimeout - 2 放入队列,输出 5,主线程结束,执行宏任务setTimeout - resolve1(); ,执行宏任务下的微任务 resolve1() > then,新的 Promise 的执行函数中,输出 3,发现微任务 resolve2(),执行 then 输出4,此宏任务结束,下一个宏任务 setTimeout - 2 ,输出 2,结束。

总结

Promise并非异步的,仅仅因为resolve和reject方法为微操作,所以会先执行初始函数体,进而再执行then,所以会让人误以为是异步的。


ES5 写 Promise

贴代码总觉得不够深层,写一下自己的理解,参照 Promise 的三种状态,可以知道有这些属性。

  • 状态:记录 Promise 的状态
  • 成功值:成功后的返回值
  • 失败值:失败后的返回值
  • 成功回调方法:成功后的执行方法,即 then
  • 失败回调方法:失败后的执行方法,即 catch
  • resolve方法:切换状态至成功,并执行成功回调方法
  • reject方法:切换状态至失败,并执行失败回调方法
  • then方法:传入成功回调方法和失败函数方法,将此存储Promise中,切换状态时进行对应调用。

过程

  • 当 new 一个 Promise 时,将初始函数执行,然后将 then 或 catch 的回调函数存储,当切换状态成功或切换状态失败函数时,取出存储的成功回调或失败回调进行执行。
  • 像 then 的链式调用,实质是返回一个新的 Promise 即可。
  • then 的支持传入成功和失败回调,而 catch 实际上是执行 then 且仅传入失败回调。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,654评论 0 5
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 10,931评论 26 95
  • 你不知道JS:异步 第三章:Promises 在第二章,我们指出了采用回调来表达异步和管理并发时的两种主要不足:缺...
    purple_force阅读 2,013评论 0 4
  • 本文作者就是我,简书的microkof。如果您觉得本文对您的工作有意义,产生了不可估量的价值,那么请您不吝打赏我,...
    microkof阅读 15,889评论 9 40
  • 列表LIST 认识list 列表是有序、可变的容器类型(元素数量、值可变),内部的元素可以任何类型. 列表是一种序...
    rzlong阅读 161评论 0 1