# Promise

## 什麼是 Promise

Promise 是 ES6 新增的語法，用來優化非同步取得遠端資料的方法，可以解決 AJAX 的非同步問題，同時增加可讀性。

* 常見例如 Axios、Fetch

---
## 為什麼需要 Promise

* JavaScript 是屬於同步的程式語言，因此一次僅能做一件事情
* 遇到非同步的事件時，就會將非同步的事件移動到程式碼的最後方，等到所有的原始碼運行完以後才會執行非同步的事件

console.log('開始') // 執行順序 1

setTimeout(() => {
  console.log('非同步事件') // 執行順序 3
}, 0)

console.log('程式碼結束') // 執行順序 2

而 Ajax 也是屬於非同步行為，當需要 **確保擷取到遠端資料才繼續往下執行時**，如果程式碼是依序撰寫的方式，就會無法正確呈現資料

---

## 建立 Promise
* 因為 Promise 是建構函式，如果需要呼叫其中的原型方法：`then`、`catch`、`finally`，則必須透過 `new Promise()` 建立新物件才能使用
* Promise 建構函式建立時，必須傳入一個函式作為參數，此函式的參數包含 `resolve`(成功訊息)， `reject`(失敗訊息)
* `resolve` 及 `reject` 的名稱可以自訂，但避免混淆，還是習慣維持預設名稱

function promise(num) {
  return new Promise((resolve, reject) => {
    num ? resolve(`${num}, 成功`) : reject('失敗')
  })
}

### 狀態
Promise 在處理非同步的事件的過程中，包含不同的進度狀態
* Pending：尚未得到結果
* Resolved：事件已經執行完畢且成功操作，回傳 `resolve` 的結果
* Rejected：事件已經執行完畢但操作失敗，回傳 `reject` 的結果

### 接收回傳
Promise 可以用 `then` 和 `catch` 來接收並回傳結果：
`then` 可以同時接收成功、失敗結果，而 `catch` 只接收失敗結果

* **使用 catch 接收失敗：**
在任何階段遇到 `reject` 時，都會直接跳到 `catch`，之後的 `then` 都不會執行
雖然 `catch` 依然可以使用 `return` 繼續串接，但很少這樣使用

promise(1)
    .then(success => {
        console.log(success) // resolve 接收成功 // '1'
        return promise(0)    // return promise(0) -> reject 跳到 catch
    })
    
    .then(success => {       // 因為上面出現 reject 所以跳過
        console.log(success)
        return promise(3)
    })
    
    .catch( fail => {
        console.log(fail)    // reject 接收失敗 // '失敗'
    })

* **使用 then 接收失敗：**
`then` 中的兩個函式必定執行其中一個，可以用此方式確保所有的鏈接都能夠被執行

promise(0)
    .then(success => {
        console.log(success)
        return promise(1)
    }, fail => {
        console.log(fail)     // reject 接收失敗 // '失敗'
        return promise(2)     // return promise(2)
    })
 
    .then(success => {
        console.log(success) // resolve 接收成功 // '2'
        return promise(0)    // return promise(0)
    }, fail => {
        console.log(fail)
        return promise(4)
    })
    
    .then(success => {
        console.log(success)
    }, fail => {
        console.log(fail)     // reject 接收失敗 // '失敗'
    })

### 完成
* 最後可以使用 `finally` 來確認工作結束
* `finally` 不帶有任何參數，適合用來確認 Ajax 已經讀取完成

promise(1)
    .then(success => {
        console.log(success)
    }).finally(() => {
        console.log('done')
    })

---
## Promise 方法
**Promise.all**
* 透過陣列的形式傳入多個 promise 函式
* 在全部執行完成後回傳陣列結果
* 陣列的結果順序與一開始傳入的一致
* 適合用在多支 API 要一起執行，並確保全部完成後才進行其他工作

Promise.all([promise(1), promise(2), promise(3)])
    .then(res => {
        console.log(res) // ["1", "2", "3"]
})

**Promise.race**
* 多個 Promise 同時執行，但僅回傳第一個完成的結果

Promise.race([promise(1), promise(2), promise(3)])
    .then(res => {
        console.log(res) // "1"
})

