###### tags: `slide`
## ES6 進入天堂的窄門
# Promise
---
# Why Promise?
---
## Promise 結構是一種非同步執行的控制流程架構
---
#### 在ES6被提出
## 這種結構解決了 ES5 以前 callback hell
---
```javascript
// Callback hell
async1(function(){
async2(function(){
async3(function(){
....
});
});
});
// Promise
var task1 = async1();
var task2 = task1.then(async2);
var task3 = task2.then(async3);
```
---
## How? 流程
---
<div style="text-align: left;"><font size = "5">結果會進入 <font color = "lighblue">fulfill(實現)</font> 或 <font color = "red">reject(拒絕)</font>狀態，Promise 中會使用 <font color = "lighblue">resolve(成功)</font> 或 <font color = "red">reject(失敗)</font> 回傳結果，並在調用時使用 <font size = "7" color = "lighblue">then</font> 或 <font size = "7" color = "red">catch</font> 取得值。</font></div>
<font size = "5" color = "yellow">特別注意這兩個僅能回傳其中之一，回傳後表示此 Promise 事件結束。</font>
---
## 透過 new 及其建構式建立一個Promise物件
---
```javascript
const myFirstPromise = new Promise((resolve, reject) => {
// resolve(someValue); // 實現
// 或
// reject("failure reason"); // 拒絕
});
myFirstPromise
.then(function(success){
// if object's state is fulfilled, go here
},
function(fail){ //選填
// if object's state is rejected, go here
})
.catch(function(fail){
// if object's state is rejected, go here
})
```
---
## Promise 會有三個狀態：
##### 擱置（pending）：初始狀態，不是 fulfilled 與 rejected。
##### 實現（fulfilled）：表示操作成功地完成。
##### 拒絕（rejected）：表示操作失敗了
---
# What is
## .then() .catch()
---
#### Promise.prototype.then(onFulfilled, onRejected)
<div style="text-align: left;"><font size = "5"><ul>
<li>.then() 方法回傳一個 Promise 物件。它接收兩個引數： Promise 在成功及失敗情況時的回呼函式。</li></ul></font></div>
<br>
#### Promise.prototype.catch(onRejected)
<div style="text-align: left;"><font size = "5"><ul>
<li>
.catch() 方法只處理 Promise 的被拒絕狀態，並回傳一個新的 Promise 物件。</li></ul></font></div>
<div style="text-align: left;"><font size = "5"><ul>
<li>此方法是.then()的語法糖等同於呼叫:
Promise.prototype.then(undefined, onRejected)
</li></ul></font></div>
---
### 由於 .then() 以及 .catch() 方法都回傳 Promise，它們可以被串接
### 稱為組合（composition）
---
## 組合（composition）
## Promise chain(鏈)
```javascript
firstStep()
.then( secondStep )
.then( thirdStep )
...
```
---
<div style="text-align: left;"><font size = "3">藍線表示執行的.then()路徑，紅路表示拒絕的.catch()路徑。
注意：`.then` `.catch`不是拿來當作`if...else`使用</font></div>
---
## 範例程式(Promise chain)
<div style="text-align: left;"><font size = "4.5">
```javascript=
function promiseGenerator(time, isResolve) {
return new Promise((resolve, reject) => {
setTimeout(() => {
isResolve
? resolve('任務成功印出resolve')
: reject('任務失敗印出reject');
}, time * 1000);
})
}
promiseGenerator(1, true)
.then(success => {
alert(success)
success += `，然後接著catch接到`;
throw Error(success);
})
.catch(err => {
alert(err)
err += `，接著又被then接住`;
return err;
})
.then(success => {
alert(success)
return promiseGenerator(5, false)
})
.then(success => {
alert(success)
})
.catch(failed => {
alert(failed)
})
```
</font></div>
---
# Thank you
---
{"metaMigratedAt":"2023-06-15T09:19:19.642Z","metaMigratedFrom":"Content","title":"Promise","breaks":true,"contributors":"[{\"id\":\"30e59c9a-3d1d-4bc1-8daa-c97ff56595a3\",\"add\":5785,\"del\":2463}]"}