壹:与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); });
Promise 的含义Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。
它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果。
从语法上说,Promise是一个对象,从它可以获取异步操作的消息。
Promise 对象的状态不受外界影响
Promise有三种状态:
- pending:进行中
- fulfilled :已经成功
- rejected 已经失败
Promise的状态改变,只有两种可能:
- 从pending变为fulfilled
- 从pending变为rejected。
这两种情况只要发生,状态就凝固了,不会再变了,这时就称为resolved(已定型)
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。