【Promise执行顺序】

记录一下对于 Promise 执行顺序的学习。

主要针对多个 then 嵌套的执行顺序

题目一

new Promise(resolve => {
  resolve()
}).then(() => {
  new Promise(resolve => {
    resolve()
  }).then(() => {
    console.log(1)
  }).then(() => {
    console.log(2)
  })
}).then(() => {
  console.log(3)
})

// 答案 1 3 2

/**
  解析
*/

** 第一次执行 **
** 此时外层的第二个 then 由于第一个 then没有执行完，因此第二个 then 不会执行 **
// 任务队列：[]
// 微任务: [
 (() => {
   new Promise(resolve => {
    resolve()
    }).then(() => {
      console.log(1)
    }).then(() => {
      console.log(2)
    })
  }).then(() => {
    console.log(3)
 })
]

** 第二次执行 **
// 任务队列：[
  (() => {
   new Promise(resolve => {
    resolve()
    }).then(() => {
      console.log(1)
    }).then(() => {
      console.log(2)
    })
  }).then(() => {
    console.log(3)
 })
]
// 微任务: []

** 执行后 **
微任务： [
	(() => {
      console.log(1)
    }).then(() => {
      console.log(2)
    }),
    (() => {
      console.log(3)
    })
]

** 第三次执行 **
任务队列: [
	(() => {
      console.log(1)
    }).then(() => {
      console.log(2)
    })
]

微任务： [
	(() => {
      console.log(3)
    })
]

** 执行后 **
微任务: [
    (() => {
      console.log(3)
    }),
    (() => {
      console.log(2)
    })
]
控制台： 1

** 第四次执行 **
第三次执行后，依次将微任务队列中的任务加入任务队列中。最后输出 1 3 2

题目二

new Promise(resolve => {
  resolve()
}).then(() => {
  new Promise(resolve => {
    resolve()
  }).then(() => {
    console.log(1)
  }).then(() => {
    console.log(2)
  })
  // 与 题目一 的 区别
  return Promise.resolve()
}).then(() => {
  console.log(3)
})

// 答案 1 2 3

/**
  解析
*/
**第一次执行**
任务队列： []
微任务: [
	(() => {
  		new Promise(resolve => {
    		resolve()
  		}).then(() => {
    		console.log(1)
  		}).then(() => {
    		console.log(2)
  		})
  		return Promise.resolve()
		}).then(() => {
  			console.log(3)
		})
]

**第二次执行**
任务队列： [
	(() => {
  		new Promise(resolve => {
    		resolve()
  		}).then(() => {
    		console.log(1)
  		}).then(() => {
    		console.log(2)
  		})
  		return Promise.resolve()
		}).then(() => {
  			console.log(3)
		})
]
微任务: []

** 执行后 ** 
微任务: [
	console.log(1), 
	Promise.resolve().then(() => { console.log(3) }),
	(() => {
    		console.log(2)
  	})
]

** 第三次执行 **
任务队列: [ console.log(1) ],
微任务: [
	Promise.resolve().then(() => { console.log(3) }),
	(() => {
    		console.log(2)
  	})
]
** 执行后 **
任务队列: [],
微任务: [
	Promise.resolve().then(() => { console.log(3) }),
	(() => {
    		console.log(2)
  	})
]
控制台: [1]

** 第四次执行 **
任务队列: [
	Promise.resolve().then(() => { console.log(3) }),
],
微任务: [ 
	(() => {
    		console.log(2)
  	})
 ]
** 执行后 **
任务队列: [],
微任务: [
	(() => {
    		console.log(2)
  	}),
  	().then(() => console.log(3))
]

** 后续执行 **
后续执行贼就是按顺序，放入任务队列，再依次输出 2 3