react学习系列之ajax

前端之家收集整理的这篇文章主要介绍了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 入门实例教程

原文链接:https://www.f2er.com/react/305832.html

猜你在找的React相关文章