1. 程式人生 > >react系列(7)引入jquery

react系列(7)引入jquery

jquery在webpack中的引用寫法:

var $ = require('jquery');

若想發生網路請求,在元件剛完成掛載componentDidMount的時候,只要遵照jquery的ajax標準寫法標準即可:

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")
);

在元件解除安裝前如請求仍未結束,一定要取消請求。

(貼士)在react中實現網路請求一般不建議使用這種方式,可以通過引入專門實現網路請求的依賴包:axios

$ npm install axios -S

其用法可參照axios api。