前言

當我們介紹完 React Component 的生命週期後，我們知道 render 返回的結果往往來自於 props 跟 state ，但是頁面不能只是空殼，需要從後端去撈取數據，而撈取數據又應該在哪個生命週期裡處理呢？今天會介紹如何發起 request去撈取數據以及在前後端各自單獨作業時，前端如何 mock 資料做效果。

範例 API 返回值 -> 進行 Mock

假如後端返回商品列表如下：

{
 "commodityList" : [
   {"id": 1, "name": "商品A", "price": 100},
   {"id": 2, "name": "商品B", "price": 200},
   {"id": 3, "name": "商品C", "price": 300},
 ]
}

在新增完專案後，我們先安裝套件： npm install mockjs --save-dev，並且新建檔案 src/mock.js，這裏就是將上方的資料 mock 到 /api/commodityList 這個本地網址。

import Mock from 'mockjs'

let data =  Mock.mock('/api/commodityList', {
  "commodityList" : [
    {"id": 1, "name": "商品A", "price": 100},
    {"id": 2, "name": "商品B", "price": 200},
    {"id": 3, "name": "商品C", "price": 300},
  ]
 });

export default data;

哪個生命週期發送 AJAX 請求？

早期有些會將 Ajax 請求放在 componentWillMount 元件進行載入，但我們昨天有說了此方法 React 官方並不推薦，而是推薦在 componentDidMount 這個生命週期發送 Ajax 請求，因為執行這個生命週期時 真實DOM 已經載入了，因此可以做到 Ajax 請求回來後數據通過 setState 更新元件

發送 AJAX

1. 使用 Axios

在使用之前需要安裝 npm install axios --save，這個套件不論在 vue 或是 react 都蠻常使用的，它支持 promise 方式，以下為程式：

componentDidMount() {
  axios.get('this commodityList base url-需更換')
    .then(response => {
      const commodityList = response.data
      this.setState({ commodityList});
    })
    .catch(err => {
      console.log(err);
    })
}

2. 使用瀏覽器 fetch 的方法

fetch 是 ajax 的替代品，它的 API 是基於 Promise 設計的，但舊版瀏覽器並不支持 fetch ，需要使用 polyfill es6-promise

componentDidMount() {
  fetch('this commodityList base url-需更換',{ 
    method: 'GET'
    })
    .then((response) => {
      if (!response.ok) {
        return;
      }
      return response.json()
    })
    .then((commodityList) => {
      this.setState({ commodityList });
    })
    .catch((error) => {
      console.log(error);
    })
}

3. 使用 jquery（不推薦）

如果想在 react 中使用傳統的 jquery 也必須先安裝，npm install jquery --save，然後在文件開頭引用import $ from 'jquery';

// 這裡要注意 jquery 比較特別需要手動綁定 this
componentDidMount() {
  $.get('this commodityList base url-需更換', function(response) {
    this.setState({
      commodityList: response.commodityList
    });
  }.bind(this));
}

4. 使用 request
   request 事實上使用人數僅低於 axios 的使用人數，也是蠻多使用 vue 或 react 的常用套件，如果要使用這套件需先安裝，npm install request --save 和 npm install request-promise -s，然後要在文件上方引入 import rp from 'request-promise'

componentDidMount() {
  // rp 要注意的是一定要是完整 url, like : http://localhost:3000/api/commodityList
  rp('this commodityList base url-需更換')
    .then(response => {
      // 這裡要注意的是 response返回的是字串，需要用 JSON.parse() 將字串轉成 json
      const { commodityList } = JSON.parse(response);
      this.setState({ commodityList });
    })
    .catch(error => {
      console.log(error);
    })
}

在這裏的例子都是放在 componentDidMount()，而在 React 中較推薦使用 axios 或 fetch 的方式進行 ajax 資料請求。

Axios 搭配 Mock 的資料

src/App.js

import React from 'react';
import axios from 'axios';
import "./mock.js"

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commodityList: [],
    }
  }

  componentDidMount() {
    // mock.js 裡公告出來的 api
    // axios的方式請求數據,是不需要經過 json 格式化
    axios.get('/api/commodityList')
      .then(res => {
        this.setState({commodityList: res.data.commodityList});
      });
  }

  render() {
    const { commodityList } = this.state;

    return (
      <table>
        {commodityList.map((item) => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.price}</td>
          </tr>
        ))}
      </table>
    )
  }
}

結論

• 介紹了 Ajax 請求的方法：axios, fetch, jquery, request
• 介紹了前端 Mock 資料的方法