今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么。
未来值
假设我们今天来到快餐店,点了一个汉堡,付钱给店员。
点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回传值(也就是汉堡)。
不过常见情况是,汉堡还没做好,不能立即给我,店员给了我一张收据上面写着点餐号码。这个点餐号码是一种「我欠你」的承诺(promise),确保我最后能够拿到我的汉堡。
所以只要拿着收据,我就能确保我未来的汉堡,不需要去担心。这样在等待的同时我就能够做其他事情,像是滑手机。
直到店员喊了我的号码,我拿着我的收据到柜台给店员换得了我的汉堡。
换句话说,一旦未来值准备就绪,我就能够用手上对值的承诺(value-promise)交换那个值本身。
但还有另一种结果,就是叫了我的号码,我走过去后店员跟我说汉堡卖完了。
这时候我们可以看到未来值一个重要的特性:代表成功,也可能代表失败。
也就是说Promise物件的设计就是针对异步函式的执行结果所设计的,最后的结果要不然就用一个回传值来fulfilled(实现),要不然就用一个理由(错误)来rejected(拒绝)。
那到底要怎么用呢?首先我们要先建立一个Promise物件:
var promise = new Promise(function(resolve,reject){
//成功时
resolve(value)
//失败时
reject(reason)
});
promise.then(function(value){
// on fulfillment(已实现时)
},function(reason){
// on rejection(已拒绝时)
})
建构式传入参数需要一个函式,称为executor有强烈执行的意味,当传入这个函式时,会在建构式回传物件实体前立即执行,也就是说Promise会立即决定里面的状态,resolve或reject,两者都必须是函式类型。
成功执行resolve(value)而Promise物件的状态会跑到fulfilled状态固定住(cumminsathletic);
失败或是发生错误时执行reject(reason)而Promise物件的状态会跑到rejected状态固定住。
也因为与一般物件实体化过程不太一样,所以通常会先包在一个函式中,需要使用时再呼叫函式来产生Promise物件:
function generatePromise(value){
return new Promise(function(resolve,reject){
if(value)
resolve(value)//已实现,成功
else
reject(reason)//有错误,已拒绝,失败
});
}
再来刚刚上面示例有看到说promise后面接着then。那then是什么呢?
then
then在Promise标准中是一个重要的方法,代表「然后、接着或接下来」的意思。then方法物件被称为thenable物件,我们来看个示例:
promise.then(onFulfilled,onRejected);
promise.then(function(value){
// fulfillment
},function(reason){
// rejection
});
then一样用两个函式当作参数传入,onFulfilled和onRejected。onFulfilled是当Promise物件状态转为fulfilled时呼叫的函式,会有一个传入参数值value可用;onRejected则是Promise物件状态转为rejected时呼叫,会有一个传入参数值reason可用。
而在最后,then会回传另一个「新的Promise物件」。
讲了那么多概念上的东西是不是令人难以理解?没关系,这边用个实际示例来讲解:
var promise = new Promise(function(resolve,reject){
resolve(1)
})
promise
.then(function(value){
console.log(value)// 1
return value + 1
})
.then(function(value){
console.log(value)// 2
})
then方法中的onFulfilled函式,也就是第一个传入的函式参数,它是有值时使用的函式,经过连锁的结构,如果要把值往下传递,可以用回传值的方式,让这个值可以继续的往下面的then方法传送。
那如果不用Promise,直接用callback会怎么样呢?
function doA(doB){
doB(1,doC)
}
function doB(val,doC){
doC(val+1)
}
function doC(val){
console.log(val);
}
doA(doB);
是不是看起来有点痛苦,而且我们还没加上如果失败时的函式呢(bargaintravel4u)!
今天就先到这边,如果有错误欢迎留言指正,明天会说明Promise失败时的函式用法!