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()

补充：

还有一些小细节。

Promise 一旦创建，传入的 executor 会被立刻执行。
一个“已敲定”（"settled"）状态的 Promise 也可以接受操作，也就是说，后面可以接 then 或者 catch 函数。

所有 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

其他一些静态方法
- 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）

一次搞懂 ES Promise