一次搞懂 ES Promise

Promise

Promise 就像这个词的表面意识一样，表示一种承诺、许诺，会在后面给出一个结果，成功 或者 失败。现在已经成为了主流的异步编程的操作方式，写进了标准里面。

状态

Promise 有且仅有三种状态：

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled）: 意味着操作成功完成。
• 已拒绝（rejected）: 意味着操作失败。

其实我觉得这个模型还是挺简单，也很好理解。就好像，你跟你女朋友求婚，她跟你说她要考虑一下，明天才能给你答案，这就是承诺（promise）。同时，这也是一个等待的过程（pending），然后你就等，等到明天你女朋友给你答复，同意（fulfilled）或者拒绝（rejected），如果同意就准备结婚了，如果不同意就等下次再求婚，哈哈哈。

那状态要怎么改变呢？

Promise 的构造函数需要传入一个函数 executor ，这个函数需要两个入参分别是 resolve 和 rejected 两个函数，这两个方法主要是用来修改状态的。当我们调用 resolve 函数的时候，Promise 的状态就变成 fulfilled 。当我们调用 reject 函数的时候，Promise 的状态就变成 reject 。举个栗子：

new Promise((resolve, reject) => {
    console.log("开始求婚。")
    console.log("。。。。。")
    console.log("考虑一下。")
    setTimeout(() => {
        if (isHandsome || isRich) {
            resolve('我同意！')
        } else {
            reject("拒绝：我们八字不合")
        }
    }, 2000)
})

这里还要注意一点，如果一个 promise 已经被兑现（fulfilled）或被拒绝（rejected），那么我们也可以说它处于已敲定（settled）状态。

链式调用

这点跟 Rx 还是挺相似的，也是链式调用，这样的好处就是异步逻辑更加清晰，连贯，符合直觉，避免了回调地狱。

我们可以用 Promise.then()，Promise.catch() 和 Promise.finally() 这些方法将进一步的操作与一个变为已敲定状态的 Promise 关联起来。这些方法还会返回一个新生成的 Promise 对象，这个对象可以被非强制性的用来做链式调用，就像这样：

const myPromise =
  (new Promise(myExecutorFunc))
  .then(handleFulfilledA,handleRejectedA)
  .then(handleFulfilledB,handleRejectedB)
  .then(handleFulfilledC,handleRejectedC);

// 或者，这样可能会更好...

const myPromise =
  (new Promise(myExecutorFunc))
  .then(handleFulfilledA)
  .then(handleFulfilledB)
  .then(handleFulfilledC)
  .catch(handleRejectedAny);

我们一般推荐使用第二种的写法，因为第一种写法如果在中间出错，在 .then 中处理完之后，会继续走下一个 .then 的 onfulfilled 函数，不太符合直觉。当然，如果你有马上处理异常的需求也可以这样写。

当 .then() 中缺少能够返回 Promise 对象的函数时，链式调用就直接继续进行下一环操作。因此，链式调用可以在最后一个 .catch() 之前把所有的 handleRejection 都省略掉。类似地， .catch() 其实只是没有给 handleFulfilled 预留参数位置的 .then() 而已。

还是一个 Promise

这里要特别注意一个点，Promise.then() 、Promise.catch()、Promise.finally() 这些方法会返回一个新的 Promise，这一点在其他很多文章中会忽略这个点。 .then() 函数最后会返回一个 Promise ，如果在 .then 的 onfulfilled （也就是入参的第一个函数）中返回一个值，或者对象，这个 Promise 的状态就会确定（settled），接着会触发下个 .then() 中的 onfulfilled ，并将这个 值 或者 对象作为入参传入。

诶，等一下，如果在 .then() 中直接返回一个 Promise 呢？

这个时候就会直接替换返回的 Promise 。就跟 RxJava 中的 flatMap 操作挺相似的。MDN 中有说明：

链式调用中的 promise 们就像俄罗斯套娃一样，是嵌套起来的，但又像是一个栈，每个都必须从顶端被弹出。链式调用中的第一个 promise 是嵌套最深的一个，也将是第一个被弹出的。

(promise D, (promise C, (promise B, (promise A) ) ) )

当存在一个 nextValue 是 promise 时，就会出现一种动态的替换效果。return 会导致一个 promise 被弹出，但这个 nextValue promise 则会被推入被弹出 promise 原来的位置。对于上面所示的嵌套场景，假设与 "promise B" 相关的 .then() 返回了一个值为 "promise X" 的 nextValue 。那么嵌套的结果看起来就会是这样：

(promise D, (promise C, (promise X) ) )

观察者模式？

而且一个 Promise 可能会参与不止一次的嵌套，感觉也像是观察者的模式，并支持多个观察者。对于下面的代码，promiseA 向"已敲定"（"settled"）状态的过渡会导致两个实例的 .then 都被调用。

const promiseA = new Promise(myExecutorFunc);
const promiseB = promiseA.then(handleFulfilled1, handleRejected1);
const promiseC = promiseA.then(handleFulfilled2, handleRejected2); 

写点代码

讲了这么多，写点代码吧，就写一个，女朋友多次拒绝之后看到了你的诚意，最后同意的故事。手动狗头。

let count = 0

const propose = () => {
    return new Promise((resolve, reject) => {
        console.log("开始求婚。")
        console.log("。。。。。")
        console.log("考虑一下。")
        setTimeout(() => {
            if (count < 3) {
                reject("拒绝：我们八字不合")
                count++
            } else {
                resolve('我同意！')
            }
        }, 2000)
    })
}

const startPropose = () => {
    propose()
        .then((result) => {
            console.log(result)
            console.log("完结撒花")
            console.log("、·、·、、·、·、·、")
        },)
        .catch((e) => {
            {
                console.error(e)
                console.log("被拒绝了，下次再求婚。")
                setTimeout(() => {
                    startPropose()
                }, 3000)
            }
        })
}

startPropose()

补充：

还有一些小细节。

1. Promise 一旦创建，传入的 executor 会被立刻执行。

2. 一个“已敲定”（"settled"）状态的 Promise 也可以接受操作，也就是说，后面可以接 then 或者 catch 函数。

3. 所有 Promise 都是异步的，即便是“已敲定”（“settled”）了的 Promise 也是如此。一个已经处于"已敲定"（"settled"）状态的 promise 中的操作只有 promise 链式调用的栈被清空了和一个事件循环过去了之后才会被执行。这种效果跟 setTimeout(action, 10) 特别相似。

   const promiseA = new Promise( (resolutionFunc,rejectionFunc) => {
       resolutionFunc(777);
   });
   // 这时，"promiseA" 已经被敲定了。
   promiseA.then( (val) => console.log("asynchronous logging has val:",val) );
   console.log("immediate logging");
   
   // produces output in this order:
   // immediate logging
   // asynchronous logging has val: 777
   

4. 其他一些静态方法

   • Promise.all(iterable)

     这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。（可以参考jQuery.when方法---译者注）

   • Promise.allSettled(iterable)

     等到所有promises都已敲定（settled）（每个promise都已兑现（fulfilled）或已拒绝（rejected））。 返回一个promise，该promise在所有promise完成后完成。并带有一个对象数组，每个对象对应每个promise的结果。

   • Promise.any(iterable)

     接收一个Promise对象的集合，当其中的一个 promise 成功，就返回那个成功的promise的值。

   • Promise.race(iterable)

     当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。

   • Promise.reject(reason)

     返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法

   • Promise.resolve(value)

     返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果您不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

参考：MDN（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise）