JavaScript Promise 承诺执行原理浅析

1 参考文档

• 深入理解JavaScript事件循环机制
• （转）帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
• wx.request
• Promise是什么
• npm Promise page

2 本文出发点

JS 中执行异步函数往往需要嵌套callback，多层 嵌套的callback使得代码难以阅读且容易出Bug。有没有一种办法可以明确等待异步函数执行完成后，下一个函数（代码块）再继续执行。

以微信小程序为例：

wx.request()
doAfterRequest()

为了不把doAfterRequest()放到wx.request()的回调函数中，于是就找到了Promise这样一种简单快捷方法，它可以这么做。

new Promise(function(resolve,reject) {
   
	wx.request({
   
		success (res) {
   
		    resolve(res)
		}
	}
}).then(res => {
   
	doAfterRequest(res)
})

3 简易理解Promise

关于Promise的标准解答，网上已有很多文章，详尽无比，诸如Promise有三个状态（pending、fulfilled、rejected），Promise与JS的事件驱动机制的关系。这里只做简单的理解，就四个字 “承诺执行” 。

new Promise()时，Promise承诺执行括号内的函数（在构造函数中执行这个承诺），并承诺通过resolve调用then接口，承诺通过reject调用catch接口。在ES6中，它还承诺最终无论成败一定调用finally接口。

他这个承诺具有这些特点：

1. 承诺执行不表示立马执行完成，异步函数执行结束后，我们必须通过resolve()触发调用then接口
2. then接口还是返回一个Promise对象，于是，我们可以一直then then写出链式调用的美感

第一个特点也说明，如果我们不调用resolve()，then接口是不会被调用，因为Promise不知道何时去调用，它无法知道异步函数（wx.request）什么时候结束。

4 简易理解Promise与JS事件驱动机制

先看网上的例子：

console.log('script start');

setTimeout(function() {
   
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
   
  console.log('promise1');
}).then(function() {
   
  console.log('promise2');
});

console.log('script end');

使用node.js或者网页js在线运行一下，得到结果：

> "script start"
> "script end"
> "promise1"
> "promise2"
> "setTimeout"

简易理解：
（参考文档中有图）

同步任务 > 微任务 > 异步任务

• setTimeout和Promise都是涉及新任务，肯定在当前任务（当前代码块）之后。所以先输出’script start’和’script end’。

• setTimeout属于异步任务，Promise.then使用的是微任务，所以，先执行Promise.then，于是接着输出’promise1’和’promise2’。

• 最后才是异步任务setTimeout的’setTimeout’输出。

稍微改造一下这个段代码，让它结合第一节的承诺执行：

console.log('script start');

setTimeout(function() {
   
  console.log('setTimeout');
}, 0);
new Promise((r,j)=>{
   
	console.log("promise0")
  	r("") // 这里很关键，没有它，then不会被调用
}).then(function() {
   
  console.log('promise1');
}).then(function() {
   
  console.log('promise2');
});

console.log('script end');

JS在线输出结果：

> "script start"
> "promise0"
> "script end"
> "promise1"
> "promise2"
> "setTimeout"

重点在于，"promise0"在"script end"的前面，说明，第一步承诺执行是立即执行（是同步任务），且是在构造函数中执行。而then、catch则是先安排到微任务。

5 Promise简易链式调用

这里虽然代码简单，但是看完能加深对Promise的理解。

还是改造