[7天學會ReactJS] Day 7. 取得商品資訊 — Fetch

到了『 7天學會ReactJS 』的最後一天，前幾天我們學會了state、props和使用map呈現畫面。

Day 4時我們載入商品資訊json，並使用map render商品資訊，但是實務上並不會有json讓你使用，而是呼叫API取得資訊。

今天我們就要來做呼叫API吧。

AJAX

AJAX即『 Asynchronous Javascript and XML 』(非同步的Javascript與XML技術)，可以在不更新整個頁面下取得資訊，使得Web應用程式可以更迅速的回應使用者行為。

瀏覽器傳送Request至伺服器，伺服器查詢資料庫並取得資訊後，回傳Response到瀏覽器呈現在畫面上。

Fetch

Fetch是一個HTML5的API，它會被用來執行送出Request的工作，成功得到回應的話，會回傳一個帶有Response的Promise物件。

目前只有Firefox與Chrome、Opera瀏覽器支援，其他瀏覽器可以使用[polyfill]解決相容性問題。

fetch的語法結構完全是Promise的語法，方便閱讀。

[Promise]

呼叫API取得商品資訊

[程式碼]

我們使用fetch來取得商品資訊，取代掉之前載入json的方式。

我們提供了商品資訊API讓同學們使用。

componentDidMount = async () => {
    const data = await fetch('https://demojson.herokuapp.com/cart').then(response => response.json());
    this.setState({
      album: data,
    });
  }

通常會在componentDidMount中呼叫API，componentDidmount是ReactJS中的Life Cycle，也就是Component完全載入瀏覽器後呼叫API。

[Life Cycle]

因為fetch回傳的是promise物件，後面使用then+response.json()取得回傳的json。

再來我們可以透過ES7提供的語法async、await來取得promise回傳的資料，它可以將原本非同步變成同步，也就是說確定等到收到API回傳資料後，才執行setState。

[async、await]

實務上常用的兩種狀況如下：

1. 透過componentDidMount取得畫面一開始需要得到的資訊，例如使用者資訊。
2. 點擊查詢按鈕時使用fetch呼叫API，向伺服器取得資訊後更新畫面。

最後總結一下這7天所學到的，前三天是基本知識，後四天為實作課程。

1. NodeJS、NPM、Webpack、Babel等相關知識
2. ReactMaker Startkit提供的服務及使用方法
3. 基本的React知識
4. 使用UI Framework來製作購物車畫面，我們使用的是Reactstrap
5. 學習React state的方法來實作購買功能
6. 學習React props並切分Component
7. 使用fetch呼叫API，並更新畫面

透過這7天的學習，相信同學對於ReactJS有了更深刻的了解，有任何的回饋請跟我們反應唷！！