react系列（7）ajax网络请求

来源：互联网发布：淘宝秒杀需要登录吗编辑：程序博客网时间：2024/06/04 00:22

网络请求通常发生在组件刚完成挂载componentDidMount的时候，只要遵照jquery的ajax标准写法标准即可。如下例中的get请求。

var AjaxTest = React.createClass({getInitialState:function(){return {name : "null",gisurl:"null"};},componentDidMount:function(){var target = this;//写法一this.serverRequest = $.ajax({url: this.props.source,data: "",type: 'GET',timeout: 30000,error: function(response, state) {console.log(response);},success: function(response, state) {   var lastGist = response[0];    target.setState({       name: lastGist.owner.login,       gisurl: lastGist.html_url    });}});//写法二//this.serverRequest = $.get(this.props.source, function (result) {//      var lastGist = result[0];//      this.setState({//        name: lastGist.owner.login,//        gisurl: lastGist.html_url//      });//    }.bind(this));},componentWillUnmount: function() {    this.serverRequest.abort(); //在组件卸载前取消请求},render:function(){return (<div><h1>"name:"+{this.state.name}</h1><h1>"gisurl:"+{this.state.gisurl}</h1></div>);}});ReactDOM.render(<AjaxTest source="https://api.github.com/users/octocat/gists" />,document.getElementById("example"));

（注）在组件卸载前如请求仍未结束，一定要取消请求。

阅读全文

0 0