# Fetch & Promise
###### tags: `javascript`

## Fetch
新時代的 XMLHttpRequest

### 用法

<script>
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(function(res) {
        console.log(res)
      })
</script>

在 `fetch()` 中加入要連接的 API 網址，接著後面加上的 `then()` 放入 callback function，`res`參數即是 API 傳回來的結果，而這個結果是一個物件。

<script>
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(function(res) {
        return res.json()
      })
      .then(function(result) {
        console.log(result)
      })
</script>

在 `res` 參數中，有個`json`的方法可以把傳回來的結果轉為 json 格式；如果是使用`text`的方法則是把傳回來的結果轉為純文字格式。

另外 `then` 的方法可以接到上一個方法的 `return` 值，因此上面的例子的 `result` 會收到 `res.json()` 的結果。

<script>
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(function(res) {
        return res.json()
      })
      .then(function(result) {
        console.log(result)
      })
      .catch(function(err) {
        console.log(err)
      })
</script>

`catch`的方法用在當使用 `fetch` 傳送資料時若有誤，則印出錯誤的訊息。

## Promise
當在使用 ajax 或是 EventListener 的時候，其實都有用到 promise 的機制。
像是上面的 `fetch()` 傳回來的結果就是個 `promise` 的物件。也因為 `promise`的特性可以讓我們對`promise`傳回來的結果繼續使用其它的方法，而每個方法回傳的結果也都會是個`promise`，所以說每個方法所拿到的結果都會是上面的`promise`產生的結果。

### 產生 Promise

const api = new Promise(function(resolve, reject){
  resolve('123')
})

api.then(result => {
  console.log(result)
})

實務上可以產生一個 Promise 的物件，把要做為非同步的事情都包在裡面，callback function 的第一個參數`resolve`回傳的是當成功抓取資料就會做的事情，第二個參數`reject`則是當失敗的時候會做的事情。

而 Promise 產生後的物件指派一個變數後，藉由這個變數就跟使用`fetch()`一樣，可以使用`then`與`catch`的方法。上面的例子的`result`結果會是`resolve('123')`回傳的`123`字串。

const api = new Promise(function(resolve, reject){
  reject('dsf')
})

api.then(result => {
  console.log(result)
}).catch(err => {
  console.log(err)
})

上面的`reject('sdf')`則是當錯誤的時候會回傳`sdf`的字串到`catch`的方法裡面。

-----
使用 Promise 的好處就是大家要使用 callback function 作為非同步的函式時，可以有個統一的規格去依循，而不是依照每個人各自的門派，也就是說，`Promise`就是有個標準化的物件可以給予我們使用。

### 使用 setTimeout() 做非同步

const sleep = new Promise(function(resolve, reject){
  setTimeout( () => {
    resolve('sleep 3 seconds')
  }, 3000)
})

sleep.then(result => {
  console.log(result)
}).catch(err => {
  console.log(err)
})

藉由 `setTimeout()` 定時器就可以設定延遲時間，時間一到才會執行 Promise 的 function，達到一個非同步的效果。

### XMLHttpRequest 包在 Promise 裡面

const getPosts = new Promise(function(resolve, reject){
  const request = new XMLHttpRequest();
  request.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
  request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
          resolve(request.responseText);
        }
  };
  request.send();
})

getPosts.then(result => {
  console.log(result)
}).catch(err => {
  console.log(err)
})

把 `XMLHttpRequest` 的用法包在 `Promise` 裡面就可以使用 `Promise` 的機制與方法。

const get = url => new Promise((resolve, reject) => {
  const request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.onreadystatechange = () => {
        if (request.readyState == 4 && request.status == 200) {
          resolve(request.responseText);
        }
  };
  request.send();
})

get("https://jsonplaceholder.typicode.com/posts/1").then(result => {
  console.log(result)
}).catch(err => {
  console.log(err)
})

我們可以把 `Prmoise` 的物件直接用一個 function 包住，參數若是 API 的網址，那麼這個 function 的用法就和直接使用 `fetch` 一樣，如上方第二段的程式碼：`get("https://jsonplaceholder.typicode.com/posts/1").then()`，把它換成`fetch("https://jsonplaceholder.typicode.com/posts/1").then()`結果會是一樣的。

### Promise 的三個狀態
#### Pending
尚未做任何動作時的狀態。

#### Fulfilled
當 `Promise` 被呼叫時的狀態。

#### Rejected
當 `Prmoise` 的 `reject` 被呼叫的狀態。

### Promise.all
【待了解】

#### 延伸資料
1. [鐵人賽：ES6 原生 Fetch 遠端資料方法](https://wcc723.github.io/javascript/2017/12/28/javascript-fetch/)
2. [使用 Fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)