壹:与XMLHttpRequest绑定的,js原生的方式
示例:
<!DOCTYPE html><html> ?<head> ???<script src="../build/react.js"></script> ???<script src="../build/react-dom.js"></script> ???<script src="../build/browser.min.js"></script> ?</head> ?<body> ???<div id="example" /> ???<script type="text/babel"> ???????var text = "loading"; ???????var Result = React.createClass({ ???????????getInitialState: function () { ???????????????return { ?????????????????success:false ???????????????}; ???????????}, ???????????componentDidMount: function() { ???????????????var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象 ???????????????request.onreadystatechange = function () { // 状态发生变化时,函数被回调 ???????????????????if (request.readyState === 4) { // 成功完成 ???????????????????????// 判断响应结果: ???????????????????????if (request.status === 200) { ???????????????????????????// 成功,通过responseText拿到响应的文本: ???????????????????????????text = request.responseText; ???????????????????????????this.setState({success:true}); ???????????????????????} else { ???????????????????????????// 失败,根据响应码判断失败原因: ???????????????????????????text = ‘failed‘; ???????????????????????????this.setState({success:false}); ???????????????????????} ???????????????????} else { ???????????????????????// HTTP请求还在继续... ???????????????????} ???????????????}.bind(this); ???????????????????????????????request.open(‘GET‘, ‘https://api.github.com/search/repositories?q=javascript&sort=stars‘); ???????????????request.send(); ???????????}, ???????????render: function() { ???????????????return ( ?????????????????<div> ???????????????????{text} ?????????????????</div> ???????????????); ???????????} ???????}); ???????????????ReactDOM.render( ?????????<Result/>, ?????????document.getElementById(‘example‘) ???????); ???????????</script> ?</body>
贰:Promise
示例:
new Promise(function (resolve, reject) { ???console.log(‘start new Promise...‘); ???var timeOut = Math.random() * 2; ???console.log(‘set timeout to: ‘ + timeOut + ‘ seconds.‘); ???setTimeout(function () { ???????if (timeOut < 1) { ???????????console.log(‘call resolve()...‘); ???????????resolve(‘200 OK‘); ???????} ???????else { ???????????console.log(‘call reject()...‘); ???????????reject(‘timeout in ‘ + timeOut + ‘ seconds.‘); ???????} ???}, timeOut * 1000);}).then(function (r) { ???console.log(‘Done: ‘ + r);}).catch(function (reason) { ???console.log(‘Failed: ‘ + reason);});
Ajax
原文地址:https://www.cnblogs.com/heben/p/8991600.html