学JS的心路历程-Promise（一）

今天在进入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失败时的函式用法！