Promise

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

状态

Promise 有且仅有三种状态:

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

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

那状态要怎么改变呢?

Promise 的构造函数需要传入一个函数 executor ,这个函数需要两个入参分别是 resolverejected 两个函数,这两个方法主要是用来修改状态的。当我们调用 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 中处理完之后,会继续走下一个 .thenonfulfilled 函数,不太符合直觉。当然,如果你有马上处理异常的需求也可以这样写。

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

还是一个 Promise

这里要特别注意一个点,Promise.then()Promise.catch()Promise.finally() 这些方法会返回一个新的 Promise,这一点在其他很多文章中会忽略这个点。 .then() 函数最后会返回一个 Promise ,如果在 .thenonfulfilled (也就是入参的第一个函数)中返回一个值,或者对象,这个 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)