React中的Ajax

Posted 2020-11-03 juxiu

React中的Ajax

组件的数据来源，通常是通过Ajax请求从服务器获取，可以使用componentDidMount方法设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI。

var  UserGist = React.createClass({
    getInitialState(){
        return {
            username:‘‘,
            lastGistUrl:‘‘
        };
    },
    
    componentDidMount(){
        $.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(){
        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
)

上面代码使用jQuery完成了Ajax请求，这是为了便于说明。React本身没有任何依赖，完全可以不用jQuery，而使用其他库。

我们甚至可以把一个Promise对象传入组件。

ReactDOM.render(
    <RepoList promise={$.getJSON(‘https://api.github.com/search/repositories?q=javascript&sort=stars‘)} />,
    document.body
)

上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。

如果Promise对象正在抓取数据（pending状态），组件显示“正在加载”；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。

var RepoList = React.createClass({
  getInitialState: function() {
    return { loading: true, error: null, data: null};
  },

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

  render: function() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo) {
        return (
          <li>
            <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
          </li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});