**Promise.reject、Promise.resolve**
* 直接定義 Promise 物件已經完成的狀態（resolve, reject）
* 與 `new Promise` 一樣會產生一個新的 Promise 物件，但結果是已經確定的
* `Promise.resolve` 直接定義 `resolve`，但無法取得失敗結果
* `Promise.reject` 直接定義 `reject`，但無法取得成功結果

---
## Promise 和 XMLHttpRequest
**使用 XHR 處理 Ajax：**
* 透過 `XMLHttpRequest` 建構式來產生進行遠端請求的物件
* 依序定義方法 `GET` 及狀態 `onload` 並送出請求 `send`
* 取得結果後的其它行為則需要撰寫在 `onload` 內

const url = 'http://API網址'
const xhr = new XMLHttpRequest()  // 定義 Http xhruest
xhr.open('GET', url)              // 定義方法
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.onload = () => {              // 當請求完成，執行函式
    if (xhr.status == 200) {
        console.log(xhr.response) // 成功時列出結果
    } else {
        console.log('fail')
    }
}
xhr.send() // 送出請求

**使用 Promise 處理 Ajax：**
* 將上面的內容直接用 `new Promise()` 封裝進 `getData` 的函式內
* 之後的 HTTP 就能直接透過 `getData` 函式取得
* 重複運用的情況下程式碼可以大幅提高易讀性

const url = 'http://API網址'
const getData = (url) => {
    return new Promise( (resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.onload = () => {
            if (xhr.status == 200) {
                resolve(JSON.parse(xhr.response))
                // 使用 resolve 回傳成功結果
                // 也可以在此直接轉換成 JSON 格式
            } else {
                reject(new Error(xhr))
                // 使用 reject 自訂失敗結果
            }
        }
        xhr.send()
    })
}
getData(url)
    .then( res => {
        console.log(res)
    })
    .catch( err => {
        console.log(err)
    })

---
## Fetch
**使用 Fetch 處理 Ajax：**
* fetch 會使用 ES6 的 Promise 作回應 (`then`、`catch`)
* 回傳的資料為 `ReadableStream` 物件，需要使用不同資料類型對應方法，才能正確取得資料物件

const url = 'http://API網址'
fetch(url)
    .then( res => {
        console.log(res)
        return res.json() // 將資料轉成 json 格式
    })
    .then( res => {
        console.log(res)
    })
    .catch( err => {
        console.log(err)
    })

**ReadableStream** [MDN說明](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
`ReadableStream` 為 API 接口，預設 `locked` 唯讀，需透過對應的方法來取得資料：
* `text()`
* `json()`
* `formData()`
* `blob()`
* `arrayBuffer()`

**blob()**
將資料轉為 `blob` 物件，像是圖片就可以做這樣的轉換
(這裡的圖片並非指圖片路徑，而是圖片檔案本身)

let imgUrl = 'https://images.unsplash.com/photo-1472157592780-9e5265f17f8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=100'
// unsplash 圖片網址

fetch(imgUrl)
  .then((response) => {
    return response.blob()
    // 資料轉成圖片物件
  })
  .then((imageBlob) => {
    let img = document.createElement('IMG')
    document.body.appendChild(img)
    img.src = URL.createObjectURL(imageBlob)
    // 將 blob 物件轉為 url
  })

---
## ES7 async await

在 ES7 裡頭 async 的本質是 promise 的語法糖，只要 function 標記為 async，就表示裡頭可以撰寫 await 的同步語法，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( reject ) 後才會進行下一步。
[
簡單理解 JavaScript Async 和 Await](https://www.oxxostudio.tw/articles/201908/js-async-await.html)

---

## 範例連結
* [CodePen](https://codepen.io/kaoru44689/pen/PoZMKrq)

---

## 參考文章
* [JavaScript Promise 全介紹](https://wcc723.github.io/development/2020/02/16/all-new-promise/)
* [淺談JavaScript ES6入門Part2-類別、物件與建構式](https://medium.com/@brianwu291/learn-basic-javascript-es6-part2-d8fe175107c3)
* [從Promise開始的JavaScript異步生活](https://eyesofkids.gitbooks.io/javascript-start-es6-promise/content/)
* [ES6 Fetch 遠端資料方法](https://ithelp.ithome.com.tw/articles/10194388)
* [JavaScript Fetch API 使用教學](https://www.oxxostudio.tw/articles/201908/js-fetch.html)