写给群友ting的关于Promise执行顺序的问题解析。

654 阅读2分钟

为什么下面这段代码执行顺序是0123456

        Promise.resolve().then(() => {  // line1
            console.log(0);             
            return Promise.resolve(4);  // line2
        }).then((res) => {              // line3
            console.log(res)
        })

        Promise.resolve().then(() => {  //line4
            console.log(1)
        }).then(() => {                 // line5
            console.log(2)
        }).then(() => {                 // line6
            console.log(3)
        }).then(() => {                 // line7
            console.log(5)
        }).then(() => {                 // line8
            console.log(6)
        })
  • 解析过程:事件队列表示为[line1__,line4,p1],其中带有__的事件(比如line1__)为已完成事件,为了方便看执行过程,所以没有删除,以__表示。

    • 1,line1执行,then任务添加事件队列,此时事件队列[line1]
    • 2,line4执行,then任务添加事件队列,此时事件队列[line1,line4]
    • 3,无同步任务,取事件队列中任务执行
    • 4,line1执行,输出0,发现line2任务,且是promiseresolvethenjop,该任务有两异步时序,简称p1,p2,此时将事件队列中加入p1,此时事件队列[line1__,line4,p1]
    • 5,继续取任务队列line4执行,输出1,发现line5任务,加入事件队列,此时事件队列[line1__,line4__,p1,line5]
    • 6,继续取任务队列p1执行,无输出,发现p2,添加至任务队列,此时事件队列[line1__,line4__,p1__,line5,p2]
    • 7,继续取任务队列line5执行,输出2,发现line6任务,加入事件队列,此时事件队列[line1__,line4__,p1__,line5__,p2,line6]
    • 8,继续取任务队列p2执行,无输出,发现line3任务,加入事件队列,此时事件队列[line1__,line4__,p1__,line5__,p2__,line6,line3]
    • 9,继续取任务队列line6执行,输出3,发现line7任务,加入事件队列,此时事件队列[line1__,line4__,p1__,line5__,p2__,line6__,line3,line7]
    • 10,继续取任务队列line3执行,输出4,无任务加入事件队列,此时事件队列[line1__,line4__,p1__,line5__,p2__,line6__,line3__,line7]
    • 11,继续取任务队列line7执行,输出5,发现line8任务,加入事件队列,此时事件队列[line1__,line4__,p1__,line5__,p2__,line6__,line3__,line7__,line8]
    • 12,继续取任务队列line8执行,输出6,事件循环检测事件队列中无任何待执行任务,结束,此时事件队列[line1__,line4__,p1__,line5__,p2__,line6__,line3__,line7__,line8__]

532