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对象,该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功,一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后,会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值,顺序跟iterable的顺序保持一致;如果这个新的promise对象触发了失败状态,它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。(可以参考jQuery.when方法---译者注)
-
等到所有promises都已敲定(settled)(每个promise都已兑现(fulfilled)或已拒绝(rejected))。 返回一个promise,该promise在所有promise完成后完成。并带有一个对象数组,每个对象对应每个promise的结果。
-
接收一个Promise对象的集合,当其中的一个 promise 成功,就返回那个成功的promise的值。
-
当iterable参数里的任意一个子promise被成功或失败后,父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄,并返回该promise对象。
-
返回一个状态为失败的Promise对象,并将给定的失败信息传递给对应的处理方法
-
返回一个状态由给定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)