美文网首页
JavaScript 笔记五:同步、异步、Promise

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

作者: 卡布奇诺的秘密_Me | 来源:发表于2018-12-27 18:10 被阅读0次

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


    同步、异步

    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 且仅传入失败回调。

    相关文章

      网友评论

          本文标题:JavaScript 笔记五:同步、异步、Promise

          本文链接:https://www.haomeiwen.com/subject/igzrlqtx.html