react學習系列之ajax

React 組件的數據能夠經過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數據庫能夠將數據存儲在 state 中，再用 this.setState 方法從新渲染 UI。
當使用異步加載數據時，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。

方式一：經過jq或者zepto封裝的ajax方法

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.body
);

方式二：fetch api

JavaScript 經過XMLHttpRequest(XHR)來執行異步請求，這個方式已經存在了很長一段時間。雖然說它頗有用，但它不是最佳API。它在設計上不符合職責分離原則，將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裏。並且，基於事件的模型與最近JavaScript流行的Promise以及基於生成器的異步編程模型不太搭（事件模型在處理異步上有點過期了——譯者注）。
新的 Fetch API打算修正上面提到的那些缺陷。 它向JS中引入和HTTP協議中一樣的原語（即Fetch——譯者注）。具體而言，它引入一個實用的函數 fetch() 用來簡潔捕捉從網絡上檢索一個資源的意圖。

Fetch 規範 的API明確了用戶代理獲取資源的語義。它結合ServiceWorkers，嘗試達到如下優化：

• 改善離線體驗

• 保持可擴展性

componentDidMount: function() {
    this.serverRequest = fetch(this.props.source).then((res) => {
      // res instanceof Response == true.
      if (res.ok) {
        res.json().then((data) => {
          var lastGist = data[0];
          if (this.isMounted()) {
            this.setState({
              username: lastGist.owner.login,
              lastGistUrl: lastGist.html_url
            });
          }
        });
      } else {
        console.log("Looks like the response wasn't perfect, got status", res.status);
      }
    }, function(e) {
      console.log("Fetch failed!", e);
    });
}

目前支持程度以下:

在github上，有基於低版本瀏覽器的 兼容實現

參考資料

JavaScript Fetch API
React 入門實例教程