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 入门实例教程

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!