第十节，使用promise操作ajax

来源：互联网发布：js split函数编辑：程序博客网时间：2024/06/05 14:33

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>

<script src="./js/browser.min.js"></script>

<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="ex1"></div>
<script type="text/babel">
var Promiseget = React.createClass({
//ceateClass创建的类，首字母必须大写例如 HelloMessage
//let是ECMA6的声明变量，用它所声明的变量，只在let命令所在的代码块内有效。
getInitialState(){
//getInitialState 是系统固定方法，不能变更
//用于设置 this.state 内的初始属性
return {
loading : true,
data : null,
error : null,
};
},
componentDidMount(){
//componentDidMount 是系统固定方法，不能变更
//用于已插入真实 DOM之后的操作

this.props.promise.then(
//使用promise的返回值，设置state
resolve => this.setState({
loading : false,
data : resolve,
}),
reject => this.setState({
loading : false,
error : reject,
})
);
},
render(){
if(this.state.loading){ //判断loading是否为真
return <span>loading...</span>;
}
else if(this.state.error !== null){ //判断是否报错
return <span>Error : {this.state.error.message}</span>;
}
else{
console.log(this.state.data); //可以打印数据看看
let items = this.state.data.items; //获取promise返回的数据items
let itemslist = items.map(function(value,index){
//组装数据
return (
<li key={index}>
<a href={value.html_url} target="_blank" >{value.name}</a> ({value.stargazers_count} stars)
<br/>
{value.description}
</li>
);
});
return (
<main>
<h1>more popular javascript project in githubs</h1>
<ol>{itemslist}</ol>
</main>
);
}
},
})
ReactDOM.render(
//使用promise发送ajax请求
<Promiseget promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
document.getElementById('ex1')
)
</script>
</body>
</html>

0 0