24_ajax请求_使用axios
发布时间:2020-12-16 02:55:16 所属栏目:百科 来源:网络整理
导读:前置说明: 1.React本身只关注页面,并不包含发送ajax请求的代码 2.前端应用需要通过ajax请求与后台进行交互(json数据) 3.React应用中需要集成第三方ajax库(或自己进行封装) 常用的ajax库: 1.jQuery:比较重,为了发送ajax请求而引用整个文件(不建议使用) 2
前置说明: 1.React本身只关注页面,并不包含发送ajax请求的代码 2.前端应用需要通过ajax请求与后台进行交互(json数据) 3.React应用中需要集成第三方ajax库(或自己进行封装) 常用的ajax库: 1.jQuery:比较重,为了发送ajax请求而引用整个文件(不建议使用) 2.axios:轻量级,建议使用! a.封装了XmlHttPRequest对象的ajax b.promise风格 c.可以用在浏览器端和node服务器端 3.fetch:原生函数,但老版本浏览器不支持 a.不再使用XmlHttPRequest对象提交ajax请求 b.为了兼容低版本的浏览器,可以引入兼容库fetch.js 代码: //其中的地址貌似访问不到了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="example"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script> <script type="text/babel"> /* * 需求: * 1.界面效果如下 * 2.根据指定的关键字在github上搜索匹配的最受关注的库 * 3.显示库名,点击链接查看库 * 4.测试接口:https://api.github.com/search/repositories?q=r&sort=stars */ class MostStarRepo extends React.Component { state = { repoName: ‘‘,repoUrl: ‘‘ } //在这里发送异步ajax请求 componentDidMount() { //使用axios发送 const url = `https://api.github.com/search/repositories?q=r&sort=stars`; //因为是promise风格的,所以后面可以使用.then() axios.get(url).then(response => { //数据就在reponse里面 const result = response.data //使用解构得到想要的数据 const {name,html_url} = result.items[0]; //更新状态 this.setState({repoName: name,repoUrl: html_url}) }) } render() { const {repoName,repoUrl} = this.state if (!repoName) { return <h2>LOADING......</h2> } else { return <h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2> } } } ReactDOM.render(<MostStarRepo/>,document.getElementById(‘example‘)); </script> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |