首页 > 代码库 > 十一.Ajax

十一.Ajax

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

<!DOCTYPE html>
<html>
<head>
<script src=http://www.mamicode.com/"js/react.js"></script>
<script src=http://www.mamicode.com/"js/react-dom.js"></script>
<script src=http://www.mamicode.com/"js/browser.min.js"></script>
<script src=http://www.mamicode.com/"js/jquery.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var RepoList = React.createClass({
getInitialState: function () {
return {
loading: true,
error: null,
data: null
};
},

componentDidMount(){
this.props.promise.then(
value =http://www.mamicode.com/> this.setState({
loading:false,data:value
}),
error => this.setState({
loading:false,data:value
})
)
},

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,index) {
return (
<li key={index}><a href=http://www.mamicode.com/{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>
);
}
}
});

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

</script>
</body>
</html>

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

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

十一.Ajax